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FE 全 书 视频 均 为 专业 授课 老师 录制 ， 像 上 课 一 样 ， 边 讲解 ， 边 分 析 ， 确 保 能 听 懂 ， 学 得 会 。 | 








章 全 书 以 “知识 讲解 + 实战 演练 + 案例 实战 + 综合 案例 ”的 形式 编写 ， 用 实例 学 习 更 专业 。 | 
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内 容 简 介 


《网 页 设计 与 网 站 建设 从 入 门 到 精通 》 一 书 通过 基础 知识 + 实战 演练 的 方式 讲述 了 构建 网 站 的 必 备 知识 和 核 
心 技能 ， 引 导读 者 从 零 开 始 ， 一 步 步 了 解 和 掌握 网 页 设计 、 网 站 建设 的 的 全 过 程 。 

全 书 共 分 23 章 ， 主 要 内 容 包括 : 网 页 制作 第 一 步 、 美 化 网 页 文本 、 定 义 网 页 链接 、 在 网 页 中 设计 列表 样式 、 
在 网 页 中 插入 图 像 、 操 作 表格 、 制 作 动 态 网 页 、 网 页 图 像 编辑 基础 、 制 作 网 页 图 像 、 网 页 色彩 设计 、 网 页 板式 设 
计 、 网 站 策划 和 规划 、 网 站 管理 、 网 站 推广 和 SEO、 安 装 PHP 服务 器 、PHP 快速 入 门 、 请 求 和 获取 信息 、 响 应 
和 处 理 信息 、 访 问 MySQL 数据 库 、 管 理 MySQL 数据 库 、 使 用 PHP 操作 文件 和 综合 案例 部 分 。 

1. 同步 视频 讲解 ， 让 学 习 更 为 直观 高 效 。309 节 大 型 高 清 同步 视频 讲解 ， 先 看 视频 再 学 习 ， 效 率 更 高 。 

2. 海量 精彩 实例 ， 用 实例 学 更 轻松 快捷 。 上 百 个 示例 、 实 战 案例 ， 模 仿 练习 是 最 快捷 的 学 习 方式 。 

3. 精 选 行业 案例 ， 为 高 薪 就 业 牵线 搭桥 。2 个 大 型 综合 案例 ， 为 就 业 莫 定 实战 经 验 。 

4. 完整 学 习 套 餐 ， 为 读者 提供 贴心 服务 。 实 用 模板 380 套 ， 工 具 集 30 部 ， 前 端 案例 1770 个 ， 海 量 设计 
资源 /配色 图 卡 /面试 题 ， 让 学 习 更 加 方便 。 

5. 讲解 通俗 翔实 ， 看 得 懂 、 学 得 会 才 是 硬 道理 。 

本 书 适 用 于 从 未 接触 过 网 页 制作 的 初级 读者 ， 以 及 有 一 定 网 页 制作 基础 ， 想 灵活 使 用 Dreamweaver、Flash 和 
Photoshop 软件 以 提高 制作 技能 的 中 级 读者 自学 使 用 ， 也 可 作为 高 等 院 校 计算 机 专业 以 及 相关 培训 班 的 教学 用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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随 着 互联 网 的 普及 以 及 电子 商务 的 兴起 , 网 站 已 经 成 为 企业 宣传 推广 产品 及 商品 交易 的 一 种 重要 
手段 。 设 计 精 美 、 架 构 合理 的 网 站 对 于 提高 企业 的 知名 度 、 树 立 企 业 形 象 有 着 至 关 重要 的 作用 。 所 以 ， 
开发 设计 网 站 及 后 期 运行 维护 已 经 成 为 企业 运营 的 一 部 分 ， 具 有 非常 好 的 发 展 前 景 。 

网 站 开发 过 程 涉及 到 的 知识 非常 多 ， 要 在 短 时 间 内 完全 掌握 几乎 是 不 可 能 的 。 但 是 ， 作 为 一 个 合 
格 的 前 端 开发 人 员 , 必须 对 这 些 知识 有 所 了 解 , 掌握 其 中 的 重要 部 分 , 例如 HTML 语言 .Dreamweaver、 
Photoshop、 样 式 表 、 脚 本 语言 等 ， 并 至 少 掌握 一 种 程序 设计 语言 及 数据 库 管理 系统 。 这 些 都 是 网 站 
开发 人 员 的 基本 功 。 

学 习 网 页 制作 ， 仅 靠 单 一 工具 和 一 点 语言 基础 是 不 够 的 ， 实 战 是 巩固 网 站 开发 最 重要 的 一 环 。 本 
书 除 技术 讲解 较为 基础 之 外 ， 案 例 实 践 则 非常 贴近 实际 的 网 站 开发 。 读 者 通过 学 习 本 书 中 各 章节 的 知 
识 ， 将 会 对 网 站 开发 所 涉及 的 技术 有 一 个 比较 全 面 的 了 解 ， 基 本 上 可 胜任 一 般 的 网 站 开发 任务 ， 为 今 
后 进一步 提高 开发 水 平 打下 坚实 的 基础 。 


本 书 特色 


回 “内容 系 统 全 面 ， 网 页 /网 站 设计 高 手 必 备 知识 储备 

本 书 力求 成 为 网 站 开发 人 员 的 入 门 教程 ， 因 此 ， 系 统 全 面 是 本 书 最 重要 的 特点 之 一 。 在 编排 上 
则 本 着 从 入 门 到 提高 、 从 精通 到 实战 的 原则 ,将 知识 点 根据 读者 学 习 的 难 易 程度 以 及 在 实际 工作 中 应 
用 的 轻重 顺序 进行 安排 ， 读 者 在 学 习 的 过 程 中 可 以 有 针对 性 地 选择 学 习 内 容 。 

回 “由浅 入 深 ， 快 速 入 门 ， 轻 松 理解 重点 难点 

本 书 从 基本 的 网 站 建设 常识 及 基础 的 HTML 语言 讲 起 ， 逐 步 介绍 各 类 常见 软件 工具 的 使 用 方法 
及 程序 设计 语言 。 同 时 ， 每 一 章 都 本 着 “学 生 好 学 ， 教 师 好 教 ， 企 业 需要 ”的 原则 ， 通 过 大 量 示例 案 
例 ， 深 入 浅 出 地 讲解 网 站 开发 中 的 重 难点 、 易 错 点 ， 使 读者 每 学 完 一 章 都 能 有 所 收获 ， 有 信心 进入 下 
一 章 的 学 习 。 

回 ” 精 选 最 流行 的 技术 ， 打 造 最 核心 的 技能 

由 于 网 站 开发 涉及 到 的 技术 非常 多 ， 因 此 很 多 读者 在 学 习 时 会 感到 无 从 下 手 。 本 书 紧 扣 开发 ， 精 
选 最 流行 的 技术 ， 最 核心 的 技能 ， 按 照 不 同 的 应 用 层面 进行 分 拆 、 讲 解 ， 以 帮助 读者 逐个 了 解 并 掌握 
各 种 技术 的 基础 应 用 。 

回 “配套 多 媒体 教学 ， 将 老师 请 进 家 

为 了 使 初学 者 快速 上 手 , 在 本 书 的 随 书 光盘 中 为 读者 提供 了 各 章 知识 点 及 实例 的 操作 演示 视频 以 
及 实例 代码 和 素材 。 通过 这 些 资料 ， 读 者 可 以 反复 实践 ， 加 深 对 于 书 中 知识 的 理解 。 扫 描 图 书 封底 的 
二 维 码 ， 可 在 手机 中 在 线 学 习 教学 视频 。 


本 书 内 容 
本 书 共 6 部 分 23 章 ， 具 体 结构 划分 如 下 。 


了 路 


i 


第 1 部 分 第 1 章 )， 网 页 制作 基础 篇 简单 介 绍 网 页 制作 需要 了 解 的 基础 知识 ， 如 网 页 相关 概 
念 、 网 页 脚本 语言 HTML、 网 页 设计 语言 CSS 等 。 
第 2 部 分 (第 2 一 7 章 ): 网 页 制作 操作 篇。 讲解 如 何 使 用 Dreamweaver 制作 各 种 类 型 的 网 页 元 素 ， 
败 内 “如 网 页 文本 、 网 页 链接 、 网 页 图 像 、 网 页 列表 、 网 页 表格 、 动 态 特 效 等 
~ 第 3 部 分 (第 8~11 章 )， 网 页 设计 提高 篇 。 系 统 介绍 网 页 设计 需要 提升 的 专业 能 力 ， 如 网 页 图 
7 人 设计 能 力 、 风 页 配色 未 并、 网 页 版 式 策划 等 
| 第 4 部 分 (第 12 一 14 章 ); 网 站 建设 基础 篇 。 概 括 介绍 网 站 开发 需要 掌握 的 知识 ， 如 网 站 策划 思 
| 路 和 方法 、 网 站 管理 的 基本 技巧 、 网 站 发 布 和 推广 方面 的 实战 经 验 等 。 
第 5 部 分 (第 15 一 21 章 ): 网 站 开发 技术 篇 。 详 细 讲 解 如 何 使 用 PHP+MySQL 技术 建设 动态 网 
站 ， 包 括 措 建 PHP 服务 器 、 掌 握 PHP 语言 开发 基础 、 正 确 使 用 PHP 设计 动态 网 页 等 ， 以 及 灵活 使 用 
PHP 读 写 数据 库 的 基本 操作 要 领 。 
第 6 部 分 (第 22 一 23 章 ) 网 站 开发 综合 实践 篇 。 本 部 分 通过 两 个 综合 案例 详细 讲解 网 站 开发 的 
| 全 部 过 程 和 设计 细节 ， 以 帮助 读者 体验 真实 网 站 的 完整 开发 过 程 。 


| 本 书 读 者 


本 书 适 用 于 以 下 读者 : 

具备 一 定 计算 机 操作 基础 的 初学 者 。 
具有 一 定 网 站 开发 经 验 的 初 、 中 级 用 户 。 
立志 从 事 网 站 开发 工作 的 从 业 人 员 。 
自学 网 页 设计 或 网 站 开发 的 大 中 专 学 生 。 
对 于 网 页 制作 感 兴趣 的 社会 培训 用 户 。 
各 类 网 站 的 站 长 。 


关于 我 们 

本 书 由 余 乐 组 织 编写 ， 其 他 参与 编写 的 人 员 还 包括 咸 建 助 、 奚 晶 、 文 善 、 李 静 、 钟 世 礼 、 李 增辉 、 
甘 桂 萍 、 刘 燕 、 杨 凡 、 李 爱 芝 、 孙 宝 良 、 余 洪 萍 、 谭 贞 军 、 孙 爱 荣 、 何 子夜 、 赵 美 青 、 牛 金 硅 、 孙 玉 静 、 
左 超 红 、 蒋 学 军 、 邓 才 兵 、 林 友 赛 、 苏 震 痢 、 崔 鹏 尺 、 李 斌 、 郑 伟 、 邓 艳 超 、 胡 晓 霞 等 。 由 于 编者 水 平 


有 限 ， 书 中 政 漏 和 不 足 之 处 在 所 难免 ,欢迎 读者 朋友 不 音 赐教 。 广 大 读者 如 有 好 的 建议 、 意 见 ， 或 在 学 
习 本 书 时 遇 到 疑难 问题 ， 可 以 联系 我 们 ， 我 们 会 尽快 为 您 解答 ， 联 系 方式 为 jmgtongba@163.com。 


回回 加 加 加 加 


说 明 : 为 了 页 面 效 果 和 便于 学 习 ， 本 书 在 介绍 网 页 制作 过 程 中 使 用 了 一 些 网 络 图 片 。 因 图 片 版 权 
无 法 查找 ， 故 未 能 及 时 与 图 片 著作 权 人 取得 联系 ， 在 此 深 表 鞭 意 。 如 若 侵 犯 了 您 的 权益 ,请 您 及 时 与 
我 们 联系 ， 我 们 将 按 市 场 价格 支付 图 片 使 用 费用 ， 谢 谢 ! 
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4.1.1 无 序列 表 
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4.1.3 自 定义 列表 . 
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4.2.2 自 定义 项 目 符号 . 
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5.1.1 网 页 图 像 格式 
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操作 表格 . 
如 4 视频 讲 
表格 基本 操作 .… 
6.1.1 插入 表格 
6.1.2 编辑 表格 .… 
设置 表格 属性 .… 
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6.5.1 设置 表格 颜色 .. 
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6.6.1 美化 表格 
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6.6.4 设计 音乐 首页 
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制作 翻转 按钮 . 
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网 页 图 像 编辑 基础 
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Photoshop 概述 ….......22 275 
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使 用 Photoshop 绘图 .. 
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8.3.3 增加 和 删除 锚 。 
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8.3.7 路 径 与 选区 转换 .… 
8.3.8 ”填充 和 描 边 路 径 .. 
8.3.9 ”绘制 几何 图 形 .….. 
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8.3.10 绘制 多 边 形 .. 
8.3.11 绘制 直线 .… 
8.3.12 绘制 自 定义 形状 
在 Photoshop 中 编辑 图 像 . 
8.4.1 选择 图 形 对 象 
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第 7 / 章 
网 页 制作 第 一 步 


蝴 着 互联 网 技术 的 不 断 发 展 和 普及 ， 网 络 与 现实 生活 的 结合 更 加 紧密 ， 越 来 越 多 的 人 开始 
学 习 和 制作 网 页 。 但 是 ， 网 页 制作 是 一 个 复杂 的 过 程 ， 需 要 事 握 很 多 技术 。 为 了 能 金 帮助 用 户 
对 网 页 有 一 个 总 体 的 认识 ， 本 章 先 介绍 网 页 相关 基本 概念 、 网 页 组 成 内 容 、 常 用 网 页 设计 工具 
等 内 容 , 最 后 详细 讲解 网 页 制作 必须 束 握 的 HIML 和 CSS 基本 语法 和 用 法 ,为 后 面 章节 复杂 专 
业 知 识 和 网 页 技能 训练 打下 扎实 的 基础 


【 学 习 重点 】 

WI 了 解 网 页 、 网 站 相关 知识 和 概念 
WI 认识 常用 网 页 制作 工具 

MW 熟悉 HTML 基本 语法 和 用 法 

MW 熟悉 CSS 基本 语法 和 用 法 


~ 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


1.1 认识 网 页 和 网 站 


不管 是 上 网 娱乐 ， 还 是 网 络 学 习 、 交 流 ， 大 家 首先 接触 的 概念 就 是 网 页 和 网 站 ， 现 在 就 来 简单 认 
3 wim 个 要 各， 开启 本 书 学 习 之 放 . 
1.1.1 网 页 和 网 站 


网 页 (Web Page) 是 互联 网 上 显示 信息 的 载体 ， 类 似 生 活 中 的 一 页 书 ， 在 网 页 中 可 以 包含 文字 、 
图 像 、 多 媒体 等 内 容 ， 通 过 这 些 内 容 向 浏览 者 传达 特定 信息 。 
| 实际 上 ， 网 页 就 是 一 个 文本 文件 ， 扩 展 名 多 为 .html 或 htm， 也 有 .asp、.aspx、.php 或 .jsp 等， 使 
| 用 任何 文本 编辑 器 都 可 以 打开 并 进行 编辑 。 网 页 存放 在 世界 某 个 角落 的 某 一 台 计 算 机 中 ， 而 这 人 台 计 算 
机 必须 是 与 互联 网 相连 的 。 网 页 经 由 网 址 (URL) 来 识别 和 存 取 ， 当 在 浏览 器 输入 网 址 后 ， 经 过 服务 
器 处 理 , 网 页 文件 会 被 传送 到 当前 位 置 的 计算 机 上 , 然后 再 通过 浏览 器 解释 网 页 的 内 容 , 再 展示 出 来 。 

网 站 (Web Site) 是 指 在 互联 网 上 根据 一 定 的 规则 ， 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 
的 相关 网 页 的 集合 。 简 单 描述 ， 网 站 就 是 一 种 通信 工具 ， 人 们 可 以 通过 网 站 发 布 信息 ， 或 者 利用 网 站 
提供 服务 。 人 们 可 以 通过 网 页 浏览 器 来 访问 网 站 ， 获 取 个 人 需要 的 信息 或 者 服务 。 

网 站 是 由 网 页 组 成 的 ， 网 页 是 构成 网 站 的 基本 单位 ， 是 承载 各 种 网 站 应 用 的 平台 。 如 果 一 个 网 站 
只 有 域名 和 虚拟 主机 而 没有 制作 任何 网 页 的 话 ， 那 么 任何 人 都 无 法 访问 网 站 。 

当 人 们 在 浏览 器 地 址 栏 中 输入 网 站 的 网 址 后 ， 会 首先 看 到 这 个 页 面 ， 通 常 被 称 为 主页 (Home 
| Page)， 或 者 称 为 首页 ， 首 页 类 似 图 书 中 的 目录 ， 具 有 导航 作用 。 


1.1.2 ”网 页 类 型 


网 页 有 多 种 分 类 方法 ， 习 惯 上 人 们 把 网 页 分 为 静态 网 页 和 动态 网 页 。 

静态 网 页 一 般 以 .html 或 .htm 为 文件 扩展 名 ， 多 通过 网 页 设计 工具 一 次 性 设计 ， 并 通过 手工 
更 新 页 面 信息 ， 信 息 更 新 速度 相对 比较 缓慢 。 如 今 大 型 网 站 都 会 利用 网 站 管理 系统 ， 把 所 
有 动态 页 面 自动 生成 静态 网 页 ， 以 提升 用 户 浏览 体验 ， 我 们 称 这 种 静态 网 页 为 伪 静 态 。 

加 ”动态 网 页 是 通过 网 页 脚本 与 语言 自动 处 理 、 自 动 更 新 的 页 面 ， 例 如 ， 论 坛 中 的 帖子 就 是 通 
过 网 站 服务 器 运行 程序 , 自动 处 理 信息 , 按照 流程 更 新 网 页 .动态 网 页 一 般 以 .asp、.aspx、.php 

| 或 jsp 为 文件 扩展 名 。 

| 目前 ， 实 现 动 态 网 页 的 服务 器 技术 主要 包括 ASP/ASPNET、PHP 和 JSP 等 ， 简 单 说 明 如 下 。 

| 1. ASP/ASPNET 


ASP (Active Server Pages) 是 微软 公司 开发 的 一 种 快速 、 简 便 的 服务 器 技术 ， 由 于 它 比 较 简单 ， 
学 习 门 槛 低 ， 是 初学 者 的 首选 技术 ， 凭 借 微 软 公司 强 有 力 的 技术 支持 ， 成 为 早期 网 站 建设 中 最 为 流行 
的 技术 之 一 。 

ASPNET 是 微软 公司 在 ASP 基础 上 推出 的 一 种 服务 器 技术 ， 它 全 面 采 用 效率 较 高 的 、 面 向 对 象 
的 方法 来 创建 动态 Web 应 用 程序 。 在 原来 的 ASP 技术 中 ， 服 务 器 端 代码 和 客户 端 HTML 混合 、 交 织 
在 一 起 ， 常 常 导致 页 面 的 代码 元 长 而 复杂 ， 程 序 的 逻辑 难以 理解 ， 而 ASPNET 就 能 很 好 地 解决 这 个 
问题 ， 而 且 能 与 浏览 器 独立 ， 且 可 以 支持 VB.NET、C#、VC++.NET、JS.NET 等 多 种 编程 语言 。 


2. 
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| 
2. PHP | 
PHP (Hypertext Preprocessor) 是 一 种 HIML 内 嵌 式 的 语言 ，PHP 与 微软 的 ASP 很 相似 ， 都 是 一 | 
种 在 服务 器 端 执行 的 嵌入 HTML 文档 的 脚本 语言 ， 语 言 的 风格 类 似 于 C 语言 ， 现 在 被 很 多 的 网 站 编 | 
程 人 员 广 泛 地 运用 。 由 于 PHP 源 代码 是 开放 的 ， 所 有 的 PHP 源 代码 事实 上 都 可 以 得 到 。 同 时 PHP 技 | 食 扩 | 
术 又 是 免费 的 ， 因 此 深 受 普通 用 户 欢迎 。 | 


3. JSP 


JSP (Java Server Pages) 是 Sun 公司 推出 的 网 站 开发 技术 ， 是 将 纯 Java 代码 嵌入 HIML 中 实现 
动态 功能 的 一 项 技术 。JSP 和 ASP 都 是 在 HTML 代码 中 获 入 某 种 脚本 并 由 语言 引擎 解释 执行 程序 代 
码 ， 它 们 都 是 面向 服务 器 的 技术 ,客户 端 浏 览 器 不 需要 任何 附加 软件 的 支持 。 两 者 最 明显 的 区 别 在 于 
ASP 使 用 的 编程 语言 是 VBScript 之 类 的 脚本 程序 ， 而 JSP 使 用 的 是 Java。 此 外 ，ASP 中 的 VBScript 
代码 被 ASP 引擎 解释 执行 ， 而 JSP 中 的 脚本 在 第 一 次 执行 时 被 编译 成 Servlet 并 由 Java 虚拟 机 执行 ， 
这 是 ASP 与 JSP 本 质 的 区 别 。 


1.1.3 ”静态 网 页 和 动态 网 页 


静态 网 页 和 动态 网 页 主要 根据 网 页 制作 的 语言 来 区 分 。 
静态 网 页 使 用 语言 HTML， 如 图 1.1 所 示 。 
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图 1.1 静态 网 页 显示 的 网 址 
回 “动态 网 页 使 用 语言 : HIML 十 ASP、HTML 十 PHP 或 HTML 十 JSP 等 ， 如 图 1.2 所 示 。 
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职 时 关内 时 关 ,村 与 他 交 会 避 要 开始 了 ， 上 万 副业 娄 与 进 床 ,在 恒 交会 上 找 人 才 ， 拓 HR 商 、 按 导 


年 他 们 所 好 历 的 栈 碳 寺 策 黑马 加 道 清 了 困 马 会 全 长 、 十 月 科大 创 冶 人 起 靖 分 字 2014 这 一 年 在 
外 号 上 沪 生 了 什么 7 >| 





图 1.2 动态 网 页 显示 的 网 址 
动态 网 页 的 程序 都 是 在 服务 器 端 运行 ， 最 后 把 运行 的 结果 返回 到 客户 端 浏 览 器 上 显示 。 而 静态 网 
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| 页 是 事先 制作 好 的 ， 直 接 通 过 服务 器 传递 给 客户 端 浏览 器 浏览 。 
静态 网 页 和 动态 网 页 各 有 特点 ， le eae oe es ipt 
站 内 容 的 多 少 ， 如 果 网 站 功能 比较 简单 ， 内 容 更 新 量 不 是 很 大 ， 采 用 纯 静 态 网 页 的 方式 会 更 简单 
之 要 采用 动态 网 页 技术 来 实现 。 
简单 概括 来 说 ， 静 态 网 页 具有 下 面 几 个 特点 : 
加 ”静态 网 页 每 个 网 页 都 有 一 个 固定 的 URL， 且 网 页 URL 以 .htm、.html、.shtml 等 常见 形式 为 
后 缀 ， 而 不 含有 “?”。 
回 ”网 页 内 容 一 经 发 布 到 网 站 服务 器 上 ， 无 论 是 否 有 用 户 访问 ， 每 个 静态 网 页 的 内 容 都 是 保存 
在 网 站 服务 器 上 的 ， 也 就 是 说 ， 静 态 网 页 是 实 实在 在 保存 在 服务 器 上 的 文件 ， 每 个 网 页 都 
是 一 个 独立 的 文件 。 
回 “静态 网 页 的 内 容 相 对 稳定 ， 因 此 容易 被 搜索 引擎 检索 。 
加 ”静态 网 页 没有 数据 库 的 支持 ， 在 网 站 制作 和 维护 方面 工作 量 较 大 ， 因 此 当 网 站 信息 量 很 大 
时 完全 依靠 静态 网 页 制作 方式 比较 困难 。 
加 ”静态 网 页 的 交互 性 较 差 ， 在 功能 方面 有 较 大 的 限制 。 
动态 网 页 具有 下 面 几 个 特点 : 
加 ”动态 网 页 以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 。 
加 ”采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 。 例 如 ， 用 户 注册 、 用 户 登录 、 在 线 调查 、 
用 户 管理 、 订 单 管理 等 。 
加 “动态 网 页 实际 上 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 只 有 当 用 户 请 求 时 服务 器 才 返回 
一 个 完整 的 网 页 。 
回 “动态 网 页 中 的 “?” 对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 网 站 的 数 
据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 搜 索 蜂 蛛 不 去 抓 取 网 址 中 “?” 后 面 的 内 
容 ， 因 此 采用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 需要 做 一 定 的 技术 处 理 才能 适应 搜索 
引擎 的 要 求 。 
静态 网 页 是 网 站 建设 的 基础 ， 静 态 网 页 和 动态 网 页 之 问 并 不 矛盾 ,为 了 网 站 适应 搜索 引擎 检索 的 
需要 ， 即 使 采用 动态 网 站 技术 ， 也 可 以 将 网 页 内 容 转换 为 静态 网 页 发 布 。 
动态 网 站 也 可 以 采用 静 动 结合 的 原则 ， 适合 采用 动态 网 页 的 地 方 用 动态 网 页 ， 如 果 必须 使 用 静态 
网 页 ， 静 态 网 页 相关 图 片 则 可 以 考虑 用 静态 网 页 的 方法 来 实现 。 在 同一 个 网 站 上 ,动态 网 页 内 容 和 静 
态 网 页 内 容 同 时 存在 也 是 很 普遍 的 。 


1.2 网 页 构成 元 素 


无 论 是 初次 上 网 新 手 ， 还 是 经 常 冲浪 高 手 ， 在 学 习 制作 网 页 之 前 ， 都 必须 先 认识 〈 或 重新 认识 ) 


| 一 下 构成 网 页 的 基本 元 素 。 只 有 这 样 ， 才 能 在 真正 的 设计 工作 中 得 心 应 手 ， 才 能 根据 需要 合理 地 组 织 


和 安排 网 页 的 内 容 ， 从 而 达到 期 望 的 目标 。 
设计 网 页 的 目的 主要 是 发 布 信息 ， 因 此， 作为 信息 主要 载体 的 文本 和 图 像 也 就 成 了 网 页 的 基本 组 


| 成 部 分 。 超 链接 〈 或 称 链接 ) 是 网 页 的 核心 ， 是 它 将 互联 网 中 无 数 的 网 页 链接 在 一 起 ， 如 果 没 有 它 ， 


网 页 就 无 从 谈 起 。 此 外 ， 表 格 、 动 画 、 音 乐 和 交互 式 表 单 等 信息 的 组 织 、 表 现 ， 以 及 交互 元 素 在 网 页 
中 也 具有 举足轻重 的 地 位 。 
如 图 1.3 所 示 是 苏宁 易 购 首页 。 在 这 个 网 页 中 ， 包 含 了 多 种 网 页 元 素 〈 当 然 不 可 能 是 全 部 ) 。 下 
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面 将 详细 介绍 网 页 中 包含 的 元 素 及 其 在 网 页 中 的 作用 。 


站 点 LOGO (站 点 标识 )， 搜索 文本 框 ， 是 表单 的 一 种 形式 ， 可 根 
网 页 图 像 的 一 种 特殊 样式 据 输入 关键 字 在 站 点 内 搜索 相关 内 容 


DOE A = Less=s 导航 栏 , 使 浏览 者 能 够 迅速 在 站 
~ 点 中 定位 和 访问 主要 网 页 
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列表 ， 以 列表 形式 组 织 的 文本 超 链接 ， Banner (广告 条 )， 一 般 为 GIF 动画 或 
在 列表 中 可 以 显示 信息 或 导航 Flash 动画 ， 是 典型 的 图 像 超 链接 


图 1.3 网 页 元 素 概览 
1.2.1 文本 


文本 一 直 是 人 类 最 重要 的 信息 载体 与 交流 工具 ,网 页 中 的 信息 也 以 文本 为 主 。 与 图 像 相 比 , 文字 
虽然 不 如 图 像 那样 能 够 很 快 引起 浏览 者 的 注意 , 但 却 能 准确 地 表达 消息 的 内 容 和 含义 。 为 了 克服 文字 
固有 的 缺点 ， 人 们 赋予 了 网 页 中 文本 更 多 的 属性 ， 如 字体 、 字 形 、 字 号 、 字 体 颜色 、 文 字 效果 、 底 纹 
和 边框 等 ， 通 过 不 同样 式 的 区 别 ， 突 出 显示 重要 内 容 ， 弱 化 次 要 信息 。 此 外 ， 用 户 还 可 以 在 网 页 中 设 
计 各 种 各 样 的 文字 列表 ， 来 清晰 表达 一 系列 项 目 。 这 些 功能 都 给 网 页 中 的 文本 赋予 了 新 的 生命 力 。 


1.2.2 图像 和 动画 


图 像 在 网 页 中 具有 提供 信息 、 展 示 作品 、 装 饰 网 页 、 表 达 个 人 情调 和 风格 的 作用 。 用 户 可 以 在 网 
页 中 使 用 GIF、JPEG (JPG) 、PNG 3 种 图 像 文 件 格式 ， 其 中 使 用 最 广泛 的 是 GIF 和 JPEG 两 种 格式 。 

图 像 虽 然 在 网 页 中 起 着 非常 重要 的 作用 , 但 如 果 网 页 上 加 入 的 图 片 过 多 , 不 仅 会 影响 网 页 整体 视 
觉 效果 ， 而 且 下 载 速度 也 将 明显 下 降 ， 可 能 会 影响 用 户 的 浏览 体验 。 

在 网 页 中 使 用 动画 可 以 有 效 地 吸引 浏览 者 的 注意 力 , 毕竟 动态 效果 比 静 止 对 象 更 有 吸引 力 , 因此 ， 
许多 网 站 的 广告 都 做 成 了 动画 形式 。 


1.2.3 ”声音 和 视频 
声音 是 多 媒体 网 页 的 一 个 重要 组 成 部 分 。 当 前 存在 着 一 些 不 同类 型 的 声音 文件 和 格式 ， 也 有 一 些 
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不 同 的 方法 将 这 些 声音 添加 到 网 页 中 。 在 决定 添加 的 声音 的 格式 和 方式 之 前 ， 需 要 考虑 的 因素 包括 其 
用 途 、 格 式 、 文 件 大 小 、 声 音 品质 和 浏览 器 差别 等 。 不 同 浏览 器 对 于 声音 文件 的 处 理 方法 是 非常 不 同 
的 ， 彼 此 之 间 可 能 不 兼容 。 

用 于 网 络 的 声音 文件 的 格式 非常 多 ， 常 用 的 有 MIDI、WAV、MP3 和 AIF 等 。 设 计 者 在 使 用 这 


| 些 格式 的 文件 时 ， 需 要 加 以 区 别 。 很 多 浏览 器 不 用 插件 也 可 以 支持 MIDI、WAV 和 AIF 格式 的 文件 ， 


而 MP3 和 了 RM 格式 的 声音 文件 则 需要 专门 的 浏览 器 播放 。 
一 般 来 说 ， 不 要 使 用 声音 文件 作为 背景 音乐 ， 那 样 会 影响 网 页 下 载 的 速度 。 可 以 在 网 页 中 添加 一 


| 个 打开 声音 文件 的 链接 ， 让 播放 音乐 变 得 可 以 控制 。 


视频 文件 的 格式 也 非常 多 ， 常 见 的 有 RealPlayer、MPEG、AVI 和 FLV 等 。 视频 文件 的 采用 让 网 
页 变 得 非常 精彩 而 且 有 动感 。 网 络 上 的 许多 插件 也 使 向 网 页 中 插入 视频 文件 的 操作 变 得 非常 简单 。 


1.2.4 超 链接 


超 链接 (Hyper Link) 是 互联 网 盛行 起 来 的 最 主要 的 原因 。 它 能 够 实现 从 一 个 网 页 跳 转 到 链接 目 
的 端的 网 页 位 置 上 。 例 如 ， 指 向 另 一 个 网 页 或 者 相同 网 页 上 的 不 同位 置 。 这 个 目的 端 通常 是 另 一 个 网 
页 ， 也 可 以 是 一 幅 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 〈 如 多 媒体 文件 、 文 档 或 任意 文件 ) 、 一 个 程 
序 或 者 是 本 网 页 中 的 其 他 位 置 。 其 载体 通常 是 文本 、 图 片 或 图 片 中 的 区 域 ， 也 可 以 是 一 些 不 可 见 的 程 
序 脚本 。 

当 浏览 者 单 击 超 链 接 时 , 其 目的 端 将 显示 在 网 页 浏览 器 上 , 并 根据 目的 端的 类 型 以 不 同方 式 链接 。 
例如 ， 当 指向 一 个 AVI 文件 的 超 链接 被 单 击 后 ， 该 文件 将 在 媒体 播放 软件 中 打开 ; 如 果 单 击 的 是 指 
向 一 个 网 页 的 超 链接 ， 则 该 网 页 将 显示 在 网 页 浏览 器 上 。 


1.2.5 表格 


在 网 页 中 表格 用 来 控制 网 页 中 信息 的 布局 方式 。 这 主要 包括 两 方面 : 一 是 使 用 行 和 列 的 形式 来 布 
局 文本 和 图 像 以 及 其 他 的 列表 化 数据 ; 二 是 可 以 使 用 表格 来 精确 控制 各 种 网 页 元 素 在 网 页 中 出 现 的 位 


| 置 。 在 标准 网 页 设计 中 ， 表 格 更 多 用 在 数据 的 表格 化 显示 。 


1.2.6 表单 


使 用 超 链接 , 浏览 者 和 服务 器 站 点 便 建立 起 了 一 种 简单 的 交互 关系 。 表单 的 出 现 使 浏览 者 与 站 点 
的 交互 上 升 到 了 一 个 新 的 高 度 。 网 页 中 的 表单 通常 用 来 接收 浏览 者 在 客户 端的 输入 , 然后 将 这 些 信息 
发 回 到 客户 端 。 这 些 信息 既 可 以 是 文本 文件 、 网 页 、 电 子 邮件 ， 也 可 以 是 服务 器 端的 应 用 程序 。 表 单 
的 用 途 如 下 : 

回 ”收集 联系 信息 。 
接收 用 户 要 求 。 
收集 订单 、 出 货 和 收费 细则 。 
获得 反馈 意见 。 
设置 来 宾 签 名 德 。 
让 浏览 者 输入 关键 字 ， 在 站 点 中 搜索 相关 的 网 页 。 
让 浏览 者 注册 为 会 员 并 以 会 员 身份 登录 站 点 。 

表单 由 不 同 功能 的 表单 对 象 组 成 ,最 简单 的 表单 也 要 包含 一 个 输入 文本 框 和 一 个 提交 按钮 。 站 点 
浏览 者 填写 表单 的 方式 通常 是 输入 文本 、 选 中 单 选 按钮 与 复 选 框 ， 以 及 从 下 拉 列 表 框 中 选择 选项 等 。 


加 回回 加 加 加 
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根据 表单 功能 与 处 理 方式 的 不 同 ， 通 常 可 以 将 表单 分 为 用 户 反馈 表单 、 留 言 簿 表单 、 搜 索 表 单 和 
用 户 注册 表单 等 类 型 。 


1.2.7 导航 栏 


导航 栏 是 用 户 在 规划 好 站 点 结构 、 开 始 设计 主页 时 必须 考虑 的 一 项 内 容 。 导 航 栏 的 作用 就 是 要 让 | 
浏览 者 在 浏览 站 点 时 ， 不 会 因为 迷路 而 中 止 对 站 点 的 访问 。 事 实 上 ， 导 航 栏 就 是 一 组 超 链接 ， 这 组 超 | 
链接 的 目标 就 是 本 站 点 的 主页 以 及 其 他 重要 网 页 。 在 设计 站 点 中 的 诸 网 页 时 ， 可 以 在 站 点 的 每 个 网 页 
上 显示 一 个 导航 栏 ， 这 样 ， 浏 览 者 就 可 以 既 快 又 容易 地 转向 站 点 的 其 他 主要 网 页 。 

一 般 情况 下 ， 导 航 栏 应 放 在 网 页 中 较 引信 注 目的 位 置 ， 通 常 是 在 网 页 的 项 部 或 一 侧 。 导 航 栏 既 可 
以 是 文本 链接 ， 也 可 以 是 一 些 图 像 按钮 。 


1.2.8 ”特殊 效果 


网 页 中 除了 以 上 几 种 最 基本 的 元 素 之 外 ， 还 有 一 些 其 他 常用 元 素 ， 包 括 悬 停 按 钮 、JavaSecript 特 
效 、ActiveX 等 各 种 特效 。 它 们 不 仅 能 点 绥 网 页 ， 使 网 页 更 活 泌 有趣， 而且 在 网 上 娱乐 、 电 子 商务 等 
方面 也 有 着 不 可 忽视 的 作用 。 





1.3 网 页 制作 工具 简介 


网 页 内 容 如 此 丰富 ， 究 竟 要 用 什么 工具 来 进行 创作 ， 已 经 成 为 广大 网 页 制作 者 最 关心 的 话题 。 现 
在 网 页 制作 软件 很 多 ， 下 面 介绍 用 户 使 用 比较 广泛 的 网 页 编辑 、 网 页 图 像 与 动画 制作 软件 。 


1.3.1 网 页 编辑 工具 一 一 Dreamweaver 


Dreamweaver 与 Fireworks、Flash 一 起 ， 被 人 们 喻 为 “网 页 制作 三 剑客 ”。Dreamweaver 是 “所 
见 即 所 得 ”的 网 页 编辑 软件 。 它 能 通过 鼠标 拖 动 的 方式 从 头 到 尾 制作 静态 页 面 和 动态 HTML 效果 。 

Dreamweaver 采用 Roundtrip HTML 技术 ,可 以 在 设计 器 和 HTML 代码 编辑 器 之 间 进行 自由 转换 ， 
而 HTML 语法 及 结构 不 变 。 这 样 ， 专 业 设 计 者 可 以 在 不 改变 原 有 编辑 习惯 的 同时 ， 充 分 享受 到 “所 
见 即 所 得 ” 带 来 的 方便 。Dreamweaver 最 具 挑 战 性 和 生命 力 的 是 它 的 开放 式 设 计 ， 这 项 设计 使 任何 人 
都 可 以 轻易 扩展 它 的 功能 。 

利用 Dreamweaver， 开 发 人 员 、 编 程 人 员 和 设计 人 员 可 以 在 多 种 服务 器 平台 上 、 在 一 个 软件 中 完 
成 支持 几 种 语言 的 动态 网 页 的 开发 ， 产 生 和 编辑 用 ASP、PHP、JSP 开发 的 Web 内 容 。 由 于 Dreamweaver 
是 从 低 版 本 的 Dreamweaver 环境 衍生 出 来 的 ， 因 此 它 也 具有 十 分 完美 的 HIML、CSS 和 JavaScript 功能 。 

Dreamweaver 的 界面 和 工作 环境 简洁 、 强 大 ， 具 备 与 Photoshop 、Flash 紧密 集成 的 诸多 优点 ， 以 
及 使 用 Dreamweaver 的 可 扩展 结构 来 扩展 和 定制 Web 应 用 和 功能 。 


1.3.2 ”网 页 图 像 制作 工具 一 一 Photoshop 


Photoshop 是 图 像 处 理 专业 工具 ， 被 广泛 应 用 于 平面 设计 、 媒 体 广告 和 网 页 设计 等 诸多 领域 。 
Photoshop 支持 多 种 图 像 格式 和 颜色 模式 ， 能 同时 进行 多 图 层 操作 。 它 的 绘画 功能 与 选取 功能 使 图 像 
编辑 变 得 非常 方便 。 


we 
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在 网 页 图 像 设计 中 ， 经 常 需要 用 Photoshop 完成 前 期 设计 和 处 理工 作 。 例 如 ， 使 用 Photoshop 设 
计 网 页 效果 图 , 设计 网 页 按钮 、 网 页 背景 等 元 素 。 针对 图 像 特定 区 域 进行 处 理 , 就 需要 精确 选取 范围 ， 
为 此 Photoshop 提供 了 众多 选取 工具 和 命令 ， 灵 活 使 用 它们 可 以 轻松 设计 网 页 元 素 。 绘 图 也 是 网 页 设 
写 内 | 计 中 很 重要 的 工作 ，Photoshop 提供 的 绘图 工具 ， 基 本 可 以 完成 各 种 矢量 绘图 需要 ， 强 大 的 功能 可 以 
人 一 ”| 媲美 专业 矢量 绘图 软件 。 
pte | Photoshop 提供 切片 工具 ， 能 够 把 设计 图 快速 切割 为 网 页 组 成 模块 ， 然 后 一 键 输出 为 网 页 ， 并 根 
| 据 需要 对 输出 的 网 页 图 像 进 行 优化 。 


1.3.3 网 页 动画 设计 工具 一 一 Flash 


Flash 也 是 Adobe 公司 的 产品 ,是 目前 最 流行 的 矢量 动画 制作 软件 。Flash 是 一 种 动画 创作 与 应 用 
程序 开发 于 一 身 的 创作 软件 ， 为 创建 数字 动画 、 交 互 式 Web 站 点 、 桌 面 应 用 程序 以 及 手机 应 用 程序 
| 开发 提供 了 功能 全 面 的 创作 和 编辑 环境 。Flash 广泛 用 于 创建 吸引 人 的 应 用 程序 ， 它 们 包含 丰富 的 视 
频 、 声 音 、 图 形 和 动画 。 可 以 在 Flash 中 创建 原始 内 容 或 者 从 其 他 Adobe 应 用 程序 (如 Photoshop) 
导入 它们 ， 快 速 设计 简单 的 动画 ， 以 及 使 用 ActionScript 开发 高 级 交互 式 项 目 。 

设计 人 员 和 开发 人 员 可 使 用 它 来 创建 演示 文稿 、 应 用 程序 和 其 他 允许 用 户 交互 的 内 容 。Flash 可 
以 包含 简单 的 动画 、 视 频 内 容 、 复 杂 演示 文稿 和 应 用 程序 以 及 介 于 它们 之 间 的 任何 内 容 。 通 常 ， 使 用 
| Flash 创作 的 各 个 内 容 单元 称 为 应 用 程序 ， 即 使 它们 可 能 只 是 很 简单 的 动画 。 也 可 以 通过 添加 图 片 、 
声音 、 视 频 和 特殊 效果 ， 构 建 包含 丰富 媒体 的 Flash 应 用 程序 。 





1.4 HTML 基础 


学 习 网 页 制作 ， 用 户 应 该 首先 了 解 HIML。 根 据 W3C 网 页 规范 化 设计 要 求 ， 网 页 应 该 遵循 结构 
(Stmucture)、 表 现 〈Presentation) 和 行为 (Behavior) 的 分 离 。 

结构 : 使 用 HTML 设计 网 页 标签 ， 即 网 页 结构 和 内 容 。 

表现 : 使 用 CSS 设计 网 页 样式 ， 即 网 页 显示 效果 。 

回 “” 行为: 使 用 JavaScript 和 DOM 规范 设计 网 页 脚本 ， 即 网 页 特效 、 动 画 或 者 行为 。 

因此 ， 读 者 应 该 先 掌 握 HTML 语言 基本 语法 和 用 法 ， 能 够 熟练 使 用 HTML 标签 。 


1.4.1 认识 HTML 


HTML 表示 超 文 本 标识 语言 ， 使 用 HTML 标签 编写 的 文档 称 为 HTML 文档 ， 目 前 最 新 版 本 是 
HTML 5.0， 使 用 最 广泛 的 是 HIML 4.1 版 本 。 
早期 的 HTML 版 本 不 适合 构建 标准 化 网 页 ， 因 为 它 把 结构 和 表现 混淆 在 一 起 ， 例 如 ，HIML 把 
不 同类 型 的 元 素 ， 如 描述 性 元 素 color、i 等 和 结构 性 元 素 div、table 等 ， 以 及 元 素 属 性 放 在 一 起 ， 为 
以 后 的 维护 和 管理 埋 下 隐患 。 
XHTML 是 HTML 语言 的 升级 版 本 ， 与 HTML 在 语法 和 标签 使 用 方面 差别 不 大 。 熟 悉 HTML 语 
| 言 ， 再 熟悉 标准 结构 和 规范 ， 也 就 熟悉 了 XHTML 语言 。 
| HTML 作为 一 种 网 页 内 容 标 识 语言 ， 易 学 易 懂 ， 熟 悉 使 用 该 语言 可 以 制作 功能 强大 、 美 观 大 方 的 
| 网 页 。HTML 语言 的 主要 作用 说 明 如 下 。 
| 使 用 HTMI 语言 标识 文本 。 例 如 ， 定 义 标题 文本 、 段 落 文本 、 列 表 文本 、 预 定义 文本 等 。 


.8. 
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使 用 HIML 语言 建立 链接 ， 通 过 链接 可 以 访问 互联 网 上 的 所 有 信息 ， 当 使 用 鼠标 单 击 超 链 
接 时 ， 会 自动 跳 转 到 链接 页 面 。 
使 用 HTML 语言 创建 列表 ， 把 信息 有 序 组 织 在 一 起 ， 以 方便 浏览 。 


加 加 


冲击 力 。 
回 ”使 用 HIML 语言 可 以 制作 表格 ， 以 方便 显示 大 量 数据 。 
加 ”使 用 HTML 语言 制作 表单 ， 允 许 在 网 页 内 输入 文本 信息 ， 执 行 其 他 用 户 操作 ， 方 便 信息 互 动 。 


1.4.2 HTML 文档 基本 结构 


HTML 文档 一 般 都 应 包含 两 部 分 : 头 部 区 域 和 主体 区 域 。 
HTML 文档 基本 结构 由 3 个 标签 负责 组 织 : <html>、<head> 和 <body>。 其 中 <html> 标 签 标 识 HIML 
文档 ，<head> 标 签 标 识 头 部 区 域 ， 而 <body> 标 签 标识 主体 区 域 。 一 个 完整 的 HTML 文档 基本 结构 如 下 : 


<html> <!-- 语 法 开始 --> 
<head> 





<!-- 头 部 信息 ， 如 <title> 标 签 定义 的 网 页 标题 --> 


<!-- 主 体 信息 ， 包 含 网 页 显示 的 内 容 --> 
</body> 
</html> <!-- 语 法 结束 --> 


可 以 看 到 ， 每 个 标签 都 是 成 对 组 成 ， 第 一 个 标签 (如 <html>) 表 示 标 识 的 开始 位 置 ， 而 第 二 个 标 
签 ( 如 </html>) 表示 标识 的 结束 位 置 。<html> 标 签 包含 <head> 和 <body> 标 签 ， 而 <head> 和 <body> 标 
签 是 并 列 排列 。 

如 果 把 上 面 字符 代 码 放 置 在 文本 文件 中 ， 然 后 另存 为 “testhtml”， 就 可 以 在 浏览 器 中 浏览 了 。 当 
然 ， 由 于 这 个 简单 的 HTML 文档 还 没有 包含 任何 信息 ， 所 以 在 浏览 器 中 是 看 不 到 任何 显示 内 容 的 。 


1.4.3 HTML 基本 语法 


编写 HTML 文档 时 ， 必 须 遵 循 HTML 语法 规范 。HTML 文档 实际 上 就 是 一 个 文本 文件 ， 它 由 标 
答 和 信息 混合 组 成 ， 当 然 这 些 标签 和 信息 必须 遵循 一 定 的 组 合 规则 ， 否 则 浏览 器 是 无 法 解析 的 。 
HTML 语言 的 规范 条 文 不 多 ， 相 信 读 者 也 很 容易 理解 。 从 逻辑 上 分 析 ， 这 些 标签 包含 的 内 容 就 表 
示 一 类 对 象 ， 也 可 以 称 为 网 页 元 素 。 从 形式 上 分 析 ， 这 些 网 页 元 素 通过 标签 进行 分 隔 ， 然 后 表达 一 定 
的 语义 。 很 多 时 候 ， 我 们 把 网 页 标签 和 网 页 元 素 混 为 一 团 ， 而 实际 上 ， 网 页 文档 就 是 由 元 素 和 标签 组 
成 的 容器 。 
所 有 标签 都 包含 在 “<” 和 “>” 起 止 标识 符 中 ， 构 成 一 个 标签 。 例 如 ，<style>、<head>、 
<body> 和 <div> 等 。 
回 在 HIML 文档 中 ， 绝 大 多 数 元 素 都 有 起 始 标签 和 结束 标签 ， 在 起 始 标签 和 结束 标签 之 间 包 
含 的 是 元 素 主体 。 例 如 ，<body> 和 </body> 中 间 包 含 的 就 是 网 页 内 容 主 体 。 


使 用 HTMI 语言 在 网 页 中 显示 图 像 、 声 音 、 视 频 、 动 画 等 多 媒体 信息 ， 把 网 页 设计 得 更 富 | 








回 “起 始 标签 包含 元 素 的 名 称 ， 以 及 可 选 属性 ， 也 就 是 说 元 素 的 名 称 和 属性 都 必须 在 起 始 标签 | 


中 。 结 束 标签 以 反 斜 杠 开 始 ， 然 后 附加 上 元 素 名 称 。 例 如 : 
<tag> 元 素 主 体 </tag> 
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@ 元 素 的 属性 包含 属性 名 称 和 属性 值 两 部 分 ， 中 间 通 过 等 号 进行 连接 ， 多 个 属性 之 间 通 过 空 
格 进行 分 隔 。 属 性 与 元 素 名 称 之 间 也 是 通过 空格 进行 分 隔 。 例 如 : 


<tag al="V1" a2="V2" a3="V3" «ee an="vn"> 元 素 主体 </tag> 
仿 F | @ ”少数 元 素 的 属性 也 可 能 不 包含 属性 值 ， 仅 包含 一 个 属性 名 称 。 例 如 : 


Note | <tag al a2 a3 …… an> 元 素 主体 </tag> 
| @ 一般 属性 值 应 该 包含 在 引号 内 ， 虽 然 不 加 引号 ， 浏 览 器 也 能 够 解析 ， 但 是 读者 应 该 养 成 良 
好 的 习惯 。 
@ ”属性 是 可 选 的 ， 元 素 包 含 多 少 个 属性 ， 也 是 不 确定 的 ， 这 主要 根据 不 同 元 素 而 定 。 不 同 的 
元 素 会 包含 不 同 的 属性 。HTML 也 为 所 有 元 素 定 义 了 公共 属性 , 如 tile、id、class、style 等 。 
虽然 大 部 分 标签 都 是 成 对 出 现 , 但 是 也 有 少数 标签 不 是 成 对 的 , 这 些 孤 立 的 标签 , 被 称 为 空 标签 。 
空 标签 仅 包含 起 始 标签 ， 没 有 结束 标签 。 例 如 : 
<tag> 
同样 ， 空 标签 也 可 以 包含 很 多 属性 ， 用 来 标识 特殊 效果 或 者 功能 ， 例 如 : 
<tag al="vl" al="v1" a2="v2”…… an="vn'> 
@ 标签 可 以 相互 嵌 套 ， 形 成 文档 结构 。 棋 套 必须 匹配 ， 不 能 交错 霸 套 ， 例 如 ，<div><span> 
</div></span>。 合 法 的 嵌 套 应 该 是 包含 或 被 包含 的 关系 ， 例 如 ，<div><span></span></div> 
或 <span><div></div></span>。 
@ HTML 文档 所 有 信息 必须 包含 在 <html> 标 签 中 ， 所 有 文档 元 信息 应 包含 在 <head> 子 标签 中 ， 
而 HTML 传递 信息 和 网 页 显示 内 容 应 包含 在 <body> 子 标签 中 。 
| 【示例 】 对 于 HTML 文档 来 说 ， 除 了 必须 符合 基本 语法 规范 外 ， 我 们 还 必须 保证 文档 结构 信息 
| 的 完整 性 。 完 整 文档 结构 如 下 所 示 : 
| <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.wl.org/TR/xhtmll/DTD/ 
| xhtmll-transitional.dtd"> 
<html xmlns="http://www.w1.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 文 档 标题 </title> 
</head> 
<body></body> 
</html> 
HTML 文档 应 主要 包括 如 下 内 容 : 
必须 在 首 行 定义 文档 的 类 型 ， 过 渡 型 文档 可 省 略 。 
<html> 标 签 应 该 设置 文档 名 字 空间 ， 过 渡 型 文档 可 省 略 。 
必须 定义 文档 的 字符 编码 ， 一 般 使 用 <meta> 标 签 在 头 部 定义 ， 常 用 字符 编码 包括 中 文 简体 
(gb2312) 、 中 文 繁体 (big5) 和 通用 字符 编码 (utf8) 。 
应 该 设置 文档 的 标题 ， 可 以 使 用 <title> 标 签 在 头 部 定义 。 
HTML 文档 扩展 名 为 .htm 或 .html， 保 存 时 必须 正确 使 用 扩展 名 ， 否 则 浏览 器 无 法 正确 地 解析 。 
如 果 要 在 HTML 文档 中 增加 注释 性 文本 ， 则 可 以 在 “<!--” 和 “-->” 标 识 符 之 间 增 加 ， 例 如 : 
<!-- 单 行 注释 --> 
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3 
多 行 注释 





1.4.4 HTML 标签 


HTML 定义 的 标签 很 多 ， 下 面 对 常 用 标签 进行 说 明 ， 随 着 读者 学 习 不 断 深入 ， 相 信 会 逐步 掌握 
HTML 所 有 标签 的 用 法 和 使 用 技巧 。 | 
1. 文档 大 本 标签 | 
文档 基本 标签 主要 用 来 标识 文档 的 基本 结构 ， 也 是 一 个 网 页 文档 应 该 使 用 的 基本 标签 。 | 
<!DOCTYPE>: 定义 文档 类 型 。 | 
<html>: 定义 HTML 文档 。 
<head>: 定义 关于 文档 的 信息 。 
<meta>: 定义 关于 HTML 文档 的 元 信息 。 
<title>: 定义 文档 的 标题 。 
<body>: 定义 文档 的 主体 。 
<hl>.… <h6>: 定义 HTML 标题 。 
<p>: 定义 段落 。 
<br>: 定义 简单 的 折 行 。 
<hr>: 定义 水 平 线 。 
<!--.…-->: 定义 注释 。 
， 格 式 标 签 
式 标签 主要 用 来 标识 文本 区 块 ， 并 附带 一 定 的 显示 格式 。 
<acronym>: 定义 首 字 母 缩写 。 
<abbr>: 定义 缩写 。 
<address>: 定义 文档 作者 或 拥有 者 的 联系 信息 。 
<b>: 定义 粗 体 文本 。 
<bdi>: 定义 文本 的 文本 方向 ， 使 其 脱离 其 周围 文本 的 方向 设置 。 
<bdo>: 定义 文字 方向 。 
<big>: 定义 大 号 文本 。 
<blockquote>: 定义 块 引 用 。 
<cite>: 定义 引用 〈citation) 的 源 URL。 
<code>: 定义 计算 机 代码 文本 。 
<del>: 定义 被 删除 文本 。 
<dfn>: 定义 定义 项 目 。 
<em>: 定义 强调 文本 。 
<i>: 定义 斜体 文本 。 
<ins>: 定义 被 插入 文本 。 
<kbd>: 定义 键盘 文本 。 
<mark>: 定义 有 记号 的 文本 。 
<meter>: 定义 预定 义 范围 内 的 度量 。 





办 四 办 办 办 罗 因 办 因 因 办 


[3 





国共 办 罗 办 办 罗 办 办 办 办 办 办 办 办 四 滨 
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<pre>: 定义 预 格式 文本 。 

<progress>: 定义 任何 类 型 的 任务 的 进度 。 

<q>: 定义 短 的 引用 。 

<Ip>: 定义 若 浏览 器 不 支持 mby 元 素 显示 的 内 容 。 
<rt>: 定义 mby 注释 的 解释 。 

<ruby>: 定义 ruby 注释 。 

<Samp>: 定义 计算 机 代码 样本 。 

<small>: 定义 小 号 文本 。 

<strong>: 定义 语气 更 为 强烈 的 强调 文本 。 

<sup>: 定义 上 标 文本 。 

<sub>: 定义 下 标 文本 。 

<time>: 定义 日 期 /时 间 。 

<tt>: 定义 打字 机 文本 。 

<var>: 定义 文本 的 变量 部 分 。 

<wbr>: 定义 视频 。 

【示例 1】 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 test.html。 在 代码 视图 下 输入 下 面 代码 ， 分 别 


因 办 区 办 办 办 办 办 办 办 国外 多 多 国 


| 使 用 <hl> 和 <p> 标 签 标识 网 页 标题 和 段落 文本 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 代 码 </title> 

</head> 


<body> 

<hl> 文 本 格式 标签 </h1> 
<p>&ltp&gt 标 签 标识 段落 文本 </p> 
</body> 

</html> 


【示例 2】 使 用 Dreamweaver 新 建文 档 ， 保 存 为 testl.html。 输 入 下 面 代码 ， 分 别 使 用 各 种 字符 格 
式 标签 显示 一 个 数学 方程 式 的 解法 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="texthtml: charset=utf-8" /> 
<title> 示 例 代码 </title> 

</head> 


<body> 

<p> 例 如 ， 针 对 下 面 这 个 一 元 二 次 方程 : </p> 

<p><i>xX</i><sup>2</sup>-<b>5</b><i>xX</>+<b>4</b>=0</p> 

<p> 我 们 使 用 <big><b> 分 解 因 式 法 </b></big> 来 演示 和解 题 思路 如 下 : </p> 

<p><small> 由 : </small>(<i>x</>-1)(<>x</i>-4)=0</p> 

<p><small> 得 : </small><br /><i>x</i><sub>1</sub>=1<br 户 
<Px</i><sub>2</sub>=4</p> 

<Jbody> 

</html> 
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本 | 
| 
按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.4 所 示 。 | 
3， 列表 标签 | 
在 HTML 文档 中 ， 列 表 结 构 可 以 分 为 两 种 类 型 : 有 序列 表 和 无 序列 表 。 无 序列 表 使 用 项 目 符号 | 
来 标识 列表 ， 而 有 序列 表 则 使 用 编号 来 标识 列表 的 项 目 顺 序 。 具 体 使 用 标签 说 明 如 下 。 | 
<ul>: 定义 无 序列 表 。 
<ol>: 定义 有 序列 表 。 
<li>: 定义 列表 的 项 目 。 
<dl>: 定义 定义 列表 。 | 
<dt>: 定义 定义 列表 中 的 项 目 。 | 
<dd>: 定义 定义 列表 中 项 目的 描述 。 | 
<menu>: 定义 命令 的 菜单 /列表 。 
<menuitem>: 定义 用 户 可 以 从 弹出 菜单 调用 的 命令 /菜单 项 
<command>: 定义 命令 按钮 。 
【示例 3】 使 用 Dreamweaver 新 建文 档 ， 保 存 为 test2.html。 输 入 下 面 代 码 ， 使 用 无 序列 表 分 别 显 
示 了 一 元 二 次 方程 求解 有 4 种 方法 。 





人 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 代码 <ltitle> 
</head> 


<body> 

<hl> 解 一 元 二 次 方程 <hl> 

<p> 一 元 二 次 方程 求解 有 4 种 方法 : </p> 
<u> 


<1i> 直 接 开平 方法 </li> 
< 这 配方 法 <i> 
<li> 公 式 法 </i> 

< 记分 解 因 式 法 </li> 


按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.5 所 示 。 


eer nelsms cE < 二 EEEEEIESOEEG EEC 
负 W0， 针 对 下 看 这 个 一 元 二 次 方程， 解 a 二 二 次 方程 
Seh4-0 

一 元 二 次 方程 求解 有 4 种 方法 


我 们 使 用 分 解 因 式 法 来 演示 解 题 思路 如 下 : 


出 : Ce-DGe-4)0 
四: 

nl 

m4 





1.4 使 用 格式 标签 定义 数学 解 方程 文本 图 1.5 使 用 无 序列 表 分 别 显示 一 元 二 次 方程 求解 方法 
【示例 4】 新 建文 档 ， 保 存 为 test3 html。 输 入 下 面 代码 ， 使 用 定义 列表 显示 两 个 成 语 的 解释 。 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 代码 <ltitle> 


全- 
Jote <hl> 成 语词 条 列表 </hl> 
<dl> 


| <dt> 知 无 不 言 ， 言 无 不 尽 </dt> 

<dd> 知 道 的 就 说 ， 要 说 就 毫 无 保留 。</dd> 

<dt> 智 者 干 虑 ， 必 有 一 失 </dt> 

<dd> 不 管 多 聪明 的 人 ， 在 很 多 次 的 考虑 中 ， 也 一 定 会 出 现 个 别 错误 。</dd> 


eS Er Er EEC 
成 语词 条 列表 


知 无 不 高 


链接 标签 可 以 实现 把 多 个 网 页 联系 在 一 起 。 
<a>: 定义 锚 。 
<link>: 定义 文档 与 外 部 资源 的 关系 。 


</d> 
</body> 
| </html> 
| 按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.6 所 示 。 
| 4 链接 标签 
| 


| i 
| <nav>; 定义 导航 链接 。 了， 在 入 多 光 的 才 谍 中 ， 也 一定 全 现 人 到 全 汪 。 
上 

| 【示例 3】 新建 文档 ， 保 存 为 test4.html。 输 


入 下 面 代码 ,使 用 <a> 标 签 定义 一 个 超 链接 , 单 击 y 本 本 到 
该 超 链接 可 以 跳 转 到 百度 首页 。 图 1.6 使 用 定义 列表 定义 成 语 解释 





<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 示 例 代码 </title> 

</head> 


<body> 
<a hre 人 "http://www baidu.com/"> 去 百度 搜索 </a> 
</body> 
</html> 


| 【示例 6】 新 建文 档 ， 保 存 为 test5.html。 输 入 下 面 代码 ， 使 用 <a> 标 签 可 以 定义 锚 点 。 锚 点 是 一 
| 类 特殊 的 超 链接 ， 它 可 以 定位 到 网 页 中 某 个 具体 的 位 置 。 例如， 在 下 面 示例 中 单 击 超 链接 文本 ， 就 可 
| 以 跳 转 到 网 页 的 底部 。 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

<title> 示 例 代码 </title> 

</head> 





<body> 

<a href="#btm"> 跳 转 到 底部 </a> 

! <div id="box" style="height:2000px: border:solid 1px red:"> 撑 开 浏览 器 滚动 条 </div> 
| <span id-"btm"> 底 部 锚 点 位 置 </span> 
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</body> 
</html> 


5. 图 像 多 媒体 标签 


图 像 多 媒体 标签 主要 用 于 引入 外 部 多 媒体 文件 ， 并 进行 显示 。 主 要 包括 下 面 几 个 标签 。 | 侠 
<img>: 定义 图 像 。 ea 


<map>: 定义 图 像 映射 。 


) 六 





<area>: 定义 图 像 地 图 内 部 的 区 域 。 

<canvas>: 定义 图 形 。 

<figcaption>: 定义 figure 元 素 的 标题 。 | 
<figure>: 定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 。 | 





<audio>: 定义 声音 内 容 。 

<source>: 定义 媒介 源 。 

<track>: 定义 用 在 媒体 播放 器 中 的 文本 轨道 。 | 
<video>: 定义 视频 。 | 
6， 表格 标签 | 
表格 标签 用 来 组 织 和 管理 数据 ， 主 要 包括 下 面 几 个 标签 。 

回 “<table>: 定义 表格 。 

<caption>: 定义 表格 标题 。 

<th>: 定义 表格 中 的 表 头 单元 格 。 

<tr>: 定义 表格 中 的 行 。 

<td>: 定义 表格 中 的 单元 。 

<thead>: 定义 表格 中 的 表 头 内 容 。 

<tbody>: 定义 表格 中 的 主体 内 容 。 

<tfoot>: 定义 表格 中 的 表 注 内 容 〈 脚 注 ) 。 

<col>: 定义 表格 中 一 个 或 多 个 列 的 属性 值 。 

<colgroup>: 定义 表格 中 供 格式 化 的 列 组 。 

【示例 7】 新 建文 档 ， 保 存 为 test6.html。 输 入 下 面 代码 ， 使 用 表格 结构 显示 5 行 3 列 的 数据 集 。 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charsetutf8" /> 

<title> 示 例 代码 </title> 

</head> 

<body> 

<table summary="ASCII 是 英文 American Standard Code for Information Interchange 的 缩写 。ASCII 编码 是 目 


前 计算 机 最 通用 的 编码 标准 。 因 为 计算 机 只 能 接收 数字 信息 ，ASCII 编码 将 字符 转换 为 数字 来 表示 ， 以 便 计 算 机 
能 够 接收 和 处 理 。"> 


加 加 回回 加 罗网 图 罗网 


国共 区 办 办 多 旬 欠 多 


<caption>ASCII 字符 集 (节选 ) </caption> 
<t> 
<th> 十 进 制 </ 也 > 
<th> 十 六 进 制 </ 耻 > 
<th> 字 符 </th> 
</tr> 
<t> 
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<td>9</td> 
<td>9</td> 
<td>TAB( 制 表 符 )</td> 
<t> 
<t> 
<td>10</td> 


<td>A</td> 
<td> 换 行 </td> 


$$ 


7.， 表单 标签 
表单 标签 主要 用 来 制作 交互 式 表单 ， 主 要 包括 人 
下 面 几 个 标签 。 2 和 
<form>: 定义 供用 户 输入 的 HIML 表单 。 四 
<input>: 定义 输入 控件 。 
<textarea>: 定义 多 行 的 文本 输入 控件 。 
<button>: 定义 按钮 。 图 1.7 显示 表格 数据 
<select>: 定义 选择 列表 下拉 列表 〉。 
<optgroup>: 定义 选择 列表 中 相关 选项 的 组 合 。 
<option>: 定义 选择 列表 中 的 选项 。 
<label>: 定义 input 元 素 的 标注 。 
<fieldset>: 定义 围绕 表单 中 元 素 的 边框 。 
<legend>: 定义 fieldset 元 素 的 标题 。 
<datalist>: 定义 下 拉 列 表 。 
<keygen>: 定义 生成 密 钥 。 
<output>: 定义 输出 的 一 些 类 型 。 
【示例 8】 新 建文 档 ， 保 存 为 test7.html。 输 入 下 面 代码 ， 分 别 定义 单行 文本 框 、 多 行文 本 框 、 复 
选 框 、 单 选 按 钮 、 下 拉 菜 单 和 提交 按钮 的 表单 。 
<htm> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 


加 





办 办 办 愉 区 办 多 多多 罗 办 凶 
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<title> 示 例 代码 </title> 
</head> 
<body> 
<form id="form1" name="form!1" method="post" action=""> 
<p> 单 行文 本 域 : <input type="text" name="textfield" id="textfield" /></p> 
<p> 密 码 域 ， <input type="password" name="passwordfield" id="passwordfield" /></p> 
<p> 多 行文 本 域 : <textarea name="textareafield" id="textareafield"> 
<p> 复 选 框 ， 复 选 框 1<input name="checkbox1" type="checkbox" value="" /> 
复 选 框 2<input name="checkbox2" type="checkbox" value="" /> 


<p> 
<p> 单 选 按钮 : 
<input name="radio1" type="radio" value="" /> 按钮 1 
<input name="radio2" type="radio" value="" /> 按钮 2</p> 
<p> 下 拉 菜 单 : 
<select name="selectlist"> 
<option value="1"> 选 项 1</option> 
<option value="2"> 选 项 2</option> 
<option value="3"> 选 项 3</option> 
</select> 
</p> 
<p><input type="submit" name="button" id="button" value=" 提 交 " /></p> 
</form> 
</body> 
</html> 


按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.8 所 示 。 


复 选 框 ， 复 先 框 ! 口 复 选 框 2 口 


单 选 按钮 。 口 按钮 1 口 按钮 ? 
下 拉 菜 单 ， [和 页 1 Y] 
EH 

















图 1.8 设计 表单 界面 
8. 文档 结构 块 标签 
文档 结构 块 标签 主要 用 于 定义 符合 标准 化 设计 需求 的 文档 结构 块 ， 主 要 包括 下 面 几 个 标签 。 
<div>: 定义 文档 中 的 分 区 或 节 〈division/section) ， 节 表示 内 容 结构 块 。 
<span>: 用 来 组 合 文档 中 的 行内 元 素 。 
<header>: 定义 section 或 page 的 页 眉 。 
<footer>: 定义 section 或 page 的 页 脚 。 
<section>: 定义 section。 
<article>: 定义 文章 。 


加 加 加 四 因 加 
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一 一 于 绝 浴 入 站 到 持 适 


<aside>: 定义 页 面 内 容 之 外 的 内 容 。 
<details>: 定义 元 素 的 细节 。 
<dialog>: 定义 对 话 框 或 窗口 。 
<summary>: 为 <details> 元 素 定 义 可 见 的 标题 。 
编程 标签 
程 标签 用 于 设计 复杂 的 参数 配置 、 程 序 设计 或 者 样式 代码 ， 主 要 包括 下 面 几 个 标签 。 
<style>: 定义 文档 的 样式 信息 。 
<script>: 定义 客户 端 脚本 。 
<noscript>: 定义 针对 不 支持 客户 端 脚本 的 用 户 的 替代 内 容 。 
<embed>: 为 外 部 应 用 程序 ( 非 HIML) 定义 容器 。 
<object>: 定义 嵌入 的 对 象 。 
<param>: 定义 对 象 的 参数 。 


1.4.5 HTML 属性 


每 个 HTML 标签 还 包含 很 多 属性 ， 但 是 大 部 分 属性 都 是 公共 的 。 公 共 属 性 大 致 可 分 为 基本 属性 、 
| 语言 属性 、 键 盘 属性 、 内 容 属性 和 延伸 属性 等 类 型 。 
1. 基本 属性 
基本 属性 主要 包括 下 面 3 个 ， 这 3 个 基本 属性 为 大 部 分 元 素 所 拥有 。 
回 “class: 定义 类 规则 或 样式 规则 。 
id: 定义 元 素 的 唯一 标识 。 
style: 定义 元 素 的 样式 声明 。 
2. 语言 属性 
语言 属性 主要 用 来 定义 元 素 的 语言 类 型 ， 包 括 两 个 属性 。 
lang: 定义 元 素 的 语言 代码 或 编码 。 
| 回 dir: 定义 文本 的 方向 ， 包 括 lt 和 zt 取 值 ， 分 别 表示 从 左 向 右 和 从 右 向 左 。 
| 【示例 1】 分 别 为 网 页 代码 定义 了 中 文 简体 的 语言 ， 字 符 对 齐 方式 为 从 左 到 右 的 方式 。 第 二 行 代 
| 码 为 body 定义 了 美式 英语 。 
<html xmlns="http://www.w1.org/1999/xhtml" dir="ltr" xml:lang="zh-CN"> 
<body id="myid" lang="en-us"> 
3. 键盘 属性 
键盘 属性 定义 元 素 的 键盘 访问 方法 ， 包 括 两 个 属性 。 
回 accesskey: 定义 访问 某 元 素 的 键盘 快捷 键 。 
| tabindex: 定义 元 素 的 Tab 键 索引 编号 。 
| accesskey 属性 可 以 使 用 快捷 键 (Alt+ 字 母 ) 访问 指定 URL， 但 是 浏览 器 不 能 很 好 地 支持 ， 在 正 
| 中 仅 激 活 超 链接 ， 需 要 配合 Enter 键 确定 ， 而 在 Firefox 中 没有 反应 。 
【示例 2】 在 导航 菜单 中 经 常设 置 快捷 键 。 
| <a href-"http://wwwmysite.cn/" accesskey="a"> 按 住 Alt 键 ， 按 A 键 可 以 链接 到 mysite 首页 </a> 


| tabindex 属性 用 来 定义 元 素 的 Tab 键 访 问 顺 序 ， 可 以 使 用 Tab 键 遍历 页 面 中 的 所 有 链接 和 表单 元 


回回 回回 


回回 回回 回回 司 ? 
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素 。 遍 历时 会 按照 tabindex 的 大 小 决定 顺序 ， 当 遍历 到 某 个 链接 时 ， 按 Enter 键 即 可 打开 链接 页 面 。 
例如 : 

<a href="#" tabindex="1">Tab 1</a> 

<a href="#" tabindex="3">Tab 3</a> 

<a href="#" tabindex="2">Tab 2</a> 

4. 内 容 属性 

内 容 属性 定义 元 素 包含 内 容 的 附加 信息 ,这 些 信息 对 于 元 素来 说 具有 重要 的 补充 作用 ,避免 元 素 | 
本 身 包 含 信息 不 全 而 被 误解 。 内 容 语 义 包括 5 个 属性 。 | 

回 alt: 定义 元 素 的 蔡 换 文本 。 | 

title: 定义 元 素 的 提示 文本 。 | 

longdesc: 定义 元 素 包含 内 容 的 大 段 描述 信息 。 

cite: 定义 元 素 包含 内 容 的 引用 信息 。 

datetime: 定义 元 素 包含 内 容 的 日 期 和 时 间 。 

alt 和 title 是 两 个 常用 的 属性 ， 分 别 定义 元 素 的 蔡 换 文本 和 提示 文本 。 

<a href="URL" title=" 提 示 文 本 "> 超 链接 </a> 

<img src="URL" alt=" 替 换文 本 " title=" 提 示 文本 " /> 

蔡 换文 本 〈Altemate Text) 并 不 是 用 来 做 提示 的 〈Tool Tip)， 或 者 更 加 确切 地 说 ， 它 并 不 是 为 图 
像 提供 额外 说 明 信 息 的 。 相 反 ，title 属性 才 负责 为 元 素 提供 额外 说 明 信 息 。 

当 图 像 无 法 显示 时 ,必须 准备 替换 的 文本 来 蔡 换 无 法 显示 的 图 像 , 这 对 于 图 像 和 图 像 热点 是 必需 
的 ， 因 此 alt 属性 只 能 用 在 img、area 和 input 元 素 中 (包括 applet 元 素 )。 

【示例 3】 下 面 示例 使 用 <input> 标 签 定义 一 个 图 像 按 钮 ， 但 没有 设置 sre 属性 值 ， 则 会 显示 “ 蔡 
换文 本 ”的 文字 按钮 效果 。 

<input type="image" src="URL" alt=" 蔡 换文 本 " />. 

title 属性 为 元 素 提供 提示 性 的 参考 信息 ， 这 些 信 息 是 一 些 额外 的 说 明 ， 具 有 非 本 质 性 ， 因 此 该 属 
性 也 不 是 一 个 必须 设置 的 属性 。 当 鼠标 指针 移 到 元 素 上 面 时 ， 即 可 看 到 这 些 提示 信息 。 

如 果 要 为 元 素 定义 更 长 的 描述 信息 ， 则 应 该 使 用 longdesc 属性 。longdese 属性 可 以 用 来 提供 链接 
到 一 个 包含 图 片 描述 信息 的 单独 页 面 或 者 长 段 描述 信息 。 其 用 法 如 下 。 

<img src="URL" alt=" 人 物 照 " title=" 张 三 于 2015-5-1 上 海 留念 " longdesc=" 这 是 张 三 于 2015 年 5 月 1 日 在 上 
海 留影 ， 当 时 天 很 热 ， 场 面 热闹 非凡 " /> 

或 者 

<img src="UTL' alt=" 蔡 换文 本 " longdesc=" 详 细 描述 图 像 的 网 页 .html" /> 

cite 一 般 用 来 定义 引用 信息 的 URL。 例 如 ， 下 面 一 段 文字 引 自 http://www.mysite.cn/csslayout/ 
index.htm， 所 以 可 以 这 样 来 设置 。 

<blockquote cite="http://www.mysite.cn/csslayout/index.htm"> 

<p>CSS 的 精 散 是 布局 ， 而 不 是 样式 ， 布 局 需要 续 密 的 结构 分 析 和 设计 </p> 

</blockquote> 

datetime 属性 定义 包含 文本 的 时 间 ， 这 个 时 间 表 示 信 息 的 发 布 时 间 ， 也 可 能 是 更 新 时 间 ， 例 如 : 

<ins datetime="2015-5-1 8:0:0">2015 年 上 海 </ins> 
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% 
1.5 CSS 基础 


使 用 HTML 丰富 的 标签 可 以 轻松 构建 不 同 的 网 页 结构 ， 但 是 在 控制 网 页 显示 效果 方面 ， 它 的 能 
力 就 比较 弱 ， 如 果 要 设计 美观 大 方 、 赏 心 悦 目 的 网 页 效果 ， 就 要 用 到 CSS。CSS 弥补 了 HTML 不 足 ， 
为 用 户 提供 了 强大 的 页 面 样式 美化 和 布局 功能 。 


1.5.1 认识 CSS 


CSS 是 在 HIML 语言 基础 上 发 展 而 来 的 ， 是 为 了 克服 HTML 在 网 页 布局 方面 存在 的 不 足 。 在 
HTML 语言 中 , 各 种 显示 效果 的 实现 都 是 通过 标签 来 实现 , 然后 通过 标签 的 各 种 属性 来 定义 标签 的 显 


| 示 样 式 。 这 造成 了 网 页 代码 的 脐 肿 、 和 杂乱， 网 页 后 期 维护 和 控制 变 得 非常 困难 。 


【示例 】 要 在 一 段 文字 中 把 一 部 分 文字 变 成 蓝 色 ，HIML 标识 代码 如 下 : 
<p><font color=blue> 显 示 信 息 </font></p> 

而 使 用 CSS 之 后 ， 则 上 例 代码 可 以 写成 : 
<p style="color: blue "> 显示 信息 </p> 


这 样 简单 比较 就 可 以 看 出 CSS 简化 了 HTML 中 各 种 繁琐 的 标签 ， 使 得 各 个 标签 的 属性 更 具有 一 
般 性 和 通用 性 ， 并 且 样式 表 扩展 了 原先 的 标签 功能 ， 能 够 实现 更 多 的 效果 ， 样 式 表 甚至 超越 了 网 页 本 
身 显 示 功 能 ， 而 把 样式 扩展 到 多 种 媒体 上 ， 显 示 了 难以 抗拒 的 魅力 。 这 仅仅 是 一 个 小 小 的 例子 ， 如 果 
把 整个 网 页 ， 甚 至 全 部 网 站 都 用 一 张 或 几 张 样式 表 来 专门 设计 网 页 的 属性 和 显示 样式 , 读者 就 会 发 现 
使 用 CSS 的 优越 性 ， 特 别 是 对 后 期 更 改 维护 提供 了 方便 。 

样式 表 的 另 一 个 巨大 贡献 就 是 把 对 象 引 入 了 HTML,， 使 得 可 以 使 用 JavaScript 脚本 控制 网 页 标签 
的 显示 效果 ， 这 在 早期 的 HTML 中 实现 起 来 会 非常 困难 。 

CSS 比较 简单 、 灵 活 、 易 学 。 除 了 可 以 控制 文本 属性 外 ， 如 字体 、 字 号 、 颜 色 等 ， 还 可 以 设计 复 
杂 的 网 页 样式 ， 如 对 象 位 置 、 图 片 效果 、 网 页 布局 等 。 

通过 CSS 样式 表 ， 可 以 统一 控制 HTML 中 各 标签 的 显示 属性 。 对 页 面 布局 、 字 体 、 颜 色 、 背 景 
和 其 他 图 文 效果 实现 更 加 精确 的 控制 。 用 户 只 修改 一 个 CSS 样式 表 文 件 就 可 以 实现 改变 一 批 网 页 的 外 
观 和 格式 ， 保 证 在 所 有 浏览 器 和 平台 之 间 的 兼容 性 ， 拥 有 更 少 的 编码 、 更 少 的 页 数 和 更 快 的 下 载 速度 。 


1.5.2 CSS 基本 语法 


样式 是 CSS 最 小 语法 单元 ， 每 个 样式 包含 两 部 分 内 容 : 选择 器 和 声明 (或 称 为 规则 )， 如 图 1.9 
所 示 。 
选择 器 ”样式 分 隔 符 声明 声明 样式 分 隔 符 


font-size : 12px; color #333; 


网 页 标签 名 属性 ”属性 值 属性 属性 值 
图 1.9 CSS 样式 的 基本 格式 
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选择 器 (Selector) : 选择 器 告诉 浏览 器 该 样式 将 作用 于 页 面 中 哪些 对 象 ， 这 些 对 象 可 以 是 
某 个 标签 、 所 有 网 页 对 象 、 指 定 Class 或 ID 值 等 。 浏 览 器 在 解析 这 个 样式 时 ， 根 据 选择 器 
来 泻 染 对 象 的 显示 效果 。 | 
声明 (Declaration) : 声明 可 以 增加 一 个 或 者 无 数 个 ， 这 些 声明 命令 浏览 器 如 何 去 泻 染 选择 | 
器 指定 的 对 象 。 声 明 必 须 包括 两 部 分 : 属性 和 属性 值 ， 并 用 分 号 来 标识 一 个 声明 的 结束 ， 
在 一 个 样式 中 最 后 一 个 声明 可 以 省 略 分 号 。 所 有 声明 被 放置 在 一 对 大 括号 内 ， 然 后 整体 紧 
邻 选 择 器 的 后 面 。 | 
加 ”属性 (Property) : 属性 是 CSS 提供 的 设置 好 的 样式 选项 。 属 性 名 由 一 个 单词 或 多 个 单词 组 | 
成 ， 多 个 单词 之 间 通 过 连 字符 相连 。 这 样 能 够 很 直观 地 表示 属性 所 要 设置 样式 的 效果 。 
属性 值 (Value) : 属性 值 是 用 来 定义 显示 样式 的 参数 ， 包 括 数 值 和 单位 ， 或 者 关键 字 。 
【示例 】 定 义 网 页 字体 大 小 为 12 像素 ， 字 体 颜色 为 深 灰 色 ， 则 可 以 设置 如 下 样式 : 
body {font-size: 12px: color: #CCCCCC:} 
多 个 样式 可 以 并 列 在 一 起 ， 不 需要 考虑 如 何 进行 分 隔 。 例 如 ， 定 义 段 落 文本 的 背景 色 为 紫色 ， 则 
可 以 在 上 面 样式 基础 上 定义 如 下 样式 : 
body {font-size: 12px: color: #CCCCCC:}p{background-color: #FFOOFF:} 
由 于 CSS 语言 忽略 空格 (除了 选择 器 内 部 的 空格 外 )， 因 此 可 以 利用 空格 来 格式 化 CSS 源 代码 ， 
则 上 面 代码 可 以 进行 如 下 美化 : 


body { 
font-size: 12px; 
color: #CCCCCC: 





P { background-color: #FFOOFF; } 
这 样 在 阅读 CSS 源 代码 时 就 一 目 了 然 了 ， 既 方便 阅读 ， 也 更 容易 维护 。 
CSS 使 用 “/* 注 释 语 句 */” 对 样式 进行 注释 。 例 如 ， 对 于 上 面 样式 可 以 增加 注释 : 
body {/* 页 面 基 本 属性 */ 
font-size: 12px: 
color: #CCCCCC: 


} 
/段落 文本 基础 属性 所 
Pp { background-color: #FFOOFF: } 


1.5.3 CSS 基本 用 法 


CSS 样式 代码 必须 保存 在 .css 类 型 的 文本 文件 中 ,或 者 放 在 网 页 内 <style> 标 签 中 ,或 者 插 在 网 页 标签 
的 style 属性 值 中 ， 否 则 是 无 效 的， 浏览 器 会 视 其 如 普通 的 字符 串 ， 而 不 对 其 进行 解析 。 详 细 说 明 如 下 : | 

直接 放 在 标签 的 style 属性 中 。 | 

【示例 1 在 下 面 代码 中 ， 直 接 使 用 style 属性 为 标签 定义 样式 。 | 

<span style="colorred:"> 红 色 字 体 </span> 

<div style="border:solid 1px blue: width:200px: height:200px:"></div> 

这 样 当 浏 览 器 解析 这 些 标签 时 ， 检 测 到 该 标签 包含 有 style 属性 ， 于 是 就 调用 CSS 引擎 来 解析 这 
些 样式 码 ， 并 把 效果 呈现 出 来 。 
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这 种 通过 style 属性 直接 把 样式 码 放 在 标签 内 的 做 法 被 称 之 为 行内 样式 ， 因 为 它 与 传统 网 页 布局 
中 在 标签 增加 属性 的 设计 方法 没有 什么 两 样 ， 这 种 方法 实际 上 还 没有 真正 把 HTML 结构 和 CSS 表现 
分 开 进行 设计 ， 因 此 不 建议 使 用 。 除 非 为 页 面 中 个 别 元 素 设置 某 个 特定 样式 效果 而 单独 进行 定义 。 
把 样式 代码 放 在 <style> 标 签 内 。 
【示例 2】 在 下 面 代码 中 ， 把 样式 代码 放置 在 <style> 标 签 内 。 
<style type="text/css"> 
body {/* 页 面 基本 属性 */ 
font-size: 12pX: 
color: #CCCCCC: 


让 攻 文本 基础 属性 1/ 

Pp { background-color: #FFOOFF: } 

</style> 

在 设置 <style> 时 应 该 指定 type 属性 ， 告 诉 浏览 器 该 标签 包含 的 代码 是 CSS 源 代码 。 这 样 当 浏 览 
器 解析 <style> 标 签 所 包含 的 代码 时 ， 会 自动 调用 CSS 引擎 进行 解析 。 

这 种 CSS 应 用 方式 也 被 称 为 网 页 内 部 样式 。 如 果 仅 为 一 个 页 面 定义 CSS 样式 时 ， 使 用 这 种 方法 
比较 高 效 , 且 管 理 方便 。 但 是 在 一 个 网 站 中 , 或 多 个 页 面 之 间 引 用 时 , 使 用 这 种 方法 会 产生 代码 元 余 ， 


| 不 建议 使 用 ， 而 且 一 页 页 管理 样式 也 是 不 经 济 的 。 


内 部 样式 一 般 放 在 网 页 的 头 部 区 域 ， 目 的 是 让 CSS 源 代码 早 于 页 面 源 代码 下 载 并 被 解析 ， 这 样 
避免 当 网 页 信息 下 载 之 后 ， 由 于 没有 CSS 样式 泻 染 而 使 页 面 信息 无 法 正常 显示 。 

保存 在 .css 类 型 的 文件 中 。 

把 样式 代码 保存 在 单独 的 .css 类 型 文件 中 ， 然 后 使 用 <link> 标 签 或 者 @import 关键 字 导 入 。 这 样 
当 浏 览 器 遇 到 这 些 代 码 时 , 会 自动 根据 它们 提供 的 URL 把 外 部 样式 表 文件 导入 到 页 面 中 并 进行 解析 。 
关于 这 个 话题 将 在 1.5.4 节 详 细 分 析 。 

这 种 应 用 样式 的 方式 也 被 称 为 外 部 样式 。 一 般 网 站 都 采用 外 部 样式 来 设计 网 站 的 表现 层 问题 ， 以 
便 统筹 设计 CSS 样式 ， 并 能 够 快速 开发 和 高 效 管理 。 


1.5.4 ”CSS 样式 表 
一 个 或 多 个 CSS 样式 可 以 组 成 一 个 样式 表 。 样 式 表 包 括 内 部 样式 表 和 外 部 样式 表 ， 它 们 没有 本 


| 质 区 别 ， 都 是 由 一 个 或 者 多 个 样式 组 成 。 


1， 内 部 样式 表 

内 部 样式 表 包 含 在 <style> 标 签 内 ， 一 个 <style> 标 签 就 表示 一 个 内 部 样式 表 。 而 通过 标签 的 style 
属性 定义 的 样式 属性 就 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标 签 ， 就 表示 该 文档 包含 了 
多 个 内 部 样式 表 。 

2. 外 部 样式 表 

如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文 档 就 表 
示 一 个 外 部 样式 表 。 实 际 上 ， 外 部 样式 表 也 就 是 一 个 文本 文件 ， 扩 展 名 为 .css。 当 把 CSS 样式 代码 复 
制 到 一 个 文本 文件 中 后 ， 另 存 为 .ss 文件 ， 它 就 是 一 个 外 部 样式 表 。 如 图 1.10 所 示 就 是 禅 意 花园 的 外 
部 样式 表 (http://www.csszengarden.com/ )。 
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yeu 11 rest 





图 1.10 CSS 禅 意 花园 外 部 样式 表 文件 


可 以 在 外 部 样式 表 文件 项 部 定义 CSS 源 代码 的 字符 编码 。 
【示例 】 下 面 代码 定义 样式 表 文 件 的 字符 编码 为 中 文 简体 。 


@charset "gb2312"; 
如 果 不 设 置 CSS 文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 
来 解析 CSS 代码 。 


1.5.5 ”导入 外 部 样式 表 

外 部 样式 表 必 须 导 入 到 网 页 文档 中 , 才能 够 被 浏览 器 识别 和 和 解析。 外 部 样式 表 文 件 可 以 通过 两 种 
方法 导入 到 HTML 文档 中 。 

1. 使 用 <link> 标 签 导入 

使 用 <link> 标 签 导入 外 部 样式 表 文 件 : 

<link href="001.css" rel="stylesheet" type="text/css" /> 


其 中 ，href 属性 设置 外 部 样式 表 文件 的 地 址 ， 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。rel 属性 定 | 
义 该 标签 关联 的 是 样式 表 标签 ，type 属性 定义 文档 的 类 型 ， 即 为 CSS 文本 文件 。 

2. 使 用 @import 关键 字 导 入 

在 <style> 标 签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文 件 : 

<style type="text/css"> 

@import url("001.css"); 

</style> 

在 @import 关键 字 后 面 ， 利 用 url0 函 数 包含 具体 的 外 部 样式 表 文 件 的 地 址 。 


1.5.6 CSS 属性 
CSS 属性 众多 , 在 W3C CSS 2.0 版 本 中 共有 122 个 标准 属性 (http://www.w1l.org/TR/CSS2/propidx. 
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| html)， 在 W3C CSS 2.1 版 本 中 共有 115 个 标准 属性 (http://www.wl.org/TR/CSS21/propidx.html)， 其 

| 中 删除 了 CSS 2.0 版 本 中 的 7 个 属性 : font-size-adjust、font-stretch、marker-offset、marks、page、size 

| 和 textshadow。 在 W3C CSS 1.0 版 本 中 又 新 增加 了 20 多 个 属性 (http://www.w1.org/Style/CSS/current- 

食 乒 | work#CSS3)。 

“| CSS 属性 被 分 为 不 同 的 类 型 ， 如 字体 属性 、 文 本 属性 、 边 框 属 性 、 边 距 属 性 、 布 局 属性 、 定 位 属 

yote 性 、 打 印 属性 等 。 关 于 CSS 属性 的 详细 列表 和 用 法 可 以 参阅 CSS 参考 手册 。 

| CSS 属性 的 名 称 比较 有 规律 , 且 名 称 与 意思 紧密 相连 , 根据 意思 记忆 属性 名 称 是 一 个 不 错 的 方法 。 

【示例 】 任 何 元 素 都 可 以 包括 外 边 距 、 边 框 、 内 边 距 、 宽 和 高 等 。 用 英文 表示 就 是 margin (外边 

， 或 称 为 边界 )、border (边框 )、padding (内 边 距 ,或 称 为 补 白 )、height (高 ) 和 width 〈 宽 )， 还 


pa 雪景 )， 如 图 1.11 所 示 。 
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图 1.11 CSS 盒 模型 属性 


外 边 距 按 方位 又 可 以 包含 margin-top、margin-right、margin-bottom、margin-left 共 4 个 分 支 属 性 ， 
| 分 别 表示 顶部 外 边 距 、 右 侧 外 边 距 、 底 部 外 边 距 和 左 侧 外 边 距 。 

| 内 边 距 也 可 以 包含 padding-top、padding-right、padding-bottom、padding-left、padding 属性 。 

| 边框 可 以 分 为 边框 类 型 、 粗 细 和 颜色 ， 因 此 可 以 包含 border-width、border-color 和 border-style 属 
| 性 ， 这 些 属 性 又 可 以 按 4 个 方位 包含 很 多 属性 ， 例 如 ，border-width 属性 又 分 为 border-top-width、 

| border-right-width、border-bottom-width、border-left-width 和 border-width 属性 。 


1.5.7 CSS 属性 值 


1. 闫 色 值 

颜色 值 包括 颜色 名 、 百 分 比 、 数 值 和 十 六 进 制 数值 。 

回 “使 用 颜色 名 是 最 简单 的 方法 。 虽 然 目前 已 经 命名 的 颜色 约 有 184 种 ， 但 真正 被 各 种 浏览 
| 支持 ， 并 且 作 为 CSS 规范 推荐 的 颜色 名 称 只 有 16 种 ， 如 表 1.1 所 示 。 
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表 1.1 CSS 规范 推荐 的 颜色 名 称 



















maroon 
fuchsia 
gray 















不 建议 在 网 页 中 使 用 颜色 名 ， 特 别 是 大 规模 的 使 用 ， 避 免 有 些 颜色 名 不 被 浏览 器 解析 ， 或 者 不 同 
浏览 器 对 颜色 的 解释 差异 。 
使 用 百分比 。 这 是 一 种 最 常用 的 方法 ， 例 如 : 


color:rgb(100%,100%,100%); 


这 个 声明 将 红 、 蓝 、 绿 3 种 原色 都 设置 为 最 大 值 ， 结 果 组 合 显示 为 白色 。 相 反 ， 可 以 设置 rgb 
(0%,0%,0%) 为 黑色 。3 个 百 分 值 相等 将 显示 灰色 ， 同 理 哪个 百 分 值 大 就 偏向 哪个 原色 。 
使 用 数值 。 数 值 范围 从 0 到 255， 例 如 : 


color:reb(255,255,255):; 

上 面 这 个 声明 将 显示 白色 ， 相 反 ， 可 以 设置 为 rgb(0,0,0) 将 显示 黑色 。3 个 数值 相等 将 显示 灰色 ， 
同 理 哪个 数值 大 哪个 原色 的 比重 就 会 加 大 。 

十 六 进 制 颜色 。 这 是 最 常用 的 取 色 方法 ， 例 如 : 

color:#fPPPF 

其 中 要 在 十 六 进 制 前 面 加 一 个 # 颜 色 符号 。 上 面 这 个 声明 将 显示 白色 ， 相 反 ， 可 以 设置 #000000 
为 黑色 ， 用 RGB 来 描述 : 

color: #RRGGBB: 

从 0 到 255, 实际 上 十 进 制 的 255 正好 等 于 十 六 进 制 的 FF, 一 个 十 六 进 制 的 颜色 值 等 于 3 组 这 样 
的 十 六 进 制 的 值 ， 它 们 按 顺 序 连接 在 一 起 就 等 于 红 、 蓝 、 绿 3 种 原色 。 

2， 绝 对 单位 

绝对 单位 在 网 页 中 很 少 使 用 ,一 般 多 用 在 传统 平面 印刷 中 , 但 在 特殊 的 场合 使 用 绝对 单位 是 很 必 
要 的 。 绝 对 单位 包括 英寸 、 厘 米 、 毫 米 、 磅 和 pica。 


英寸 (in) : 是 使 用 最 广泛 的 长 度 单位 。 

厘米 (cm) : 生活 中 最 常用 的 长 度 单位 。 

回 ”毫米 (mm) : 在 研究 领域 使 用 广泛 。 

磅 (pt) : 在 印刷 领域 使 用 广泛 ， 也 称 点 。CSS 也 常用 pt 设置 字体 大 小 ，12 磅 的 字体 等 于 
六 分 之 一 英寸 大 小 。 

加 ”pica (pe) : 在 印刷 领域 使 用 ，1pica 等 于 12 磅 ， 所 以 也 称 12 点 活字 。 


3. 相对 单位 
相对 单位 与 绝对 单位 相 比 显示 大 小 不 是 固定 的 ， 它 所 设置 的 对 象 受 屏幕 分 辩 率 、 可 视 区 域 、 浏 览 
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| 器 设置 ， 以 及 相关 元 素 的 大 小 等 多 种 因素 影响 。 
| em 
em 单位 表示 元 素 的 字体 高 度 ， 它 能 够 根据 字体 的 font-size 属性 值 来 确定 单位 的 大 小 。 
会 内 | 【示例 1】 下 面 样式 代码 中 ， 一 个 em 等 于 font-size 的 属性 值 ， 如 果 设 置 font-size:12pt， 则 line- 
~ | height:2em 就 会 等 于 24pt。 
> ote > 
| font-size:12pX: 
line-height:2em:/* 行 高 为 24px*/ 
} 
【示例 2】 如 果 设 置 font-size 属性 的 单位 为 em， 则 em 的 值 将 根据 父 元 素 的 font-size 属性 值 来 确定 。 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 代码 <ltitle> 
<style type="text/css"> 
#main {font-size:12px:} 
Pp {font-size:2em; } /* 字 体 大 小 将 显示 为 24px*/ 
</style> 
</head> 
<body> 
<divid="main"> 
<p>em 相对 长 度 单位 使 用 </p> 
</div> 
</body> 
</html> 


同 理 ， 如 果 父 对 象 的 font-size 属性 的 单位 也 为 em， 则 将 依次 向 上 级 元 素 寻 找 参考 的 font-size 属 
性 值 ， 如 果 都 没有 定义 ， 则 会 根据 浏览 器 默认 字体 进行 换算 ， 默 认 字体 一 般 为 16px。 

eX 

ex 单位 根据 所 使 用 的 字体 中 小 写字 母 x 的 高 度 作为 参考 。 在 实际 使 用 中 ,浏览 器 将 通过 em 值 除 
以 2 得 到 ex 值 。 

px 

px 单位 是 根据 屏幕 像素 点 来 确定 的 。 这 样 不 同 的 显示 分 辩 率 就 会 使 相同 取 值 的 px 单位 所 显示 出 
来 的 效果 截然 不 同 。 

实际 设计 中 ， 建议 网 页 设计 师 多 使 用 相对 长 度 单位 em， 且 在 某 一 类 型 的 单位 上 使 用 统一 的 单位 。 
如 设置 字体 大 小 ， 根 据 个 人 使 用 习惯 ， 在 一 个 网 站 中 ， 可 以 统一 使 用 px 或 em。 

4. 百分比 

百分比 也 是 一 个 相对 单位 值 。 百 分 比值 总 是 通过 另 一 个 值 来 计算 , 一 般 参考 父 对 象 中 相同 属性 的 
值 。 例 如 ， 如 果 父 元 素 宽度 为 500px， 子 元 素 的 宽度 为 50%， 则 子 元 素 的 实际 宽度 为 250px。 

百分比 可 以 取 负 值 ， 但 在 使 用 中 受到 很 多 限制 。 


1.5.8 CSS 选择 器 
|」 Css 选择 器 是 一 种 匹配 模式 ， 用 于 匹配 需要 应 用 样式 的 元 素 ， 类 似 于 Photoshop 中 各 种 选取 工具 
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或 命令 ， 灵 活 使 用 CSS 选择 器 是 精确 定义 网 页 样式 的 基础 。 | 

CSS 选择 器 是 个 强大 的 工具 ， 它 允许 用 户 在 标签 中 匹配 特定 的 HTML 元 素 而 不 必 使 用 多 余 的 | 
class、ID 或 JavaScript。 如 果 用 户 希 望 设计 一 个 干净 的 、 轻 量 级 的 标签 以 及 结构 与 表现 更 好 的 分 离 ， | 
高 级 选择 器 是 非常 有 用 的 。 它 可 以 减少 在 标签 中 的 class 和 了 D 的 数量 并 让 设计 师 更 方便 地 维护 样式 表 。| 
CSS1、CSS2 和 CSS3 提供 了 非常 丰富 的 选择 器 ， 下 面 分 类 进行 列表 说 明 ， 以 方便 用 户 快 速 参考 。 | 
































1. 基本 选择 器 (如 表 1.2 所 示 ) 














表 1.2 基本 选择 器 

选 择 器 说 明 示 例 | 
* | 通用 元 素 选择 器 ， 匹 配 任何 元 素 * {margin:0; padding:0: } | 
E | 标签 选择 器 ， 匹 配 所 有 使 用 E 标签 的 元 素 | pffontsize2em:} | 
.info .info { background:#ff0: } 
E.info p.info { background:#ff0: } | 
#info #info { background:#ff0; } | 
Einfo pHinfo { background:#ff0; } | 





2， 组 合 选择 器 ( 如 表 1.3 所 示 ) 











表 1.3 ”组 合 选择 器 
选 择 器 说 了 明 示例 | 
让 多 元 素 选择 器 ， 同 时 匹配 所 有 E 元 素 或 F 元素, E 和 下 之 间 用 去 pon | 
号 分 隔 | 
这 后 代 元 素 选择 器 ， 匹 配 所 有 属于 王 元 素 后 代 的 元素, EE 和 F 之 | fnavli {display:inline:} | 
间 用 空格 分 隔 lia { font-weight:bold; } | 
E>F 子 元 素 选择 器 ， 匹 配 所 有 E 元 素 的 子 元 素 上 div > strong { color:#f00: } | 
E+F 毗邻 元 素 选择 器 ， 匹 配 所 有 紧 随 E 元 素 之 后 的 同 级 元 素 下 p+p { color:#f00; } 


3. CSS 2.1 属性 选择 器 (如 表 1.4 所 示 ) 


表 1.4 CSS 2.1 属性 选择 器 

选 择 器 说 阴 

匹配 所 有 具有 att 属性 的 E 元 素 ， 不 考虑 它 的 值 ( 注 意 : E 
在 此 处 可 以 省 略 ， 如 [cheacked]， 以 下 同 ) 

Ef[att=val] 匹配 所 有 att 属性 等 于 val 的 E 元 素 

匹配 所 有 att 属性 具有 多 个 空格 分 隔 的 值 ， 其 中 一 个 值 等 于 
val 的 下 元素 

匹配 所 有 att 属性 具有 多 个 连 字号 分 隔 〈hyphen-separated) 

E[att|=val] 的 值 ， 其 中 一 个 值 以 val 开头 的 E 元 素 ， 主 要 用 于 lang 属 
性 ， 如 en、en-us、en-gb 等 


汉 提示 :CSS 2.1 属性 选择 器 支持 使 用 多 个 选择 器 ， 设 计 同时 满足 这 多 个 选择 器 ， 如 blockquote | 
[class=quotej[cite] { color:#f00; } | 


示例 


El[att] Pltitle] { color:#f00: } 


div[class="error"] { color:#f00; } 


Elatt~=val] td[class~="name"] { color:#f00:; } 





pllangl=en] { color:#f00: } 
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4. CSS 2.1 伪 类 选择 器 ( 如 表 1.5 所 示 ) 


表 1.5 CSS 2.1 伪 类 选择 器 


























选 择 器 说 了 明 示 例 

E:first-child | 匹配 父 元 素 的 第 一 个 子 元 素 

二 匹配 所 有 未 被 点 击 的 链接 Pp:first-child { font-style:italic: } 

Evisited 。 | 匹配 所 有 已 被 点 击 的 链接 ee 

Exactive | 匹配 鼠标 已 经 按 下 、 还 没有 释放 的 上 元素 | “oo™*000; backeround-#e; } 

抱 配 鼠标 悬 停 其 上 的 三 元 素 input[type=text]:focus:hover { background:#fffF } 
a 一 一 qilang(sv) { 

5 和 的 quotes: "201D" "201D" "\2019" "2019": } 


5. CSS 2.1 伪 元 素 选择 器 (如 表 1.6 所 示 ) 


选 择 器 
E:first-line 
E:first-letter 
E:before 


E:after 








匹配 EE 元 素 的 第 一 行 

匹配 E 元 素 的 第 一 个 字母 

在 EE 元 素 之 前 插入 生成 的 内 容 
在 EE 元 素 之 后 插入 生成 的 内 容 


表 1.6 CSS 2.1 伪 元 素 选 择 器 
说 阴 示例 
p:first-line { font-weight:bold:; color:#600; } 
.preamble:first-letter { font-size:1.Sem: font-weight:bold; } 
.Cbb:before { content:""; display:block: height:17px; width:18px: 
background:url(top.png) no-repeat 0 0: margin:0 0 0 -18px: } 
a:link:after { content: " (" attr(href) ") ": } 





6. CSS 3 同 级 元 素 通用 选择 器 (如 表 1.7 所 示 ) 


表 1.7 CSS 3 同 级 元 素 通用 选择 器 
说 了 明 


匹配 任何 在 E 元素 之 后 的 同 级 下 元 素 





7. CSS 3 属性 选择 器 (如 表 1.8 所 示 ) 









E[att*="val"] 


表 1.8 CSS 3 属性 选择 器 
属性 att 的 值 以 val 开头 的 元 素 
属性 att 的 值 以 val 结尾 的 元 素 
属性 att 的 值 包含 val 字符 串 的 元 素 









div[id^="nav"] { background-:#ff0: } 





8. CSS 3 用 户 界面 伪 类 选择 器 (如 表 1.9 所 示 ) 





表 1.9 CSS 3 用 户 界 面 伪 类 选择 器 




















选 择 器 说 了 明 
Eenabled 。 ”| 匹配 表单 中 激活 的 元 素 
Edisabled 。 ”| 匹配 表单 中 禁用 的 元 素 
i 匹配 表单 中 被 选中 的 radio( 单 选 按钮 ) 或 | input[type="text"]:disabled { background:#ddd:} 





checkbox 〈 复 选 框 ) 元 素 











E::selection 








匹配 用 户 当前 选中 的 元 素 
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| 
9. CSS 3 结构 性 伪 类 选择 器 ( 如 表 1.10 所 示 ) | 
表 1.10 CSS 3 结构 性 伪 类 选择 器 | 




















选 择 器 说 了 明 示 例 | 
匹配 文档 的 根 元 素 ， 对 于 HTML 文档 ， 就 是 | 
E:root HTML 元 素 
E:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 ,第 一 个 编号 为 1 | 
匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 ， 第 一 个 编 | 
E:nth-last-child(n) 号 为 1 | 
与 :nth-child0 作 用 类 似 , 但 是 仅 匹配 使 用 同 种 标 | 
E:nth-of-type(n) 签 的 元 素 Pp:nth-child(3) { color:#f00:; } | 
与 :nth-last-child() 作用 类 似 ， 但 是 仅 匹配 使 用 P:nth-child(odd) { color:#f00; } 
E:nth-last-of-type(n) 同 种 标签 的 元 素 Pinth-child(even) { color:#f00; } 


XX 二 es 元 素 ,等同 于 :nth-last- Pp:nth-child(3n+0) { color:#f00: } 
E:last-child ee 人 Pp:nth-child(3n) { color:#f00; } 
tr:nth-child(2n+11 
匹配 父 元 素 下 使 用 同 种 标签 的 第 一 个 子 元 素 ， | nt DD 
E:first-of-type 等 同 于 :nth-of type(1) { background:#ff0; } 
- tr:nth-last-child(2) { background:#ff0: } 


匹配 父 元 素 下 使 用 同 种 标签 的 最 后 一 个 子 元 prlast-child { background:#fFO: } 


E:last-of-type 同 干 . 

素 ， 等 同 于 :nth-last-of-type(1) p:only-child { background:#ff0; } 
匹配 父 元 素 下 仅 有 的 一 个 子 元 素 ， 等 同 于 :first- | p.empty { background:#ff0; } | 

ne child:last-child 或 :nth-child(1):nth-last-child(1) | 
匹配 父 元 素 下 使 用 同 种 标签 的 唯一 一 个 子 元 | 

E:only-of-type 素 ， 等 同 于 :first-of-type:last-of-type 或 :nth-of- | 
type(1):nth-last-of-type(1) | 
匹配 一 个 不 包含 任何 子 元 素 的 元 素 ， 注 意 ， 文 

E:empty 





本 节点 也 被 看 作 子 元 素 
10，CSS 3 反选 伪 类 选择 器 (如 表 1.11 所 示 ) 
表 1.11 CSS 3 反选 伪 类 选择 器 





匹配 不 符合 当前 选择 器 的 任何 元 素 border: lpx solid #ccc: 


11. CSS 3 的 :target 伪 类 选择 器 (如 表 1.12 所 示 ) 


表 1.12 CSS 3 的 :target 伪 类 选择 器 
选 择 器 说 明 
E:target 匹配 文档 中 特定 “id” 单 击 后 的 效果 
【示例 1】 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 testhtml。 切 换 到 代码 视图 下 ， 在 <head> 标 签 
中 输入 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
在 内 部 样式 表 中 输入 下 面 CSS 代码 ， 定 义 一 个 标签 样式 ， 声 明 p 元 素 的 基本 样式 ， 该 样式 将 应 
用 于 网 页 中 所 有 段落 文本 ， 它 将 段落 内 的 字体 大 小 定义 为 12 像素 ， 字 体 颜色 为 红色 。 
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| <style type="text/css"> 
| pl 
| font-size:12px: 刻字 体 大 小 为 12 像素 */ 
pe | color:red: /* 字 体 颜 色 为 红色 所 
| | 
的 | 


2 新村 文档， 保存 为 testl hml. 切换 到 代码 视图 下 ， 在 <body> 标 签 中 输入 下 面 HTML 
| 代码 ， 答 入 3 行文 本 。 
divalasscefontlapws 问 看 能 有 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。<1div 


<p class="font18px"> 章 不 断 ， 理 还 乱 ， 是 离 悉 。 别 是 一 般 滋 味 在 心头 。</p> 
<p> 独 自 莫 凭栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> 


在 <head> 标 签 中 输入 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
在 内 部 样式 表 中 输入 下 面 CSS 代码 ， 定 义 3 个 样式 : 
<style type="text/css"> 


Pp {/* 段 落 样式 */ 
font-size:12px; 证 字 体 大 小 为 12 像素 */ 


} 
.font18px {/* 类 样式 */ 
font-size: 18px: 刻字 体 大 小 为 18 像素 */ 


} 
Pp.font18px {/* 指 定 段落 的 类 样式 */ 
font-size:24px: 收 字 体 大 小 为 24 像素 */ 


} 

</style> 

第 1 个 样式 声明 所 有 段落 文本 的 字体 大 小 为 12 像素 ， 在 第 2 个 样式 中 定义 一 个 font18px 类 ， 声 
明 字 体 大 小 为 18 像素 ， 在 第 3 个 样式 中 声明 fontl8px 类 在 段落 文本 中 显示 为 24 像素 。 

保存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.12 所 示 。 


Se EE 
间 君 能 有 几 多 悉 ， 怡 似 一 江 春 水 向 东 流 。 


前 不 断 ， 理 还 乱 ， 是 离愁 。 别 是 一 般 滋 味 在 心头 。 


折 自 页 并 攻 ， 天 有 R 工 山 ， 结 昂 几时 验 。 流 水 范 花 香 去 也 ， 天 上 人 问 。 





图 1.12 指定 类 选择 器 的 应 用 效果 


| 【示例 3】 新 建文 档 , 保存 为 test2.html。 输入 下 面 代码 ,定义 了 一 个 盒子 , 为 该 盒子 固定 宽 和 高 ， 
| 并 设置 背景 图 像 ， 以 及 边框 和 内 边 距 大 小 ， 显 示 效 果 如 图 1.13 所 示 。 
| mp 
| <head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
| <title> 示 例 代码 </title> 
| <style type="text/css"> 
| #box {/*ID 样式 */ 
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DD 


background: url(images/bg1.gif) center bottom: 。”/* 定 义 背景 图 像 并 居中 、 底 部 对 齐 */ 


height: 200px: 片 固定 盒子 的 高 度 */ 

width: 400px: /#* 固 定 盒子 的 宽度 沁 | 

border solid 2px red: 刻 边 框 样式 */ | 
padding: 20px: 证 增加 内 边 距 */ | 贸 /| 





<body> 
<div id="box"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 


</body> | 
</html> | 
| 


CS mp,/ocahosm P+ 8c| erm 





间 帮 能 有 几 多 称 ， 恰 似 一 江 春水 向 东 流 。 





图 1.13 ID 选择 器 的 应 用 效果 


【示例 41 新建 文档 ， 保 存 为 test3.html。 输入 下 面 代码 , 分 别 使 用 不 同 的 方式 定义 3 个 子 选择 器 ; 

div > span 表示 div 元 素 包 含 的 所 有 span 子 元 素 的 样式 ，div > .font24px 表示 div 元 素 包 含 的 所 有 命名 
font24px 类 的 子 元 素 ，#box>.font24px 表示 #box 元 素 包含 的 类 名 为 font24px 的 所 有 子 元 素 的 样式 ， 演 
示 效 果 如 图 1.14 所 示 。 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

<title> 示 例 代码 </title> 

<style type="text/css"> 

span {font-size:12px:} 

div > span {font-size:16px:} 

div > font24px {font-size:20px:} 

#box > .font24px {font-size:24px:} 

</style> 

</head> 

<body> 

<h2><span>HTML 文档 树 状 结构 </span></h2> 

<div id="box"><span class="font24px"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</span></div> 

<div><span class="font24px"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</span></div> 

<div><span> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</span></div> 


</body> 
</html> 
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问 君 能 有 几 多 悉 ， 怡 似 一 江 春 水 向 东 流 。 


|! 问 君 能 有 几 多 悉 ， 人 恰似 一 江 春 水 向 东 流 。 
鲜 问 帮 能 有 几 多 悉 ， 惨 似 一 江 春水 向 东 流 . 





| 1.14 子 选择 器 演示 效果 


| 【示例 5】 新建 文档 ， 保 存 为 test4html。 输 入 下 面 代 码 ， 利 用 相 邻 选择 器 递 进 控制 并 列 显示 的 几 
| 个 元 素 的 显示 样式 : h2 + div 表示 标题 元 素 h2 后 面相 邻 的 div 元 素 的 样式 ，div +p 表示 div 元 素 后 面 
| 相 邻 的 P 元素 的 样式 ,p+ div 表示 元 素 后 面相 邻 的 div 元 素 的 样式 ， 而 div + div 表示 div 元 素 后 面 
| 相 邻 的 div 元 素 的 样式 。 显 示 效 果 如 图 1.15 所 示 。 


<html> 

| <head> 

| <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
”<tie> 示 例 代码 </title> 
<style type="text/css"> 

h2 {font-size:12px:} 

h2 + div {font-size:16px:} 
div +p {font-size:20px;} 
p+ div {font-size:24px;} 
div + div { font-size:28px:} 
</style> 

</head> 


<body> 

<h2>HTML 文档 树 状 结构 </h2> 

<div> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。</div> 

<p> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。</p> 

<div class="class1"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 
| <div> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 
| </body> 

| </html> 


© TT EE 
HTML 文 向 树 估 结构 
问 如 能 有 几 多 愁 ， 恰 似 一 江 春 水 向 末 流 。 


问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。 


问 君 能 有 几 多 愁 ， 恰 似 一 江 春水 向 东 流 。 
问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。 





1.15 ” 相 邻 选择 器 演示 效果 


| 【示例 6】 新 建文 档 ， 保 存 为 test5.html。 输 入 下 面 代码 ， 定 义 <div id="header"> 包 含 框 内 的 段落 
| 文本 字体 大 小 为 14 像素 ， 然 后 定义 <div id="main"> 包 含 框 内 的 段落 文本 字体 大 小 为 12 像素 。 
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<htm> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 示 例 代码 <jtitle> 

<style type="text/css"> 

#header p { font-size:14px:} 

#main p {font-size:12px:} 

</style> 

</head> 





<body> 
<divid="wrap"> | 
<div id="header"> | 
<p> 头 部 区 域 第 1 段 文本 </p> | 
<p> 头 部 区 域 第 2 段 文本 </p> 
<p> 头 部 区 域 第 3 段 文本 </p> 
</div> | 
<div id="main"> | 
<p> 主 体 区 域 第 1 段 文本 </p> | 
<p> 主 体 区 域 第 2 段 文本 </p> 
<p> 主 体 区 域 第 3 段 文本 </p> 
</div> 
</div 
</body> 
</html> 


侈 提示 : 也 可 以 使 用 子 选择 器 来 定义 它们 的 样式 : 
<style type="text/css"> 
#header > p { font-size:14px:} 
#main > p {font-size:12px:} 
</style> 


【示例 7】 新 建文 档 ， 保 存 为 test6.html。 输 入 下 面 代码 ， 定 义 一 个 div[class] 属 性 选择 器 ， 该 选择 
器 能 够 为 div 元 素 中 设置 了 class 属性 的 对 象 定义 样式 ， 而 不 管 class 属性 的 属性 值 是 什么 ， 显 示 效 果 
如 图 1.16 所 示 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 示 例 代码 </title> 

<style type="text/css"> 

body {font-size:12px:} 

div[class] {font-size:24px:} 

</style> 

</head> 


<body> 

<div class="class1"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 
<p> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</p> 

<div class="class2"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</div> 
<div> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。</div> 

</body> 

</html> 
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问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。 


间 帮 能 有 几 交 坡 ， 羽 一 江 春 水 向 东 冶 。 


问 君 能 有 几 多 愁 ， 恰 似 一 江 春 水 向 东 流 。 
间 详 和 有 几 多 起 性 似 一 江 春 水 扣 未 衣 





图 1.16 匹配 属性 名 选择 器 演示 效果 
【示例 8】 新 建文 档 ， 保 存 为 test7.html。 输 入 下 面 代码 ， 通 过 指定 属性 值 来 为 第 1 个 图 像 定 义 样 


式 ， 即 使 第 1 个 图 像 显 示 红 色 边 框 线 ， 演 示 效 果 如 图 1.17 所 示 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="texthtml: charset=utf-8" /> 

<title> 示 例 代码 </title> 

<style type="text/css"> 

img { width:260px:} 

img[alt=" 图 像 "][title=" 图 像 "] { 
border:solid 2px red: 

} 

</style> 

</head> 


<body> 

<img src="images/pic1.jpg" alt=" 图 像 " title=" 图 像 " /> 
<img src="images/pic2.jpg" alt=" 图 像 " /> 

<img src="images/pic3.jpg" title=" 图 像 " /> 





图 1.17 匹配 图 像 中 多 个 属性 值 的 样式 演示 效果 


【示例 9】 新 建文 档 , 保存 为 test8.html。 输入 下 面 代码 , 分 别 定义 了 5 个 模糊 匹配 的 属性 选择 器 ， 


然后 把 匹配 的 div 元 素 显示 出 来 以 测试 浏览 器 是 否 支 持 该 属性 选择 器 ， 演 示 效 果 如 图 1.18 所 示 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 示 例 代码 </title> 

<style type="text/css"> 

div {display: none: }/# 隐 藏 所 有 div 元 素 */ 

[classF"blue"] {display: block: }/* 连 字符 匹配 */ 
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[class~="blue"] {display: block: }/* 空 自 符 匹 配 */ 
[class'="Red"] {display: block: } /* 前 级 匹配 */ 
[class$="Green"] {display: block: }/* 后 级 匹配 */ 
[class*="gre"] {display: block: }/* 子 字符 囊 匹 配 */ | 
</style> | 图 





| 好 
<body> 
eeed loe geen”> 支 | (条 区 本 ) 性 反 时 dim 


<div class="red blue green"> 支 持 [- 刁 (空白 符 匹 配属 性 选择 器 </div> 
<div class="Red-blue-green"> 支 持 [^=] (前 级 匹配 ) 属性 选择 器 </div> 

<div class="red-blue-Green"> 支 持 [$=] 后缀 匹配 ) 属性 选择 器 </div> | 
<div class="red-blue-green"> 支 持 [*=]: 〈 子 字符 串 匹配 ) 属性 选择 器 </div> | 
</body> | 
</html> 


| weronm o- so]| 


属性 选择 器 


支持 = ( 子 字符 中 匹配 ) 属性 这 择 器 





图 1.18 模糊 匹配 属性 选择 器 演示 效果 
上 面 示例 中 省 略 了 属性 选择 器 的 指定 标签 选择 器 ， 这 时 它 将 匹配 任意 标签 元 素 。 


1.5.9 CSS 特性 


CSS 样式 遵循 3 个 基本 规则 : 继承 性 、 层 芝 性 和 特殊 性 ， 这 些 规则 确保 CSS 样式 能 够 准确 、 高 
效 地 发 挥 作用 。 
CSS 继承 性 最 典型 的 应 用 就 是 在 body 元 素 中 定义 整个 页 面 的 字体 大 小 、 字 体 颜色 等 基本 页 面 属 
性 ， 这 样 包含 在 body 元 素 内 的 其 他 元 素 都 将 继承 该 基本 属性 ， 以 实现 页 面 显示 效果 的 统一 。 
【示例 1】 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 test.html。 切 换 到 代码 视图 下 ， 在 <body> 标 签 
中 输入 下 面 HTML 代码 : 
<divid—"wap™> 
<div id="header"> 
<div id="menu"> 
<ul> 
<li><span> 首 页 </span></i> 
<l 记 菜单 项 </li> 
<Aul> 
<div> 
</div> 
<p> 主 体内 容 </p> 
</div> 
</div> 


然后 ， 在 <head> 标 签 中 输入 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
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接着 ， 在 内 部 样式 表 中 输入 下 面 CSS 代码 ， 定 义 一 个 标签 样式 ， 在 body 上 定义 字体 大 小 为 12 
素 ， 通 过 继承 性 ， 包 含 在 body 元 素 的 所 有 其 他 元 素 都 将 继承 该 属性 ， 并 设置 包含 的 字体 大 小 为 12 


body { font-size:12px:} 
最 后 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 1.19 所 示 。 


x 


像 
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图 1.19 CSS 继承 性 演示 效果 


灵活 利用 CSS 继承 性 ， 可 以 优化 CSS 代码 ， 节 省 开发 时 间 ， 但 是 继承 也 有 其 局 限 性 。 首 先 ， 有 
些 属性 是 不 能 继承 的 。 例 如 ，background 属性 用 来 设置 元 素 的 背景 ， 它 是 没有 继承 性 的 。 实 际 上 它 也 
不 应 该 有 继承 性 ， 如 果 所 有 包含 元 素 都 继承 了 背景 属性 ， 那 么 文档 看 起 来 就 会 很 怪异 。CSS 强制 规定 


| 部 分 属性 不 具有 继承 特性 ， 分 类 说 明 如 下 : 


国共 办 办 办 多 多 
本 
洒 
司 
度 


继承 是 非常 重要 的 ， 使 用 它 可 以 简化 代码 ， 降 低 CSS 样式 的 复杂 性 。 但 是 ， 如 果 在 网 页 中 所 有 


| 元素 都 大 量 继承 样式 ， 那么 判断 样式 的 来 源 就 会 变 得 很 困难 。 一 般 对 于 字体 、 文 本 类 属性 等 涉及 网 页 


中 通用 属性 可 以 使 用 继承 。 例如， 网 页 显示 字体 、 字 号 、 颜 色 、 行 距 等 可 以 在 body 元 素 中 统一 设置 ， 
然后 通过 继承 影响 文档 中 所 有 文本 。 

下 级 标签 通过 继承 性 获取 上 级 对 象 的 样式 , 但 是 这 些 样式 影响 力 是 非常 弱 的 ， 如 果 元 素 本 身 包含 
了 相 冲 突 的 样式 ， 则 将 忽略 继承 得 来 的 样式 。 

对 于 相同 CSS 起 源 来 说 ， 不 同位 置 的 样式 其 优先 级 也 是 不 同 的 : 一 般 来 说 ， 行 内 样式 会 优先 于 
内 嵌 样 式 表 ， 内 部 样式 表 会 优先 于 外 部 样式 表 。 而 被 附加 了 !important 关键 字 的 声明 会 拥有 最 高 的 优 
先 级 。 

【示例 2】 在 下 面 示例 中 ， 分 别 在 p 元 素 行内 定义 一 个 内 嵌 属 性 样式 〈style="font-size:14px")， 


| 然后 在 文档 的 头 部 定义 一 个 内 部 样式 p { font-size:24px:}， 最 后 在 外 部 样式 表 文 件 (stylel.css) 中 定义 


一 个 外 部 样式 p { font-size:36px;}， 并 利用 <link> 标 签 链接 到 文档 中 。 在 浏览 器 中 预览 ， 则 根据 CSS 
样式 的 优先 级 ， 最 终 显示 结果 为 14 像素 ， 显 示 效果 如 图 1.20 所 示 。 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

<title> 示 例 代码 </title> 
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| 
<style type="text/css"> | 
Pp {font-size:24px:} | 
</style> 
<link href="stylel.css" rel="stylesheet" type="text/css" /> 
</head> | 图 


<body> 
<p style-fontsize14px'> 段 洲 文 本 <jp> 


) 六 





<Jbody> 
</html> 


x | 
所 5 | 
图 1.20 CSS 样式 继承 效果 


对 于 常规 选择 器 它们 都 拥有 一 个 优先 级 加 权 值 ， 说 明 如 下 。 
标签 选择 器 : 优先 级 加 权 值 为 1。 
伪 元 素 或 伪 对 象 选择 器 : 优先 级 加 权 值 为 1。 
类 选择 器 : 优先 级 加 权 值 为 10。 
属性 选择 器 : 优先 级 加 权 值 为 10。 
ID 选择 器 : 优先 级 加 权 值 为 100。 
其 他 选择 器 : 优先 级 加 权 值 为 0， 如 通 配 选 择 器 等 。 
然后 ， 以 上 面 加 权 值 数 为 起 点 来 计算 每 个 样式 中 选择 器 的 总 加 权 值 数 。 计 算 的 规则 是 : 
统计 选择 器 中 ID 选择 器 的 个 数 ， 然 后 乘 以 100。 
统计 选择 器 中 类 选择 器 的 个 数 ， 然 后 乘 以 10。 
统计 选择 器 中 的 标签 选择 器 的 个 数 ， 然 后 乘 以 1。 
依 此 方法 类 推 ， 最 后 把 所 有 加 权 值 数 相 加 ， 即 可 得 到 当前 选择 器 的 总 加 权 值 ， 最 后 根据 加 权 值 来 | 
决定 哪个 样式 的 优先 级 大 。 | 
【示例 3】 在 下 面 代 码 中 ， 把 每 个 选择 器 的 特殊 性 进行 加 权 ， 和 希望 读者 好 好 研究 一 下 ， 它 们 都 具 | 
有 比较 实用 的 典型 性 ， 其 他 选择 器 的 特殊 性 也 将 依 此 类 推 。 
/[ 选 择 器 特殊 性 加 权 值 ]*/ 
div{/* 特 殊 性 加 权 值 二 1*/ 
color:Green: 


加 


加 


办 办 办 罗 


} 
div h2{/* 特 殊 性 加 权 值 : 1+1==2*/ 
color:Red: 


} 
.blue{/* 特 殊 性 加 权 值 :10 二 10*/ 
color:Blue: 


} 

div.blue{/* 特 殊 性 加 权 值 ，1+10 二 11*/ 
color:Aqua: 

} 

divblue .dark{* 特 殊 性 加 权 值 : 1+10+10==21*/ 
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color:Maroon: 


} 
#beader{/* 特 殊 性 加 权 值 : 100 二 100*/ 
colorGray: 


} 
#header span{l* 特 殊 性 加 权 值 : 100 十 1 二 101*/ 


} 


它 拥有 比 上 面 提 到 的 选择 器 具有 更 大 的 优先 权 。 

在 相同 加 权 值 下 ，CSS 将 遵循 就 近 原 则 ， 也 就 是 说 靠近 元 素 的 样式 具有 最 大 优先 权 ， 或 者 说 
排 在 最 后 的 样式 具有 最 大 优先 权 。 

回 CSS 定义 了 一 个 !important 命令 ， 该 命令 被 赋予 最 大 权力 。 也 就 是 说 不 管 特殊 性 如 何 ， 以 及 
样式 位 置 的 远近 ，!important 都 具有 最 大 优先 权 。 


【示例 4】 新 建 CSS 样式 表 文件 ， 保 存 为 style2.css， 然 后 输入 下 面 样式 代码 : 


/CSS 文档 ， 文 件 名 称 为 style.css*/ 
#eader{/* 外 部 样式 */ 
color:Red!important: 


| 容 提示 : 

| 被 继承 的 值 加 权 值 为 0。 一 个 元 素 显示 声明 的 样式 都 可 以 覆盖 继承 来 的 样式 。 

| 内 联 样式 优先 。 带 有 style 属性 的 元 素 ， 其 内 联 样式 的 特殊 性 可 以 为 100 或 者 更 高 ， 总 之 ， 
| 


} 
新 建 HTML 文档 ， 保 存 为 test3.html。 然 后 在 其 中 输入 下 面 代 码 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<link hre 人 ="style2.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
#eader{/* 内 部 样式 */ 
color:Gray: 


}; 
</style> 
</head> 


<body> 

<div id="header"” style="colorYellow"><!-- 内 嵌 样 式 -> 
天 王 盖 地 虎 ， 天 下 唯 !important 命令 独 尊 

</div> 

</body> 

</html> 


上 面 页 面 被 解析 后 ， 则 <div> 元 素 显示 为 红色 。 注 意 !important 命令 必须 位 于 属性 值 和 分 号 之 间 ， 
否则 无 效 ，IE6 及 更 低 版 本 不 支持 !important 命令 。 
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CO 


1.6 上 机 练习 


1. 表格 主要 是 用 来 组 织 显 示 数 据 ， 当 然 也 要 注意 版 式 效 果 ， 请 模仿 图 1.21 所 示 效 果 设 计 一 个 表 | 
格 结构 和 样式 。 





x 


Sr Er 


4 

小 邦人 

染 敬 若 
网 宇 





图 1.21 设计 表格 效果 


2. 下 面 页 面 效 果 包 含 文本 、 超 链接 和 图 片 的 显示 ， 演 示 如 图 1.22 所 示 ， 这 里 主要 使 用 <div> 标 
签 定义 页 面 结构 ， 使 用 <h1> 标 签 定义 标题 ， 使 用 <a> 标 签 定义 超 链接 ， 使 用 <img> 标 签 定义 图 像 ， 使 
用 <ul> 和 <li> 标 签 定义 导航 列表 结构 。 请 模仿 本 示例 页 面 ， 设 计 一 个 简单 的 公司 首页 效果 。 


© ET -ee 


产品 列表 关于 我 们 联系 我 们 





1.22 ”页面 局 部 结构 效果 


3. 下 面 这 段 HTML 文档 源 代码 是 不 符合 XHTML 标准 的 ,请 把 它 转换 为 XHTML 过 渡 型 文档 要 | 
求 ， 演 示 如 图 1.23 所 示 。 | 

<html> 

<head></head> 


<body> 

<p><b> 将 CSS 样式 表 文 件 引入 到 HTML 页 面 </b></p><br> 
<p>&nbsp:&nbsp:1. 直 接 写 在 标签 元 素 的 属性 style 中 ， 通 常 称 之 为 行 间 样式 ; 
<p>&nbsp:&nbsp:2. 将 样式 写 在 &ltstyle&gt 和 &lt/style&gt: 标 签 之 内 ， 通 常 称 之 为 内 嵌 样 式 表 ; 
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<p>&nbsp:&nbsp:1. 通 过 在 &ltlink /&gt: 方 式 外 链 CSS 样式 文件 ， 通 常 称 之 为 外 联 样式 表 ; 
<p>&nbsp:&nbsp:4. 通 过 @import 关键 字 导 入 外 部 CSS 样式 文件 ， 通 常 称 之 为 导入 样式 表 。 


<Jbody> 
</html> 


€ 3? EIT Err A 


Note | eshte 页面 


1. 直接 写 在 标签 元 球 的 属性 style 中 ， 通 常 称 之 为 行 间 样式 ; 


2. 将 样式 写 在 Cstyle> 和 </style> 标 签 之 内 ,通常 称 之 为 内 说 样式 表 ; 
3. 通 过 在 <link /) 方 式 外 链 CSs 样 式 文件 ， 通 常 称 之 为 外 联 样式 下; 
4. 通过 import 关 键 字 导 入 外 部 CSS 样 式 文件 ， 通 常 称 之 为 导入 样式 表 。 





图 1.23 转换 一 个 普通 的 页 面 


【练习 提示 】 
注意 标明 文档 类 型 和 名 字 空 间 。 
使 用 标题 标签 设计 标题 。 
使 用 有 序列 表 标签 设计 列表 样式 。 
注意 标签 的 闭合 。 
不 要 使 用 非 语义 字符 填充 HTML 文档 。 
4. 学 习 编写 高 效 的 CSS 样式 ,应 避免 使 用 一 些 低 效 的 CSS 选择 器 去 匹配 大 量 的 元 素 ， 这样 能 够 
| 加 速 浏览 器 对 页 面 的 解析 效率 。 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 index.html， 在 <body> 标 
| 签 内 答 入 如 下 结构 : 
| <div class="menu"> 
| <ul class="submenu"> 
<li class="topmenu"><a href="" ></a></l> 
<li class="topmenu"><a hre="" ></a> </li> 
<li class="topmenu"><a href=""></a> </li> 
</ul> 
</div> 
<div class="news"> 
<ul class="subnews"> 
<li class="new"><a href="" ></a></li> 
<li class="new"><a href="" ></a> </l> 
<li class="new"><a hre 人 =""></a> < 由 > 
<n> 
</div> 
| 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 定义 样式 ， 练 习 使 
| 用 不 同 的 组 合 选择 器 匹配 导航 菜单 中 的 a 元素。 
| topmenua{ } 
回 .submenulia{ } 
| 回 menuula{ } 
menulia{ } 


国 办 办 办 办 
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menu .submenulia{ } 
5. 模仿 如 图 1.24 所 示 的 网 页 效果 ， 练 习 使 用 类 选择 器 和 ID 选择 器 控制 页 面 对 象 ， 具 体 细节 可 
以 根据 图 中 效果 酌情 进行 设置 。 


万 ) 
) 六 


€ 3 ET TT ET 





Note 
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图 1.24 图 文 混 排 版 面 


6. 在 网 页 中 经 常会 用 到 翌 套 选择 器 , 嵌 套 选择 器 是 控制 页 面 对 象 比较 常用 的 方法 。 模 仿 如 图 1.25 
所 示 图 文 混 排 的 版 面 效 果 ， 练 习 复杂 选择 器 的 使 用 。 


[5 


中 国 参加 世博 会 历史 
归 大 杯 县 ! 趟 看 后 海 ! 疾 坏人 了 


“上 洛 话 ,永远 逢 全 不 的 训 奉 ,让 我 怎 和 不 说 
L 择 : 世 博 区 给 运 排行 枕 指 南 全) 
Pi 折 : 房价 这 次 到 底 会 吕 到 个 处 





图 1.25 图 文 版 式 效果 
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第 2 章 


美化 网 页 文本 


( 怨 视频 讲解 : 79 分 钟 ) 


与 报刊 杂志 一 样 ， 网 页 离 不 开 文本 。 文 本 元 素 的 输入 与 编辑 在 整个 网 页 制作 过 程 中 占有 举 
足 轻 重 的 地 位 。Dreamweaver 是 一 款 “ 所 见 即 所 得 ”的 可 视 化 网 页 编辑 工具 ， 即 使 不 懂 程 序 设 
计 或 HIML 语言 编写 ,也 可 以 设计 出 版 面 整 洁 优 雅 的 页 面 。 本 章 将 介绍 使 用 Dieamweaver 来 编 
排 网 页 文本 ， 以 及 使 用 CSS 美化 文本 技法 


【 学 习 重 点 】 

WI 网 页 文本 的 输入 

MI 网 页 文本 的 编辑 

MW 设置 文本 属性 

WI 定义 格式 文本 和 列表 文本 

I 使 用 CSS 设置 字体 和 文字 样式 

MH 使 用 CSS 控制 边 距 和 段落 的 方法 

WI 灵活 使 用 CSS 设计 精美 的 网 页 正文 版 式 
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2.1 文本 输入 和 编辑 


芭 


文本 的 输入 和 编辑 是 网 页 制作 中 最 基本 的 操作 。 只 要 用 过 Word 软件 ， 就 可 以 轻松 地 掌握 本 部 分 | 


内 容 。 下 面 介绍 如 何 使 用 Dreamweaver 完成 文本 输入 和 编辑 。 
2.1.1 输入 文本 


| 
如 图 2.1 所 示 的 页 面 就 是 以 文本 为 主要 内 容 的 页 面 ， 此 外 还 包括 表格 和 图 像 等 网 页 元 素 。 本 节 重 | 
点 讲述 如 何在 页 面 中 输入 文本 ， 以 及 设置 文本 的 格式 等 。 | 





站 南 反对 中 国 南 海 断 埃 主 恋 中 万 回应 
人 有 
2 


海外 在 中国 ” 华 定 集团 这 家 用 于 
< 





图 2.1 网 页 中 的 文本 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 选 择 【 文 件 】|【 新 建 】 命 令 ， 或 者 按 Ctrl+N 快捷 键 ， 打 开 【 新 建 
文档 】 对 话 框 ， 保 持 默 认 设置 ， 单 击 【 创 建 】 按 钮 ， 新 建 一 个 空白 的 HTML 5 文档 ， 如 图 2.2 所 示 。 





图 2.2 【新 建文 档 】 对 话 框 


。 43 。 
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| 次 提示 如 果 需 要 打开 已 经 编辑 好 的 文档 ， 可 以 选择 【文件 ] | 【打开 ] 命令 ， 或 者 按 CltO 快捷 
| 键 ， 在 打开 的 对 话 框 中 选择 要 打开 的 文档 。 
! 


A | 第 2 步 ， 在 设计 视图 下 ,可 以 看 到 编辑 窗 口中 旺 示 一 个 空 和 页 面 ， 将 虹 标 指针 时 于 该 页面 的 文档 
| 窗口 中 单 击 ， 将 光标 定位 到 页 面 中 ， 如 图 2.3 所 示 。 


ET Em i 
| 


单 击 进行 切换 a 











在 文档 编辑 窗口 中 单 
击 ， 把 光标 定位 到 页 
面 内 


挟 作 -一 

《<> mL| 术 式 中 无 日 闪 | + v BT 吉 后 汪汪 人 0 

杷 es 。 mm 区 ~ HD) v0。 时 o 
Fm jx 

















图 2.3 切换 到 设计 视图 下 并 定位 光标 位 置 


第 3 步 ， 在 编辑 窗口 中 输入 文本 。 输 入 方法 如 同 在 Word 等 字 处 理 软件 中 一 样 方便 。 输 入 完 一 段 
| 文本 后 按 Enter 键 ， 另 起 一 段 可 以 继续 输入 文本 ， 如 图 2.4 所 示 。 

| 第 4 步 ， 输 入 完 一 行 后 按 ShifttEnter 快捷 键 ， 就 可 以 插入 一 个 换行 符 叶 ) ， 如 图 2.5 所 示 。 该 
| 符号 表示 换行 输入 ， 但 不 是 另 起 一 段 ， 所 以 ， 有 换行 符 的 多 行文 本 还 应 看 成 是 一 个 段落 。 
! 
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2.4 输入 网 页 文本 图 2.5 插入 换行 符 的 页 面 


容 提示: 如果 页 面 中 没有 显示 换行 符 图 标 ， 则 选择 〖 查 看 了 |【 可 视 化 助理 了 |【 不 可 见 元 素 】 命 令 。 

进行 以 上 操作 后 ， 如 果 页 面 中 仍然 没有 显示 该 图 标 ， 那 么 选择 【编辑 〗|【 首 选 参数 〗 命 
| 令 ， 在 弹出 的 对 话 框 中 选择 【不 可 见 元 素 〗 选 项 ,然后 选中 右边 的 【换行 符 】 复 选 框 即 可 ， 
| 如 图 2.6 所 示 。 
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2.6 选择 【不 可 见 元 素 】 选 项 


【拓展 】 也 可 以 通过 复制 粘贴 的 方法 快速 输入 ， 方 法 是 在 其 他 窗口 或 界面 中 先 选中 复制 文本 ， 然 
后 回 到 Dreamweaver 编辑 窗口 中 ， 把 光标 置 于 需要 插入 文本 的 地 方 ， 按 CtrltV 快捷 键 粘贴 即 可 。 | 
第 5 步 ， 输 入 完毕 ， 选 择 【 文 件 】| 【保存 】 命 令 , 或 者 按 Ctrlts 快捷 键 ， 打 开 【 另 存 为 】 对 话 | 
框 ， 设 置 文档 的 名 称 和 保存 位 置 ， 如 图 2.7 所 示 ， 最 后 单 击 【 保 存 】 按 钮 即 可 。 


4 注意 : 网 页 文档 的 扩展 名 一 般 为 .html 或 .htm, 不 要 保存 为 文本 文件 ( .txt) 或 者 Word 格式 (.doc )。 
第 6 步 ， 按 Fl12 键 ， 在 浏览 器 中 预览 ， 则 显示 效果 如 图 2.8 所 示 。 
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图 2.7 保存 文档 图 2.8 预览 网 页 文档 
2.1.2 导入 文本 


利用 Dreamweaver 提供 的 导入 命令 , 可 以 大 批量 地 导入 外 部 文件 中 的 文本 , 例如 Word 文档 、Excel 
文档 、 表 格式 数据 等 。 

1. 导入 Word 文档 

【操作 步骤 】 

第 1 步 ， 准 备 好 Word 文档 ， 本 示例 准备 
导入 的 文档 内 容 如 图 2.9 所 示 。 

第 2 步 ， 启 动 Dreamweaver， 新 建 一 个 空 ] - 祝 二 ，( 的 987 年 -的 1053 年 》， 字音 骨 ， 计 未 ( 咏 刘 旭 
白 的 HTML 文档 ， 保存 为 4 a 山 ) 人 = 北 让 词 人 ， 扩 9 汪 怀 朋 | 人 

第 3 步 , 把 光标 置 于 网 页 文档 中 , 选择 【 文 
件 】I【 导 入 】| 【Word 文档 】 命 令 ， 打 开 【 导 
入 Word 文档 】 对 话 框 ， 如 图 2.10 所 示 。 

第 4 步 ， 单 击 【 打 开 】 按钮 ， 即 可 把 “ 柳 图 2.9 预 导入 的 Word 文档 
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图 2.10 


打开 【导入 Word 文档 】 对 话 框 图 2.11 导入 Word 文档 效果 


【拓展 】 如 果 想 保留 Word 文档 中 的 格式 ， 可 以 选中 复制 全 部 Word 文档 ， 在 网 页 编辑 窗口 中 选 
择 【 编 辑 】| 【选择 性 粘贴 】 命令， 打开 【选择 性 粘贴 】 对 话 框 ， 如 图 2.12 所 示 。 在 该 对 话 框 中 选中 
结构 的 文本 以 及 全 部 格式 〈 粗 体 、 斜 体 、 样 式 ) 】 单 选 按 钮 ， 则 粘贴 效果 如 图 2.13 所 示 。 
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12 【选择 性 粘贴 】 对 话 框 图 2.13 ”粘贴 带 格式 的 Word 文档 


2. 导入 Excel 文档 


在 如 图 2.14 〈a) 所 示 的 Excel 文档 中 ， 只 需要 选择 【文件 】|【 导 入】| 【Excel 文档 】 命 令 ， 即 可 
把 该 文档 导入 到 网 页 中 ， 如 图 2.14 (b) 所 示 。 具 体操 作 步 骤 可 参考 上 面 示例 演示 。 
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2.14 ”导入 Excel 文档 
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! 
在 图 2.4 (b) 中 ， 可 以 看 到 系统 自动 增加 表格 来 实现 对 Excel 文档 的 组 织 。 通 过 复制 粘贴 的 方式 | 


也 可 以 实现 相通 的 目的 。 
3 导入 表格 式 数据 


表格 式 数据 是 按 着 一 定格 式 排列 的 数据 ,一 般 多 指 文本 文件 中 按 一 定 分 隔 符号 排列 的 数据 , 如 图 2.15 | 
所 示 。 选 择 【 文 件 ] [导入 ]】|【 表 格式 数据 】 命 令 ， 打 开 【 导 入 表格 式 数据 】 对 话 框 ， 如 图 2.16 所 示 。 
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图 2.15 文本 文件 图 2.16 【导入 表格 式 数据 】 对 话 框 


在 【导入 表格 式 数据 】 对 话 框 中 选择 数据 文件 ， 并 设置 数据 之 间 的 定 界 符 ， 其 他 选项 可 以 保持 默 


认 ， 在 导入 之 后 仍然 可 以 进行 设置 ， 按 着 图 2.16 所 示 设 
置 导入 的 文本 文件 数据 如 图 2.17 所 示 。 


2.1.3 ”编辑 文本 


输入 文本 后 需要 对 文本 进行 编辑 ， 主 要 包括 文本 的 
选 定 、 复 制 、 删 除 、 移 动 等 操作 。 在 Dreamweaver 中 进 
行文 本 的 编辑 与 在 Word 中 的 方法 基本 相同 。 


1. 复制 文本 


如 果 文 档 中 出 现 大 量 相同 的 文本 ， 或 者 频繁 出 现 相 
同 的 文本 ， 就 可 以 通过 复制 文本 完成 文本 的 输入 。 
【操作 步骤 】 




















2.17 导入 的 表格 式 数据 


第 1 步 ， 选 中 需要 复制 的 文本 ， 这 时 被 选中 的 文本 将 高 亮 显 示 。 


第 2 步 ， 选 择 【 编 辑 】|【 拷 贝 】 命 令 。 


第 3 步 ， 单 击 要 复制 文本 的 位 置 ， 然 后 选择 【编辑 】|【 粘 贴 】 命 令 。 


总 技巧 复制 文本 还 可 以 使 用 更 简单 的 方法 一 一 选 定 要 复制 的 文本 ， 然 后 按 住 Ctrl 键 ， 将 复制 文 


本 拖 动 到 目标 文本 处 即 可 。 
2. 移动 文本 


移动 文本 操作 就 是 将 选中 的 文本 从 一 个 位 置 移动 到 另 一 个 位 置 。 


【操作 步骤 】 
第 1 步 ， 选 中 要 移动 的 文本 。 


.47 。 





~ 砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


第 2 步 ， 选 择 【编辑 ] | 【 剪 切 】 命令 。 
第 3 步 ， 将 鼠标 指针 置 于 目标 位 置 ， 然 后 选择 【编辑 】| 【粘贴 】 命 令 。 

。 | 这 技 西 : 移动 文本 最 简单 的 方法 是 ， 选 中 要 移动 的 文本 ， 接 住 饼 标 左 键 拖 动 鼠 标 指针 至 目标 位 置 ， 

全 | | 然后 释放 鼠标 左 键 ， 即 可 完成 移动 操作 。 


! 
| 
| 
| 
| 如 果 文档 中 出 现 错 误 ， 需 要 删除 一 部 分 内 容 ， 这 时 就 要 进行 删除 操作 。 

【操作 步骤 】 

第 1 步 ， 选 中 要 删除 的 文本 。 

第 2 步 ， 选 择 【 编 辑 】|【 清 除 】 命 令 ， 或 者 直接 按 Delete 键 删除 文本 。 

丛 技巧: 以 上 3 项 操作 可 通过 菜单 命令 完成 ， 也 可 以 使 用 快捷 菜单 完成 。 选 中 文本 以 后 ， 在 文本 上 


右 击 , 文档 窗口 中 将 弹出 快捷 菜单 。 选择 快捷 菜单 中 的 相应 命令 ， 就 可 以 进行 复制 、 移 动 
和 删除 等 操作 。 


2.2 设置 文本 基本 属性 


在 网 页 制作 中 ， 文 本 格式 非常 重要 。 如 果 网 页 中 文本 格式 千篇一律 ， 那 么 整个 网 页 就 显得 呆板 ， 
没有 生气 。Dreamweaver 为 文本 格式 提供 了 多 种 选择 ， 通 过 选择 相应 的 字体 、 大 小 、 颜 色 和 样式 等 ， 
可 以 使 网 页 看 上 去 赏心悦目 。 


2.2.1 设置 字体 


1. 设置 字体 

可 以 通过 【属性 】 面 板 完成 字体 设置 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 打 开本 节 示 例 test.html, 或 者 新 建文 档 ， 自 做 一 个 简单 的 文本 页 面 。 

第 2 步 ， 选中 文本 以 后 ， 选 择 【 窗 口 1【 属 性 】 命 令 ， 或 者 按 Ctrl+F3 快捷 键 ， 打 开 文 本 【属性 】 
面板 ， 如 图 2.18 所 示 。 
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} 图 2.18 选中 文本 
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第 3 步 ， 在 【属性 】 面 板 中 选择 CSS 选项 卡 ， 切 换 到 CSS 属性 设置 面板 中 ， 单 击 【字体 】 右 面 
下 拉 列 表 框 的 下 三 角 按钮 ， 从 下 拉 列 表 框 中 选择 一 种 字体 ， 如 图 2.19 所 示 。 设 置 字体 也 可 以 通过 选 | 
择 菜 单 命令 或 者 快捷 菜单 命令 完成 。 | 
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图 2.19 设置 字体 类 型 


第 4 步 ， 以 同样 的 方式 设置 二 级 标题 和 正文 字体 类 型 ， 然 后 按 F12 键 在 浏览 器 中 预览 ， 则 演示 效 
果 如 图 2.20 所 示 。 

2. 编辑 字体 

通过 【属性 】 面 板 设置 字体 ， 有 时 会 发 现 其 中 缺少 一 些 字体 ， 这 时 就 要 进行 字体 的 编辑 。 

【操作 步 又】 

第 1 步 ， 选 择 【 修 改 】| 【管理 字体 】 命 令 ， 打 开 【 管 理 字体 】 对 话 框 ， 切 换 到 【 自 定义 字体 堆 
栈 】 选 项 卡 。 在 【可 用 字体 】 列 表 中 选择 一 种 本 地 系统 中 可 用 字体 类 型 ， 如 “隶书 ”。 

第 2 步 ， 单 击 忆 按钮 ， 把 选择 的 可 用 字体 添加 到 【选择 的 字体 】 列 表 中 ， 如 图 2.21 所 示 。 
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图 2.20 预览 字体 效果 图 2.21 添加 可 用 字体 
第 3 步 ， 单 击 【 完 成 】 按 钮 ， 关 闭 对 话 框 即 可 。 


2.2.2 ”设置 字号 
字号 就 是 文字 的 大 小 ， 它 用 数字 来 表示 ， 其 值 越 大 ， 字 号 就 越 大 。 在 Dreamweaver 中 设置 字号 的 
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~ 1 页 缀 计 与 网 站 于 设 愉 入门 到 精通 
































| tS 
| 步骤 如 下 。 
| 【操作 步 又 】 
| 第 1 步 ， 继 续 以 2.2.1 节 示 例 为 例 ， 选 中 正文 文本 ， 并 打开 文本 【属性 】 面 板 。 
全 | 第 2 步 ， 在 【大 小 】 下 拉 列 表 框 中 选择 字号 14， 即 定义 段落 文本 字体 大 小 为 14 像素 ， 如 图 2.22 
”| 所 示 。 
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图 2.22 在 【属性 】 面 板 中 设置 字号 


容 提示 : 在 【属性 ] 面 板 的 【大 小 】〗 下 拉 列 表 框 中 ， 除 数字 选项 以 外 ， 还 有 极 小 (xx-small) 、 特 
小 (x-small)、 小 (small)、 中 (medium)、 大 (large )、 特大 (x-large)、 极 大 (xx-large )、 
较 小 (smaller ) 、 较 大 (larger) 选项 ， 它 们 用 来 改变 字体 相对 于 默认 字号 的 大 小 。 如 果 
将 字号 设置 为 默认 状态 ， 在 【大 小 〗 下 拉 列 表 框 中 选择 【无 〗 即 可 。 


| 2.2.3 ”设置 字体 颜色 


在 Dreamweaver 中 设置 文本 的 颜色 ， 可 以 通过 【属性 】 面 板 完成 。 

【操作 步骤 】 

第 1 步 ， 继 续 以 2.2.2 节 示例 为 例 ， 选 中 标题 文本 ， 并 打开 文本 【属性 】 面 板 。 

第 2 步 ， 单 击 【 大 小 】 下 拉 列 表 框 右边 的 颜色 框 ， 弹 出 调 色 板 ， 如 图 2.23 所 示 ， 在 颜色 面板 中 








| 选择 一 种 颜色 。 

| 记 画 画 画 画面 
| 再 画 夯 夯 夯 国 
而 | 
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| [ED 





| 图 2.23 用 调 色 板 设 置 文本 颜色 
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第 3 步 ， 如果 在 调 色 板 中 没有 合适 的 颜色 ， 可 以 在 窗口 界面 或 者 网 页 内 找 一 种 颜色 。 方 法: 单 击 
面板 中 的 吸管 工具 ， 然 后 移动 光标 ， 随 着 光标 不 断 移动 ， 调 色 板 会 动态 显示 当前 位 置 的 颜色 ， 找 到 合 


适 的 颜色 后 单 击 即 可 ， 如 图 2.24 所 示 。 
第 4 步 , 单 击 调 色 板 中 的 加 号 按钮 , 可 以 把 当前 选中 的 颜色 保存 起 来 ， 

如 图 2.25 所 示 。 
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图 2.24 自 定义 颜色 
2.2.4 设置 文本 样式 


文本 样式 包括 粗 体 (Bold) 、 和 斜体 (Italic) 和 下 划 线 (Underline) 等 。 
供 粗 体 按钮 2 和 斜体 按钮 工 。 在 【格式 】|【HTML 样式 】 菜 单 下 包含 更 多 


以 方便 在 网 页 中 随意 调用 ，| 





图 2.25 保存 颜色 


在 【属性 】 面板 上 ， 只 提 
的 样式 ， 如 图 2.26 所 示 。 
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图 2.26 【HTML 样式 】 子 菜单 


除 【 粗 体 ]、【 斜 体 】 和 【下 划 线 】 以 外 ，【 样 式 】 命 令 的 子 菜单 中 还 包括 【删除 线 】、 


型 】 和 【强调 】 等 多 种 选择 。 
【操作 步骤 】 
第 1 步 ， 继 续 以 2.2.3 节 示 例 为 例 ， 选 中 标题 文本 。 
第 2 步 ， 选择 【格式 】| 【HTML 样式 】| 【下划线 】 命 令 。 
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第 3 步 ， 按 Ctrl+S 快捷 键 保存 文档 ， 然 后 按 F12 键 在 浏览 器 中 预览 ， 则 显示 效果 如 图 2.27 所 示 。 


! 
| 
| 
| 
| 友人 意 喜 ， 卫 几 尼 。 直 省 反 信 信物。 让 生 珊 寺 ， 信 法 是 ， 到 淖 央 村 必 。 吏 万 于 空 ， 信 渤 交 亩 ， 革 息 十 从 理 。 公 
rs eet 
生得 全 自生。 小 多 称 了 ， 机 本 其 贡 。 可 从 市， 读 同 人 示 忆 类 天 。 获 汪 们 用， 多 作 直到 直下 业 和 
裤 。 人 全 公 生 ， 一 村 区 区 缮 由， 





图 2.27 为 标题 定义 下 划 线 样式 


2.3 设置 段落 文本 样式 


2.2 节 主 要 讲述 了 文本 基本 样式 属性 设置 。 本 节 将 介绍 文本 的 对 齐 和 缩 进 。 在 网 页 中 应 用 文本 的 
对 齐 和 缩 进 功能 可 以 让 文本 排列 有 序 ， 重 点 突出 。 


2.3.1 文本 对 齐 


文本 的 对 齐 指 的 是 文本 相对 于 文档 窗口 在 水 平 位 置 的 对 齐 方式 ， 它 包括 左 对 齐 、 居 中 对 齐 、 右 对 
齐 和 两 端 对 齐 4 种 类 型 。 

【操作 步骤 】 
| 第 1 步 ， 继 续 以 2.2.4 节 示 例 为 例 ， 选 中 标题 文本 。 
| 第 2 步 , 单 击 【属性 】 面 板 上 的 【居中 对 齐 】 按 钮 ， 如 图 2.28 所 示 。 其 中 ,一 表示 左 对 齐 ， 芋 表 
| 示 居 中 对 齐 ， 台 表示 右 对 齐 ， 如 表示 两 端 对 齐 。 


Cr 
EE 










苏轼 


二 江东 才 ， 尖 内 杂 ， 寺 上 才 风 这 人 网 。 堵 变 而 过 ， 人 着 是 ， 王 由 网 部 专 但。 刀 刁 富 空 ， 信 济 拆 间 ， 才 起 千 稚 沁 。 江 山峰 两 一 斩 负 少 表 志 


进 担 人间 间 芷 ， 小 关 科 斥 了 ， 认 委 关 芭 。 明 启 丛 市 ， 人 该 吴 同 ， 接 衬 雪 外 外 头 。 让 国 种 泗 ， 皇 情 直 类 我 ， 乎 旦 平安 。 人 生 加 全 ， 一 号 还 因 
Ey 
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ya 


























J 图 2.28 文本 居中 对 齐 
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*q 


疱 提示 : 设置 文本 的 对 齐 方式 ， 也 可 以 选择 【文本 〗| 【对 齐 】 子 菜单 中 的 命令 ， 或 者 利用 快捷 菜 
单 中 的 【对 齐 】 子 菜单 完成 。 


< 所 注意 : 对 齐 文本 是 针对 整 段 文本 进行 操作 的 ， 不 可 以 只 对 段 内 部 分 文本 单独 实行 对 齐 操作 。 


第 3 步 ， 以 同样 的 方式 设置 二 级 标题 文本 “苏轼 ”居中 对 齐 。 保 存 文档 ， 按 F12 键 项 览 文 档 , 演 | 
示 效 果 如 图 2.29 所 示 。 





念 奴 娇 。 霖 壁 怀古 
苏轼 


关联 刘 去 ， 汪 将 尺 ， 二 二 风流 人 移 。 放 和 旬 而 过， 人 浊 是 、 三 出 网 部 村 音 。 更 家 空 ， 你 流 全 和 
于 起 十 咒 生 全 山 入 大 ， 一 对 多 玫 案 去 


先 让 从 箱 当年， 小 折 科 多 了 了 ， 樟 站 闫 谈 ， 冯 褒 从 让、 该 呈 司 ， 禄 村 去 处 如 天 ， 攻 国名 用 ， 多 性 丰 
Er Ee 


兴安。 人 人 类 公 生 ， 一 





图 2.29 文本 居中 预览 效果 
2.3.2 文本 缩 进 


| 
文本 的 缩 进 包 括 首 行 缩 进 和 段落 缩 进 。 下 面 是 设置 首 行 缩 进 的 方法 。 | 
【操作 步骤 】 

第 1 步 ， 继 续 以 2.3.1 节 示例 为 例 ， 打 开 文 档 。 | 

第 2 步 ， 将 鼠标 指针 置 于 第 一 段 行 首 。 | 

第 3 步 ， 选 择 【插入 】|【 字 符 】|【 不 换行 字符 】 命 令 ， 如 图 2.30 所 示 。 在 【插入 】 面 板 的 【 字 | 

符 】 选 项 中 ， 单 击 【不 换行 空格 】 按 钮 上 。 | 
Dw zem Co WO) SolO sels OW we = ERI | 














， 宙 避 家 党， 入 活 才 香 ， 于 自生 习 党 。 红 山 公 和， 一 时 久 少 条 大 








类 天 。 斤 图 守 网 ， 多 情 丰 莫 我 ， 半生 全 发。 人 业 生 和 一 村 江 牙 
























































图 2.30 插入 不 换行 空格 


“9. 


i 


| 第 4 步 ， 连 续 执行 【不 换行 空格 】 命 令 8 次 ， 实 现 首 行 缩 进 2 个 字符 。 
| 总 技巧: 将 输入 法 中 的 半角 状态 切换 为 全 角 状 态 ， 并 把 鼠标 指针 置 于 行 首 ， 按 空格 键 即 可 实现 首 行 
人 缩 进 。 
| 如 果 在 【首选 项 】 对 话 框 中 选中 【允许 多 个 连续 的 空格 】 复 选 框 ， 可 以 设置 空格 键 自动 增加 空格 
7 效果， 册 空 格 键 就 具 有 缩 进 功能 ， 如 图 2.31 所 示 。 
| 第 5 步 ， 把 光标 置 于 第 二 段 的 首 行 前 ， 模 仿 上 面 操作 缩 进 2 个 字符 。 保 存 文档 ， 按 F12 键 ， 预览 


| 效果 如 图 2.32 所 示 。 


念 奴 娇 ， 赤 壁 怀古 
苏轼 


Hg TT et ed 
涝 二 主 。 直 起 考 人 洛 。 红 山 笃 丙 ， 


秆 六 人 准 当 年， 小 看 可 称 了 了， 对 突 美 雄 。 A 读 基 用 ， 检 闷 所 雪 天 。 收 辐 昌 









瓜 月 开放 时 要 有 户 人 


加 0 
册 帮 相关 他 0) [这 二 。 习 
Wb 广 从 村 更 新 剖腹 未 | 

二 和 x 针对 本 0) 网， 身 情 站 及 病 ， 蛙 生生 实 。 作业 四 再， 一 尼 上 | 
Dear 


NO 





历 天 光明 类 o0 加 
所 和 从 司 





图 2.31 设置 空格 键 缩 进 功能 图 2.32 设置 首 行 缩 进 效果 


设置 段落 的 缩 进 方法 很 简单 ， 首 先 要 将 鼠标 指针 置 于 段落 中 ， 然 后 任 选 以 下 几 种 方法 之 一 。 
回 ”打开 【属性 】 面 板 ， 单 击 【属性 】 面 板 上 的 【 缩 进 】 按 钮 择 。 

选择 【格式 】|【 缩 进 】 命 令 。 

直接 按 Ctrl+Alt+] 组 合 键 。 

回 “ 右 击 该 段落 ， 选 择 快捷 菜单 中 的 【列表 】|【 缩 进 】 命 令 。 

缩 进 后 的 段落 如 图 2.33 所 示 。 


thin 本 


TE E 
| 折 ET 二 
念 检 术 "赤壁 剑 古 执行 1 次 缩 进 
大 江东 去 ， 贸 淘 尽 ,千古 风 凉 人 物 。 
族 健 西边， 人 道 是 ， 三 国 半角 杰 鱼 。 执行 3 次 缩 进 


刘 石 穿 空 ， 惊 洲 拍 岩 ， ss 
























2.33” 缩 进 后 的 段落 


实现 文本 的 缩 进 以 后 ， 如 果 要 减少 缩 进 的 距离 ， 可 以 执行 如 下 操作 。 
【操作 步骤 】 
| 第 1 步 ， 将 鼠标 指针 置 于 段落 中 的 任 一 位 置 。 
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| 
第 2 步 ， 选 择 以 下 一 种 方法 ， 减 少 段落 的 缩 进 。 | 
单 击 【 属 性 】 面 板 上 的 【文本 凸 出 】 按 钮 司 。 | 
选择 【格式 】|【 山 出 】 命令 。 
直接 按 Ctrl+Alt+[ 组 合 键 。 | 图 
回 “ 将 鼠标 指针 置 于 该 段落 中 ， 右 击 该 段落 ， 选 择 快 捷 菜 单 中 的 【列表 】|【 凸 出 】 命 令 。 全 
重复 单 击 【 缩 进 】 按 钮 或 【减少 缩 进 】 按 钮 ， 可 以 增加 或 减少 缩 进 的 距离 。 





) 六 








2.4 设置 格式 和 列表 


格式 和 列表 是 网 页 文本 排版 中 两 个 非常 有 用 的 功能 ,格式 主要 用 来 设置 固定 标题 、 预 定义 文本 格 | 
式 、 显 示 和 设置 段落 ， 列 表 主 要 用 来 组 织 多 列 文本 ， 方 便 排版 。 | 


2.4.1 定义 文本 格式 


Dreamweaver 中 有 几 种 既定 的 文本 格式 ， 每 种 格式 都 有 规定 的 大 小 、 对 齐 方 式 等 属性 值 。 
Dreamweaver 中 共 定 义 了 6 级 标 Cao - 





题 ， 用 来 实现 文本 的 格式 化 。 ee 人 -二 | | 
【操作 步骤 】 El 回 | | 


第 1 步 ， 启 动 Dreamweaver， 
选择 【文件 】|【 新 建 】 命 令 ， 或 
者 按 CtrlHN 快捷 键 , 新 建 一 个 空白 
的 HIML 文档 ， 保 存 为 test.html。 

第 2 步 ,把 光标 置 于 文档 编辑 
窗口 中 ， 输 入 文本 “HTML 标题 
标签 : ”， 在 【属性 】 面 板 中 设置 
【格式 】 为 “段落 ”， 如 图 2.34 图 2.34 设置 段落 格式 文本 
所 示 。 

容 提示 : 【格式 】 下 拉 列 表 框 中 各 选项 的 含义 分 别 如 下 。 

无 : 没有 设置 文本 的 格式 。 

段落 : 设置 当前 文本 为 段落 文本 ， 即 表示 能 自动 换行 并 以 一 个 段落 块 显示 。 
标题 1: 它 的 字号 约 为 6 号 ， 行 的 高 度 大 于 正文 。 

标题 ?~ 标题 6: 字号 相应 地 逐渐 减 小 。 

预先 格式 化 的 : 表示 保留 文本 预先 定义 的 格式 。 


第 3 步 ， 按 Enter 键 换行 ， 然 后 输入 文本 “一 级 标题 ”， 在 【属性 】 面 板 中 设置 【格式 】 为 “ 标 
题 1”， 如 图 2.35 所 示 。 

第 4 步 , 重复 操作 : 按 Enter 键 换行 ， 分 别 输入 文本 “二 级 标题 ”、“ 三 级 标题 ”、“ 四 级 标题 ”、 | 
“五 级 标题 ”和 “六 级 标题 ”， 然 后 在 【属性 】 面 板 中 分 别 设置 【格式 】 为 “标题 2”、“ 标 题 3”、 | 
“标题 4”、“ 标 题 5” 和 “标题 6”， 如 图 2.36 所 示 。 | 
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图 2.35 设置 一 级 标题 文本 
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图 2.36 设置 各 级 标题 文本 
从 技巧 : 用 标题 格式 化 文本 ， 也 可 以 使 用 组 合 键 .。 首先 将 鼠标 指针 置 于 要 格式 化 的 段落 中 ， 然 后 按 
快捷 键 “Ctrl+ 相 应 的 标题 号 ”。 例 如 ， 将 某 一 段落 设置 为 标题 3 的 格式 ,就 可 以 用 Ctrl+3 
快捷 键 来 实现 。 


第 5 步 ， 另 起 一 行 ， 输 入 文本 “页 面 源 代码 : ”， 设 置 文本 格式 为 “段落 ”。 按 Enter 键 换行 ， 
在 【属性 】 面 板 中 设置 文本 格式 为 “预先 格式 化 的 ”， 如 图 2.37 所 示 。 





























图 2.37 设置 预定 义 文本 


| 第 6 步 ， 输 入 本 页 源 代码 ， 这 时 可 以 看 到 用 户 输入 的 代码 能 够 正确 显示 ， 且 可 以 自由 缩 进 显示 ， 
| 效果 如 图 2.38(a) 所 示 。 如 果 不 设置 为 预定 义 格式 ， 而 改 为 段落 格式 ， 则 文本 效果 如 图 2.38(b) 所 示 。 
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加 CVsers Deumentsys stewmysnevest html -Ox 信 cusers Beamensys stewrysievest han = 
~ 琢 称 三 四 


页 面 源 代码 ， 


二 级 标题 

三 级 标题 

| 四 级 标题 

于 

am 

页 面 源 代码 ， 

<ldoctype html> <html> <head> <meta charset="ttf-8"> <ttie> 无 标题 广 

档 <t=> </heae> <body> <p>HTMI 村 题 标签 ，<ip> <hl> 一 级 标题 <4hl> 

<2> 二 级 标题 <h2> > <h4> 四 级 标题 <i4> <hs> 五 级 标 
题 <h5> <6> 六 级 标杆 <h6> <p> 页 面 源 代码 ，</p> <body> <htnl> | | 

[PIPEIES py rr | 

| 


(a) 预定 义 格式 (b) 段落 格式 
图 2.38 输入 预定 义 文本 


第 7 步 ， 按 CtrltS 快捷 键 保存 文档 ， 然 后 按 F12 键 在 浏览 器 中 预览 ， 则 显示 效果 如 图 2.39 所 示 。 















































2.39 文本 格式 显示 效果 


2.4.2 ”定义 文本 列表 


列表 是 文本 组 织 最 有 效 的 方式 , 传统 习惯 上 用 户 喜欢 用 表格 来 组 织 文 本 等 网 页 元 素 , 但 随 着 网 页 | 
技术 新 标准 的 推出 ，CSS 技术 革新 ，W3C 组 织 建议 广大 用 户 最 好 用 列表 组 织 文本 。 | 
【操作 步骤 】 | 
第 1 步 ， 启 动 Dreamweaver， 选 择 【文件 】|【 新 建 】 命 令 ， 或 者 按 CtritN 快捷 键 ， 新 建 一 个 空 | 
白 的 HIML 文档 ， 保 存 为 testhtml。 | 
第 2 步 , 把 光标 置 于 文档 编辑 窗口 中 , 输入 文本 “HTML 列表 标签 ”", 在 【属性 】 面板 中 设置 【 格 | 
式 】 为 “标题 1”， 如 图 2.40 所 示 。 | 
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| 第 3 步 ， 继 续 输入 多 行 段落 文本 ， 具 体内 容 如 图 2.41 所 示 。 

| Cr BED 
| HTNML 列 表 标 签 

< 定义 无 序列 表 - 

<ob 定义 有 序列 表 . 





em 
| 折 分 [ 议 4 | 天时 网 。 多 克 二 


全 nr 












< 定义 列表 的 项 目 。 

< 瑟 > 不 备 志 合用。 主义 旧 录 列表 
< 定义 定义 列表 。 

< 定义 定义 列表 中 的 项 目 - 
-<> 证 主义 列表 中 项 目的 杭 述 。 
































| nem 主页 二 的 间 单 i。 

| aeaacm 定义 用 户 可 以 从 弹出 单调 用 的 命 信 琴音 项 目 

| -<xommand> 定义 二 专 拉 家 

| lemor [EDR 
| 图 2.40 输入 标题 文本 图 2.41 输入 多 段 段落 文本 


| 第 4 步 ， 使 用 鼠标 拖 选 输入 的 多 行文 本 ， 然 后 在 【属性 】 面 板 中 单 击 【项目 列表 】 按 钮 ， 把 段落 
| 文本 转换 为 列表 文本 ， 如 图 2.42 所 示 。 
| 
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图 2.42 转换 段落 文本 为 列表 文本 
第 5 步 ， 在 设计 视图 中 可 以 看 到 列表 文本 效果 ， 如 图 2.43 所 示 。 可 以 看 到 ， 列 表 文 本 前 面 都 添 
加 一 个 项 目 符号 ， 同 时 文本 缩 进 显示 。 
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| 2.43 ”列表 文本 效果 
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交 提示 : 任 选 以 下 几 种 方法 之 一 都 可 以 定义 列表 文本 。 
打开 【属性 】 面 板 ， 单 击 该 面板 上 的 【项 目 列表 】 按 锂 汪 或 者 【编号 列表 】 按 钮 三 。 
回 选择 【格式 】| 【列表 】 命 令 ， 在 打开 的 子 菜单 中 选择 一 个 命令 即 可 。 
右 击 选中 段落 ， 选 择 快捷 菜单 中 的 【列表 】 子 菜单 中 的 命令 。 


如 果 设 置 编号 列表 ， 则 效果 如 图 2.44 所 示 。 


框 ， 如 图 2.45 所 示 。 在 该 对 话 框 中 可 以 定义 不 同类 型 列表 的 各 种 属性 。 
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图 2.44 编号 列表 文本 效果 图 2.45 【列表 属性 】 对 话 框 


2.5 使 用 CSS 定义 文本 样式 


字体 样式 涉及 文字 型 体 效果 , 包括 字体 类 型 、 字 体 大 小 、 字 体 颜色 等 基本 效果 , 还 包括 字体 粗细 、 
下 划 线 、 斜 体 、 大 小 写 等 特殊 效果 。 文 本 样式 主要 涉及 文本 排版 效果 。 


2.5.1 定义 字体 类 型 

CSS 使 用 font-family 属性 来 定义 字体 类 型 ， 另 外 使 用 font 属性 也 可 以 定义 字体 类 型 。 

加 ”font-family 是 字体 类 型 专用 属性 ， 用 法 如 下 : 

font-family : name 

font-family :ncursive | fantasy | monospace | serif | sans-serif 

name 表示 字体 名 称 ， 可 指定 多 种 字体 ， 多 个 字体 将 按 优先 顺序 排列 ， 以 逗号 隔 开 。 如 果 字 体 名 
称 包含 空格 ， 则 应 使 用 引号 括 起 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 使 用 fantasy 序 


列 ， 将 提供 默认 字体 序列 。 
font 是 一 个 复合 属性 ， 该 属性 能 够 设置 多 种 字体 属性 ， 用 法 如 下 : 


font : font-style || font-variant | font-weight || font-size | line-height | font-family 
font : caption | icon | menu | message-box | small-caption | status-bar 


属性 值 之 间 以 空格 分 隔 。 font 属性 至 少 应 设置 字体 大 小 和 字体 类 型 , 且 必 须 放 在 后 面 , 否则 无 效 。 
前 面 可 以 自由 定义 字体 样式 、 字 体 粗细 、 大 小 写 和 行 高 ， 详 细 讲 解 将 在 后 面 内 容 中 分 别 介绍 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 一 行 段落 文本 。 


<p> 定 义 字体 类 型 <p> 
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也 可 以 自 定义 这 些 列表 的 属性 ， 选 择 【 格 式 】|【 列 表 】|【 属 性 】 命 令 ， 打 开 【 列 表 属 性 】 对 话 ! 








一 一 于 绝 兴 入门 到 持 适 


在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 


来 定义 网 页 字体 的 类 型 。 
f body { 
仿生 | font-family:Arial, Helvetica, sans-serif 此 字体 类 型 */ 
| 本 时 
Note | 
| 4 肌体、 /*14 像素 大 小 的 黑体 字体 
| 


中 文 网 页 字体 一 般 多 定义 为 宋体 类 型 ， 对 于 标题 或 特殊 提示 信息 ， 如 果 需 要 特殊 字体 ， 则 建议 采 
用 图 像 形 式 来 间接 实现 。 原 因 是 中 文字 体 类 型 比较 少 , 通用 字体 类 型 就 更 少 了 , 字体 的 表现 力 比 较 弱 ， 
即使 存在 各 种 艺术 字体 ， 但 是 丽 于 艺术 字体 的 应 用 范围 窗 ， 很 少 被 设计 师 用 来 作为 网 页 字体 使 用 。 
| 2.5.2 ”定义 字体 大 小 
| css 使 用 bontsize 属性 来 定义 字体 大 小 ， 该 属性 用 法 如 下 : 
| font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


其 中 ，xx-small (最 小 )、x-small ( 较 小 )、small (小 )、medium (正常 )、large (大 )、x-large( 较 
大 )、xx-large〈 最 大 ) 表示 绝对 字体 尺寸 ， 这 些 特殊 值 将 根据 对 象 字体 进行 调整 。 

larger 〈 增 大 ) 和 smaller (减少 ) 这 对 特殊 值 能 够 根据 父 对 象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 
处 理 ， 使 用 成 比例 的 em 单位 进行 计算 。 

length 可 以 是 百分数 ， 或 者 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 但 不 可 为 负 值 。 其 百分比 取 值 
是 基于 父 对 象 中 字体 的 尺寸 来 计算 ， 与 em 单位 计算 相同 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 中 输入 以 下 内 容 : 

<div> 

<p class="p1"> 明 月 几时 有 ?0.6in</p> 

| <p class="p2"> 明 月 几时 有 ?0.8em</p> 
| <p class="p3"> 明 月 几时 有 ? 2cm</p> 
| <p class="p4"> 明 月 几时 有 ? ”16pt</p> 


<p class="p5"> 明 月 几时 有 ? ”2pc</p> 


| </div> 

| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 
| 别 设置 各 个 段落 中 的 字体 大 小 。 

| div{font-size:20px:} 让 以 像素 为 单位 设置 div 标签 字体 大 小 */ 

| Pl{ font-size: 0.6in: } 店 以 英寸 为 单位 设置 字体 大 小 */ 

| .p2{ font-size: 0.8em: } 诈 以 父 级 字体 大 小 为 参考 设置 大 小 */ 

| Pp3{fontsize: 2cm:} 证 以 厘米 为 单位 设置 字体 大 小 */ 

| pA{ font-size: 16pt: } 启 以 点 为 单位 设置 字体 大 小 */ 

pS{ fontsize: 2pe:} 刻 以 皮卡 为 单位 设置 字体 大 小 */ 

| 显示 结果 如 图 2.46 所 示 。 
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图 2.46 设置 段落 中 的 字体 大 小 
2.5.3 ”定义 字体 颜色 


! 
! 
! 
| 
| 
| 
CSS 使 用 color 属性 来 定义 字体 颜色 ， 该 属性 用 法 如 下 : | 
color : color 
在 CSS 中 ,颜色 的 设置 统一 采用 rgb 格式 ， 即 按 “ 红 黄 蓝 ” 三 原色 的 不 同比 例 组 成 每 种 颜色 。 例 | 
如 rgb(100%,0%,0%) 或 者 是 用 十 六 进 制 表 示 为 #0000， 即 为 红色 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 中 输入 以 下 内 容 : 
<p class="p1"> 明 月 几时 有 ? </p> 
<p class="p2"> 明 月 几时 有 ? </p> | 
<p class="p3"> 明 月 几时 有 ? </p> | 
<p class="p4"> 明 月 几时 有 ? </p> | 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 | 
别 定义 <p> 标 签 包含 的 字体 颜色 。 | 


‘pl { colorred:} 请 使 用 颜色 名 */ | 
:Pp2 { color:#693333;} /# 使 用 十 六 进 制 所 | 
.D3 { colorrgb(120.120.120):} /使 用 RGB/ | 
显示 结果 如 图 2.47 所 示 。 | 
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2.5.4 定义 粗 体 
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CSS 使 用 font-weight 属性 来 定义 字体 粗细 ， 该 属性 用 法 如 下 : 
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 


font-weight 属性 取 值 比较 特殊 ， 其 中 normal 关键 字 表 示 默 认 值 ， 即 正常 的 字体 ， 相 当 于 取 值 为 
400。bold 关键 字 表示 粗 体 ， 相 当 于 取 值 为 700， 或 者 使 用 <b> 标 签 定义 的 字体 效果 。bolder( 较 粗 》 
| 和 lighter( 较 细 ) 相对 于 normal 字体 粗细 而 言 。 

另外 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它 们 分 别 表 示 字体 的 粗 
细 ， 是 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 中 输入 以 下 内 容 : 


<p> 明 月 几时 有 ? 文字 粗细 是 normal</p> 

<hl> 明 月 几时 有 ? 文字 粗细 是 700</hl> 

<div> 明 月 几时 有 ? 文字 粗细 是 bolder</div> 

<p class="bold"> 明 月 几时 有 ? 文字 粗细 是 bold</p> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 
别 定义 段落 文本 、 一 级 标题 、<div> 标 签 包含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样式 类 。 


Pp {font-weight: normal } 
hl { font-weight: 700 } 
div{ font-weight: bolder } 
.bold { font-weight:bold: } 


显示 结果 如 图 2.48 所 示 。 

容 提示 : 设置 字体 粗细 也 可 以 称 为 定义 字体 的 重 
量 。 对 于 中 文 网 页 设计 来 说 ,一般 仅 用 到 
bold (加 粗 ) 、normal (普通 ) 两 个 属性 
值 即 可 。 


| 2.5.5 ”定义 斜体 
CSS 使 用 font-style 属性 来 定义 字体 倾斜 效果 ， 该 属性 用 法 如 下 : 


font-style : normal | italic | oblique 


证 等 于 400*/ 
/# 等 于 bold*/ 
人 # 可 能 为 500*/ 
证 加 粗 显示 */ 
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2.48 设置 字体 的 粗细 


| 其 中 , normal 表示 默认 值 , 即 正常 的 字体 ; italic 表示 斜体 ; oblique 表示 倾斜 的 字体 。 italic 和 oblique 
| 两 个 取 值 只 能 在 英文 等 西方 文字 中 有 效 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style type= 
"text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 输 入 下 面 样式 ， 定 义 一 个 斜体 样式 类 。 


.italic { 
font-size:24px: 


font-style:italic: /斜体 所 


} 
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然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 把 斜体 样式 类 应 用 到 该 段落 文本 中 。 | 
<p> 设 置 <span class="italic"> 文 字 斜体 </span></p> | 


显示 结果 如 图 2.49 所 示 。 


2.5.6 ”定义 下 划 线 | 
CSS 使 用 text-decoration 属性 来 定义 字体 下 划 线 、 删 除 线 和 顶 划 线 效果 ， 该 属性 用 法 如 下 : 
text-decoration : none || underline || overline || line-through || blink 
其 中 ，none 表示 默认 值 ， 即 无 装饰 字体 ，underline 表示 下 划 线 效果 ;，line-through 表示 删除 线 效 
果 ，overline 表示 顶 划 线 效果 ;blink 表示 闪烁 效果 。 | 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type= | 
"text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 3 个 装饰 字体 样式 类 。 | 
.underline {text-decoration:underline:} 放下 划 线 样式 类 */ | 
.Overline {text-decoration:overline:} 人 # 顶 划 线 样式 类 所 | 
.line-through {text-decoration:line-through:} 证 删除 线 样式 类 */ 
然后 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 的 装饰 类 样式 。 
<p class="underline"> 设 置 下 划 线 </p> 
<p class="overline"> 设 置顶 划 线 </p> 
<p class="line-through"> 设 置 删 除 线 </p> 
显示 结果 如 图 2.50 所 示 。 
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图 2.49 设置 斜体 字 图 2.50 设置 字体 的 下 划 线 、 顶 划 线 和 删除 线 
2.5.7 ”定义 大 小 写 
CSS 使 用 font-variant 属性 来 定义 字体 大 小 效果 ， 该 属性 用 法 如 下 : 
font-variant : normal | small-caps 
其 中 ，normal 表示 默认 值 ， 即 正常 的 字体 ，small-caps 表示 小 型 的 大 写字 母 字体 。 
【示例 1】 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type= 
"text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样 式 ， 定 义 一 个 类 样式 。 


.Small-caps {/* 小 型 大 写字 母 样式 类 */ 
font-variant:small-caps: 


} 
然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 上 面 定 义 的 类 样式 。 
<p class="small-caps">font-variant </p> 
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< 全 注意 ; font-variant 仅 支 持 英文 为 代表 的 西 文字 体 ， 中 文字 体 没有 大 小 写 效果 区 分 。 如 果 设 置 了 小 
| 型 大 写字 体 ,但 是 该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 个 。 例如 ， 可 通 
| 过 使 用 一 个 常规 字体 ， 并 将 其 小 写字 母 蔡 换 为 缩小 过 的 大 写字 母 。 


卿 | ， 拓展 ] css 还 定义 了 一 个 texttansfomm 属性 ， 该 属性 也 能 够 定义 字体 大 小 写 效果 。 不 过 该 必 
Note | 性 主要 定义 单词 大 小 写 样式 ， 用 法 格式 如 下 : 
text-transform : none | capitalize | uppercase | lowercase 


其 中 ，none 表示 默认 值 ， 无 转换 发 生 ; capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 
余 无 转换 发 生 ; uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 

【示例 2】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 
义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 3 个 类 样式 。 


capitalize {/ 
text-transform:capitalize; 让 首 字 母 大 写 */ 
| 
| appercase{ 
| text-transform:uppercase: /# 全 部 大 写 #/ 
} 
.lowercase { 
text-transform:lowercase; 族 全 部 小 写 */ 


然后 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 

<p class="capitalize">text-transform:capitalize;</p> 

<p class="uppercase">text-transform:uppercase:</p> 

<p class="lowercase">text-transform:lowercase:</p> 

分 别 在 正 和 Firefox 浏览 器 中 预览 , 则 会 发 现 : 正 认为 只 要 是 单词 就 把 首 字母 转换 为 大 写 , 如 图 2.51 
所 示 ; 而 Firefox 认为 只 有 单词 通过 空格 间隔 之 后 ， 才 能 够 成 为 独立 意义 上 的 单词 ， 所 以 几 个 单词 连 
在 一 起 时 就 算 作 一 个 词 ， 如 图 2.52 所 示 。 


Ce Socahorwm p - Bo | Bre 


男 bcahoctmyriehtect 国 跃 了 避 | » 


text-transform- capitalize; 
TEXT-TRANSFORM UPPERCASE: text-transtorm:capitalize; 
text-transform-lowercase, TEXT-TRANSFORM:UPPERCASE; 


text-transform:lowercase' 





2.51 正中 解析 的 大 小 效果 2.52 Firefox 中 解析 的 大 小 效果 
2.5.8 ”定义 水 平 对 齐 


在 传统 布局 中 ， 一 般 使 用 HTML 的 align 属性 来 定义 对 象 水 平 对 齐 ， 这 种 用 法 在 过 渡 型 文档 类 型 
| 中 依然 可 以 使 用 。CSS 使 用 text-align 属性 来 定义 文本 的 水 平 对 齐 方式 ， 该 属性 的 用 法 如 下 : 
| textalign : left | right | center |justify 
| 该 属性 取 值 包括 4 个 :其 中 lf 表示 默认 值 ， 左 对 齐 : right 表示 右 对 齐 :center 表示 居中 对 齐 ; 
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justify 表示 两 端 对 齐 。 
【示例 】 新建 一 个 网 页 ， 保存 为 testhtml， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定义 | 
一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 居中 对 齐 类 样式 。 | 





left{ text-align:left:} 刻 左 对 齐 */ 
.Center { text-align:center: } 已 居中 对 齐 */ 
Tight{ text-align:right:} 启 右 对 齐 */ 
Justify{ text-align:justify:} 证 两 端 对 齐 */ 


然后 在 <body> 标 签 中 输入 两 行 段落 文本 ,并 分 别 使 用 传统 的 HTMLalign 属性 和 标准 设计 中 的 CSS | 
的 text-align 属性 定义 文本 居中 。 | 
<p align="left"> 左 对 齐 </p> | 
<p class="center"> 居 中 对 齐 </p> | 
<p dlass="right"> 右 对 齐 </p> 
<p dlass="justify"> 两 端 对 齐 </p> 


显示 效果 如 图 2.53 所 示 。 
2.5.9 定义 垂直 对 齐 


在 传统 布局 中 ， 一 般 元 素 不 支持 垂直 对 齐 效果 ， 
不 过 在 表格 中 可 以 实现 。 例 如 ， 在 下 面 表格 结构 中 使 
用 td 元 素 的 valign 属性 定义 单元 格 内 包含 的 对 象 垂直 
居中 显示 。 
<table border="1"> 
<tr> 
<td valign="middle"> 垂 直 对 齐 </td> 
</tr> 
</table> 


CSS 使 用 vertical-align 属性 来 定义 文本 垂直 对 齐 问 题 ， 该 属性 的 用 法 如 下 : 

vertical-align : auto | baseline | sub | super | top | text-top | middle|bottom | text-bottom | length 

其 中 ，auto 属性 值 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 ，baseline 表示 默认 值 ， 表 示 将 支持 
valign 特性 的 对 象 内 容 与 基线 对 齐 ; sub 表示 垂直 对 齐 文本 的 下 标 ， super 表示 垂直 对 齐 文本 的 上 标 ; 
top 表示 将 支持 valign 特性 的 对 象 的 内 容 对 象 顶 端 对 齐 ; text-top 表示 将 支持 valign 特性 的 对 象 的 文本 
与 对 象 顶端 对 齐 : middle 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 ; bottom 表示 将 支持 
valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 ，textbottom 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶 
端 对 齐 : length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 起 
的 偏 移 量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 

【示例 】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 

一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 上 标 类 样式 。 


‘super { 
vertical-align:super: 
} 


然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 该 上 标 类 样式 。 
<p>vertical-align 表示 垂直 <span class=" super "> 对 齐 </span> 属 性 </p> 





图 2.53 设置 文本 的 水 平 对 齐 
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a 更 责 设计 与 网 站 过 向 从 入 门 到 将 通 

| 

| 在 测 览 器 中 天 览 ， 则 显示 效果 如 图 2.54 所 示 。 

! 

| 2.5.10 “定义 间距 





Ee mm 





| vertical-align 表 示 委 直 对 齐 属性 
全 上 | css 使 用 letterspacing 属性 定义 字 间距 ， 使 用 
， word-spacing 属性 定义 词 距 。 这 两 个 属性 的 取 值 都 是 长 度 
Note | 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 既 可 以 是 绝对 数值 图 2.54 文本 上 标 样式 效果 


| 又 可 以 是 相对 数值 ， 默 认 值 为 normal， 它 表示 默认 间隔 。 
定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 在 一 起 ， 则 被 word-spacing: 视 为 一 个 单 
词 ， 如 果 汉 字 被 空格 分 隔 ， 则 分 隔 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing: 属 性 此 时 有 效 。 
【示例 】 新 建 一 个 网 页 ， 保存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 
一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 类 样式 。 


| 


| 然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 
| <p class="lspacing">letter spacing ( 字 间 距 ) </p> 
| <p class="wspacing"> word spacing 〈 词 间距 ) </p> 
| 在 浏览 器 中 预览 ， 则 显示 效果 如 图 2.55 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 谓 字 距 就 是 定义 字母 
之 间 的 间距 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 
确 ) 注意 ， 字 距 和 词 距 一 般 很 少 使 用 ， 使 用 时 应 慎重 才 | 
卡 用 户 的 阅读 体验 和 感受 。 对 于 中 文 用 户 来 word spacing ( 词 间距 ) 
说 ,letter-spacing 属性 有 效 , 而 word-spacing: 





属性 无 效 。 
| 图 2.55 字 距 和 词 距 演示 效果 比较 
| 2.5.11 ”定义 行距 

行 间距 ， 是 段落 文本 行 之 间 的 距离 。CSS 使 用 line-height 属性 定义 行 高 ， 该 属性 的 用 法 如 下 。 


line-height : normal | length 
此 中 ，normal 表示 默认 值 ， 一 般 为 12em; length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 
| 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
| 【示例 】 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type="textless'> 标 签 ， 定 义 
| 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 行 高 类 样式 。 
| Ppl{ 

font-size:12pt: 

line-height:12pt: 片 行 间 距 为 绝对 数值 */ 














| } 
| 上 
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font-size: 10pt: | 
line-height:2em:; 上 行 间距 为 相对 数值 */ | 
1 | 
然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 
<hl> 社 戏 </h1> 
<h2> 和 鲁迅 <h2> 





<p class="p1"> 我 在 倒数 上 去 的 二 十 年 中 ， 只 看 过 两 回 中 国 戏 ， 前 十 年 是 绝 不 看 ， 因 为 没有 看 戏 的 意思 和 机 ， 
会 ， 那 两 回 全 在 后 十 年 ， 然 而 都 没有 看 出 什么 来 就 走 了 。</p> 

<p class="p2"> 第 一 回 是 民国 元 年 我 初 到 北京 的 时 候 ， 当 时 一 个 朋友 对 我 说 ， 北 京戏 最 好 ， 你 不 去 见 见 世面 ， 
么 ? 我 想 ， 看 戏 是 有 味 的 ， 而 况 在 北京 呢 。 于 是 都 兴致 勃勃 的 跑 到 什么 园 ， 戏 文 已 经 开场 了 ， 在 外 面 也 早 听 到 冬 
冬 地 响 。 我 们 挨 进 门 ， 几 个 红 的 绿 的 在 我 的 眼前 一 闪烁 ， 便 又 看 见 戏台 下 满 是 许多 头 ， 再 定神 四 面 看 ， 却 见 中 间 
也 还 有 几 个 空 座 ， 挤 过 去 要 坐 时 ， 又 有 人 对 我 发 议论 ， 我 因为 耳 采 已 经 啤 的 响 着 了 ， 用 了 心 ， 才 听 到 他 是 说 “有 
人 , 不行 !” </p> 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 2.56 所 示 。 


人 1+ 各 。 纤 下 


第 一 回 是 民 国 元 站 其 礼 到 北京 的 对 做 ， 当 时 一个 由 对 外 毅 ， 北 训 戏 划 好 ， 公 不 去 见 见 世面 
公 江 起， 看 戏 是 有 对 的 ， 丙 名 在 1 和 攻 的 站 到 什么 国 ， 戏文 已经 开始 
了 ,和 外 表册 时 折 出 和 过 地 。 打 们 控 迷 门 ， 几 个 和 的 人 的 丰 一 由 所， 全 看 册 下 
白 下 其 晤 放学 类 ， 两 认 拓 四 画 香 ， 吉 见 中 辣 忆 还 在 几 个 空 计 要 本 对 ， 双 有 人 对 和 
委 访 论 ， 氟 因为 休 己 经 虹 的 夫 首 了 ， 网 了 心 ， 才 叶 到 全 是 苞 有人， 不 行 ! ~ 





图 2.56 段落 文本 的 行 间距 演示 效果 


2.5.12 ”定义 缩 进 


CSS 使 用 text-indent 属性 定义 首 行 缩 进 ， 该 属性 的 用 法 如 下 : 
text-indent : length | 
length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 在 设置 | 
缩 进 单位 时 ， 以 em 为 设置 单位 ， 它 表示 一 个 字 距 ， 这 样 比较 精确 确定 首 行 缩 进 效果 。 | 
【示例 】 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 | 
一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 段落 文本 首 行 缩 进 2 个 字符 。 


pt | 
text-indent:2em: 。 /* 首 行 缩 进 2 个 字 距 */ 

} | 

然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 | 

<hl> 社 戏 </hl> 

<h2> 和 鲁迅 </h2> 


<p > 我 在 倒数 上 去 的 二 十 年 中 ， 只 看 过 两 回 中 国 戏 ， 前 十 年 是 绝 不 看 ， 因 为 没有 看 戏 的 意思 和 机 会 ， 那 两 回 
全 在 后 十 年 ， 然 而 都 没有 看 出 什么 来 就 走 了 。</p> 
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<p > 第 一 回 是 民国 元 年 我 初 到 北京 的 时 候 ， 当 时 一 个 朋友 对 我 说 ， 北 京戏 最 好 ， 你 不 去 见 见 世面 么 ? 我 想 , 看 
| 戏 是 有 味 的 ， 而 况 在 北京 呢 。 于 是 都 兴致 过 勃 地 跑 到 什么 园 ， 戏 文 已 经 开场 了 ， 在 外 面 也 早 听 到 冬 冬 地 响 。 我 们 挨 
| 进门 ， 几 个 红 的 绿 的 在 我 的 眼前 一 闪烁 ， 便 又 看 见 戏台 下 满 是 许多 头 ， 再 定神 四 面 看 ， 却 见 中 间 也 还 有 几 个 空 座 ， 
| 挤 过 去 要 坐 时 ， 又 有 人 对 我 发 议论 ， 我 因为 耳 条 已 经 啤 的 响 着 了 ， 用 了 心 ， 才 听 到 他 是 说 “有 人 ， 不 行 !” </p> 


例 - | 在 浏览 器 中 预览 ， 则 可 以 看 到 文本 缩 进 效 果 ， 如 图 2.57 所 示 。 


Note | © EIT EE ” 


牧 在 例 烙 上 去 的 二 十 年 中 ， 只 看 过 两 加 中国 戏 ， 前 十 年 是 绝 不 看 ， 因 为 
elit bt 敢 两 四 全 在 后 十 年 ， 钾 而 部 没 有 看 出 什么 未 就 走 


和 二 避 轨 于 各 测 化 守 的 时 本 由 北京 戏 最 
和 生生 和 的 人 也 


本 玫 呈 到 他 是 ; 





图 2.57 文本 缩 进 效果 


2.6 案例 实战 


本 节 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 字体 和 文本 样式 ， 以 提高 实战 技法 和 技巧 ， 快 速 理 
解 CSS 字体 和 文本 属性 的 应 用 。 


2.6.1 设计 网 页 正文 样式 


| 本 例 着 重 介绍 对 正文 文本 样式 的 设置 ， 并 进一步 讲述 CSS 文字 和 段落 的 排版 方法 。 本 例 的 演示 
| 效果 如 图 2.58 所 示 。 


oe Be/ocahos mie oom 


朋 户 看， 基 记 看 ， 革 上 让 了 ， 春 天 入 轩 上 过 了 。 一 切 棚 多 且 肝 阳 芍 件 子 ， 记 应 半生 了 于。 山 部 起 不了， 水 和 起 亲 了 ， 大 PE 各 忆 
末了。 小 妆 信 这 从 二 地 生 外 出 下， 内 人 的 ， 受 妈 的 。 品 了 里 ， 且 时 里 。 王 去 ， 一 大 片 一 大 片 对 的。 业者 ， 搞 共 ,条 商 个 衣 ， 浊 几 巾 球 ， 
/1 才 ， 报 几 丰 过 基 * 内 公主 的 ， 苦 检 坟 幸 的 、 

可 各， 表情， 热 们 ， 作 不 让 流 ， 基 不 让 入， 部 开 务 了 花 攻 天 儿 。 红 及 做 火 ， 剖 的 芝 各， 科 隐 公 全。 花 里 革 看 前 昧 ! 半 了 根 ， 笠 上 作 委 己 经 
半生 儿 ， 吉 儿 ， 打 儿 。 共 下 二 二 在 的 密生 红 专用 者 ， 大 小 的 住 如 未 去 野花 胡 地 时 录 剑 儿 ， 有 名 信 的 ， 泽 名 全 的 ， 科 在 关 从 于 名 
要 二 多 星星， 这 有 避 牙 的 。 “ 柳 示 不 刘 声 和风 ”， 不许 小， 全 母亲 的 手 拉 撕 作 ， 由 里 示 看 些 玫 和 站 况 寺 的 气息， 污 香 青草 半 儿 还 有 各 种 
区 的 理 ， 都 在 各 抽 生 的 守 所 里 和 映 。 台 儿 必 妆 在 时 共计 雪 字 ， 训 兴起 了 ,于 下 | 人 的 空 革 者 认 的 于 让， 蛤 出 上 多 后 于 ， 生 寺中 天 水 
二 和 竺 * 牛 苔 上 妾 的 二 征 ， 这 时 从 亿 水 天 个 寺 的 车 。 于 时 杂 末 的 ， 一 下 谎 旺 三 卫 天 可 别 坟 。 天， 傅 牛 书信 共计 ， 个 江北, 冲 宙 
补 织 看 ， 人 守信 上 全 生 于 一 局 滨 旭 。 柑 叶 人 幸 则 发 高， 小 草包 再 得 肖 人 的 委 - 信 缠 半 修 ， 上 灯 了 ， 一 点 点 其 旦 的 光 ， 类 并 出 一 片 直 基 而 和 平 
的 在。 在 多 下 ， 石 并 过 ， 表 条 着 信 全 信 二 在 的 人 ， 好 到 证 有 工作 的 康 民 ， 反 若 兽 各 全 。 交 们 的 计 宇 本 天 大 大 的 ， 友 十 里 排球 若 - 
于 上 的 第 和 潮 允 了 ， 地 上 入 于 也 参 了 。 扑 里 多 下 ， 字 字 户 户 ， 老 老 小 小 :也 万 条 似 冰 ， 一 个 个 天 寺 未 了。 区 和 好 削 各 失措 提 少 簿 交 ， 
人 “一 于 之 计 丰 于 看”， 风 所 并 儿 ， 下 的 是 丰 夫 ， 有 的 对 着 望 。 午 天 信 列 等 地 的 外 着 ， 闪 未 到 利 才 是 新 鸭 ， 安 生长 春 - 
二 天 人 小 结集， 花村 二 的 ， 基 才 未 若 。 

专 天 保健 性 直 到 生 。 有 从 一 般 人 攻关 和 必 煞 ，4 二 党 们 全 区 





| 2.58 正文 样式 效果 
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【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 。 使 用 <h1> 标 签 定义 文章 的 标题 ， 同 时 增加 了 3 个 <p> 标 签 ， 添 加 段落 文本 。 


<hl><img src="images/logo.gif" > 春 <hl> 


<p> 盼 望 着 ， 了 盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 | 


了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 小 草 偷偷 地 从 土地 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 
一 大 片 一 大 片 满 是 的 。 坐 着 ， 身 着 ， 打 两 个 深 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。 
</p> <p> 桃 树 ， 杏 树 ， 梨 树 ， 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 赶 趟 儿 。 红 的 像 火 ， 粉 的 像 霞 ， 白 的 像 雪 。 花 里 
带 着 甜 味 ; 闭 了 眼 ， 树 上 仿佛 已 经 满 是 桃 儿 ， 杏 儿 ， 梨 儿 。 花 下 成 千 成 百 的 蜜蜂 喻 喻 的 闵 着， 大 小 的 蝴蝶 飞 来 飞 
去 。 野 花 遍地 是 : 杂 样 儿 ， 有 名 字 的 ， 没 名 字 的 ， 散 在 草 从 里 像 眼睛 像 星 星 ， 还 皮 呀 瞬 的 。“ 吹 面 不 寒 杨柳 风 ”， 
不 错 的 ， 像 母亲 的 手 抚摸 着 你 ， 风 里 带 着 些 新 翻 的 泥土 的 气息 ， 混 着 青草 味 儿 ， 还 有 各 种 花 的 香 ， 都 在 微微 润 湿 
的 空气 里 酝酿 。 鸟 儿 将 巢 安 在 繁 花 嫩 叶 当中 ， 高 兴起 来 了 ， 呼 朋 引 伴 的 卖弄 清脆 的 歌喉 ， 唱 出 婉转 的 曲子 ， 跟 清 
风流 水 应 和 着 。 牛 背 上 牧童 的 短笛 ， 这 时 候 也 成 天 叶 亮 的 响 着 。 雨 是 最 寻常 的 ， 一 下 就 是 三 两 天 。 可 别 恼 。 看 ， 
像 牛 毛 ， 像 花 针 ， 像 细 丝 ， 密 密 地 斜 织 着 ， 人 家 屋顶 上 全 笼 着 一 层 薄 烟 。 树 叶 却 绿 得 发 亮 , 小 草 也 青 得 逼 你 的 眼 。 
傍晚 时 候 ， 上 灯 了 ， 一 点 点 黄 晕 的 光 ， 烘 托 出 一 片 安静 而 和 平 的 夜 。 在 乡下 ， 小 路 上 ， 石 桥 边 ， 有 撑 着 伞 慢 慢 走 
着 的 人 ， 地 里 还 有 工作 的 农民 ， 披 着 鞭 戴 着 笠 。 他 们 的 房屋 稀 稀疏 朴 的 ， 在 雨 里 静默 着 。 天 上 的 风筝 渐渐 多 了 ， 
地 上 的 孩子 也 多 了 。 城 里 乡下 ， 家 家 户 户 ， 老 老 小 小 ， 也 赶 趟 似 的 ， 一 个 个 都 出 来 了 。 每 活 舒 活 筋骨 ， 拌 扳 拌 扳 
精神 ， 各 做 各 的 一 份 事 儿 去 。“ 一 年 之 计 在 于 春 ” 刚 起 头 儿 ， 有 的 是 功夫 ， 有 的 是 希望 。 春 天 像 刚 落地 的 娃娃 ， 
从 头 到 脚 都 是 新 的 ， 它 生长 着 。 </p> 

<p> 春 天 像 小 姑娘 ， 花 枝 招展 的 ， 笑 着 走 着 。 </p> 

<p> 春 天 像 健壮 的 青年 ， 有 铁 一 般 的 用 膊 和 腰 脚 ， 领 着 我 们 向 前 去 。</p> 


此 时 的 显示 效果 极其 简单 ， 仅 仅 是 简单 的 文字 和 标题 ， 如 图 2.59 所 示 。 


户 壮 ， 东风 未 了 ， 章 天 的 半 
和 了 。 小 共生 入 绒 人 十 
， 英 着 ， 打 两 个 淮 ， 跟 作用 8， 春 几 


的 价 相 。 丰 里 项 震 耐 味 ， 闭 | 
ea 本 加 
你 ， 


SF 
国 ,证 
春天 像 人 村 的 青年 ， 有 铁 一 般 的 条 兰 和 用 丢 ， 领 兰 忽 人 向 前 二 





图 2.59 网 页 基本 结构 ， 未 加 入 CSS 语句 
第 2 步 ， 定 义 网 页 基本 属性 、 标 题 属性 ， 与 上 一 节 示 例 基本 相同 。 


body { 
margin:20px: 记 边 界 *#/ 
background:url(images/bg-jpe): 证 背景 图 片 */ 
font-size:14px: 证 网 页 字体 大 小 */ 


font-family:" 宋 体 ", Arial, Helvetica. sans-serif 。 。”/* 网 页 字体 默认 类 型 */ 


nf 
font-family:" 黑 体 ": 


.69. 
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~ 提 页 设计 与 网 站 建设 从 入 门 到 精通 


全 |) 
| img{ 
position:relative; 
note | 


| 有 读者 可 能 会 产生 这 样 的 疑问 ， 在 <body> 标 签 中 设置 了 字体 为 宋体 ， 为 什么 在 <h1> 标 签 中 又 设 
| 置 为 黑体 呢 ? 到 底 页 面 会 显示 出 哪 种 字体 呢 ? 

| CSS 是 这 样 规 定 的 ， 下 级 标签 的 属性 可 以 继承 其 父 级 的 属性 ， 在 <.body> 标 签 中 定义 了 字体 为 宋 
| 体 ， 如 果 <h1> 标 签 中 没有 再 定义 字体 属性 ， 那 么 <h1> 标 签 的 字体 属性 会 继承 <body> 中 的 属性 ， 其 内 
| 容 将 会 以 宋体 显示 ， 在 此 例 中 <h1> 标 签 又 重新 定义 了 字体 为 黑体 ， 那 么 标题 将 会 以 黑体 显示 。 
第 3 步 ， 设 置 正文 样式 ， 即 <p> 标 签 中 的 段落 内 容 。 


pl 
line-height:1.6em:; 访 行 间距 */ 

| font-size:13px: 刻字 体 大 小 */ 
| color:#000: 让 字体 颜色 */ 
| text-indent:2em; 必定 义 首 行 缩 进 2 个 字 */ 
| margin:0; 片 四 周 补 白 为 0*/ 
| } 
| 


此 时 <p> 标 签 加 入 了 CSS 设置 , 包括 字体 大 小 和 字体 颜色 和 行 间距 等 , 但 是 并 没有 设置 字体 类 型 ， 
所 以 <p> 将 会 继承 其 父 级 属性 ， 显 示 为 宋体 ， 显 示 效 果 如 图 2.60 所 示 。 


助 让 音 ， 峙 记 千 车 风 灯 了 ,者 天 的 攻关 了 。 一 名 好 信用 能 纹样 于 ， 永 认 枯 张 开 了 最 ， 山 则 间 起 未 了 ， 水 不 起 来 了 ， 太 阳 的 起 红 炬 
来 了 ， 小 蕴 肌 依 地 从 土地 里 机 出 未 ， 岩山 的 ， 旨 绎 的 轩 于 里 ， 下 野 里 。 受 业 ， 一 大 片 一 大 片 东 是 的 w 尘土， 畏 普 ， 打 两 直系 。 强 几 构 球 ， 
村 几 要 澳 ， 提 几 区 关 荣 。 风 径 情人 的 ， 芥 术 绊 损 的 。 

权 衬 ， 埋 村 ， 弄 付 ， 作 不 让 乱 ， 我 不 让 不， 好 开 贡 了 在 直 暂 儿 。 订 纹 角 火 ， 的 的 全 乱 ， 白 的 参 才 。 花生 条 着 而 咱 ， 问 了 眼 ， 材 上 伪 妆 已经 
城 是 改 儿 ， 青 儿 ， 现 儿 。 在下 斋 寺 证 的 宣 桂 世 忆 的 者 省， 大 小 的 相 供 习 直 飞 去 。 宛 加 地 是 ; 们 性 儿 ， 有 有 名 宁 的 ， 没 名字 的 ， 数 在 章 星 全 
直 岳 像 旺旺， 证 到 时 相 的 。 “ 叹 面 不 村 萄 独 所 ”， 不 铠 的 ， 像 号 亲 的 地 杖 谭 看 您， 风 堂 末 春 些 新 各 9 况 寺 的 气 外 ， 肖 各 青 草 针 儿 ， 和 有 各 害 
蔡 昌 音 ， 如 在 生 共 麟 旺 的 空气 半生 多 。 慢 儿 从 全 安 丰 要 花 角 村 当 中 。 而 兴起 末了 ， 娃 肝 引 件 39 雪 半 才 及 久 各 叭 ， 晶 纳入 的 竹子， 现 考 凡 流水 


应 和 普 ， 牛 宵 上 状 间 的 撮 薄 ， 这 时 怎 也 成 天 夫 吉 的 邮 千 。 两 邱 旭 避 沼 的 一 下 广 是 三 册 天 可 列 全 、 看 ， 便 千 毛 ， 像 共计 ， 稳 归 毕 ,市 地 
香 织 兰 ， 人 永 呈 页 上 全 汉 音 一 民 亲 林 叶 却 全 但 发 专 小儿 省 青衣 电信 的 铅 。 合 时 候 ， 上 办 了 ， 一 点 点 条 旦 的 光 ， 姑 托 出 一 片 安生 和平 
的 衣 。 丰 多 下 小 路上 ， 石 析 边 ， 有 反攻 外 全 属相 兰 的 入， 翅 里 还 和 工作 的 家 民 ， 技 竺 琳 若 演化 们 的 库 至 种 黎 玉 的 ， 右 两 里 关 对 车 
天 上 的 风 芝 新 有 允 了 ， 地 上 的 读 子 也 多 了 > 二 里 乡下， 罕 家 产 户 。 老 老 小 小 ,也 引 反 人 的 ， 一 个 个 帮 出 来 了 > 车 活 革 活 中 呈 ， 提 撒拉 措 全 神 ， 
和 类 得 的 一 份 事 儿 类 *。“ 一 年 之 计 埋 于 者 ”， 风纪 涉 儿 ， 友 约旦 册 大 ， 有 的 是 希望 。 香 天 铺 开 等 志 的 广 姓 ， 从 二 到 则 | 孝 是 村 的 ， 它 生长 若 ， 
春天 信 小 站 坟 ， 花 村 把 民 的 ， 关 车主 车。 

香 天 尺 健 计 欠 再 千 ， 有 铁 一 个 的 将 医科 轩 因 ， 把 厅 我 们 各 前 去 。 





图 2.60 最 终 显示 效果 
2.6.2 ”设计 段落 版 式 
| 本 示例 通过 网 上 常见 的 一 则 新 闻 ， 介 绍 了 设置 段落 版 式样 式 的 方法 ， 从 而 进一步 讲述 CSS 段落 
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的 排版 方法 。 本 例 的 演示 效果 如 图 2.61 所 示 。 


英国 史上 最 大 航母 即将 组 装 将 成 英 海军 旗舰 


据 英国 《太阳 报 }》7 月 31 日 报道 ， 庙 国史 上 如 大 的 航 侠 一 “ 伊 而 区 白 女 王 ”级 航 右 的 一 个 关键 主体 模 
块 已 经 完成 ， 即 将 被 运往 苏 格 兰 罗 吕 斯 如 厂 开始 殉 体 组 甘 。 《大同 投 》 军 事 记 者 弗 计 尼 亚 - 更 芭 昌 前 得 到 
特别 授权 ， 矿 现 了 负责 该 模块 生产 的 法 尔 页 德 租 厂 ， 走 近 了 这 起 校 洽 为 “海上 之 城 ”的 巨 舰 。 惠 勒 在 报道 
开篇 就 币 动 地 措 述 造 : “ 当 8000 虽 重 的 桥 块 从 般 厂 扩 币 出 时 ， 场 而 就 像 巨 包 浮 上 水 而 一 般 ， 这 头 由 钢铁 针 
成 的 庄 然 大 钢 融 合 了 高 晰 技术 。 是 壹 大 军事 力量 的 象 王 。” 

法 尔 费 德 贤 厂 的 项 目 负责 人 斯 加 尔 特 - 成 尔 还 表示 ， 这 般 航 母 非常 席 大 。 据悉， 有 人 说 它 大 到 被 称 为 
“21 世 纪 的 请 亚 方 身 ”， 大 到 英国 政府 动用 全 国 6 大 造船 基地 分 别 制 造 答 体 的 主要 模块 ， 大 到 有 上 万 名 技 抽 
参与 于 造 工作 。“ 伊 丽 测 白 女王 ” 涩 航 母 在 很 多 葛 国人 限 中 的 亚 义 仅 次 于 2012 年 伦 画 衣 运 会 。 法 尔 必 全 船 
厂 所 负责 的 是 3 号 下 司 甲 板 模块 的 制 这 。 一 支 由 850 名 顶 兵 强 将 组 成 的 团队 从 2009 年 动工 起 ， 每 天 三 斑 倒 ， 
保证 造 朋 工作 24 小 时 不 间断 。 目 前 该 模块 已 制造 完毕 ， 共 用 挤 饲 材 5600 量 、 电 负 30.3 万 米 、 管 着 1 万 米 ， 重 
于 接近 9000 隆 ， 

从 这 组 玖 字 来 看 ，“ 伊 本 芦 白 女王 ”级 航母 的 这 一 个 模块 就 在 至 重 上 超过 了 号 称 “ 欧 洲 第 一 般 ” 的 英 
国 “ 勇 敢 ”级 45 型 驱 还 规 ， 而 航母 的 排水 量 预计 可 达到 6.5 万 暗 、 

一 名 负责 为 巨 腿 编 可 的 英国 执 空 航天 系 境 公司 的 主管 表示 ”“ 伊 丽 范 白 女 王 ， 级 航母 无 经 会 在 来 来 
的 政 10 年 中 以 英国 海军 旗舰 的 身份 出 现 ， 她 将 在 英国 航海 史上 衬 立 新 的 里 程 御 ”。 由 于 国防 军委 下 调和 财 
政商 全 短缺 ， 英 国 罕 方 着 有 不 少 人 担心 拓 资 应 大 的 航母 过 造 项 目 全 被 由 他。 英国 审计 部 门 的 言 员 此 前 也 对 


图 2.61 设置 段落 版 式样 式 





【操作 步骤】 
第 1 步 , 构建 网 页 结构 。 考虑 到 页 面 中 有 标题 和 正文 两 部 分 , 所 以 页 面 在 结构 上 分 为 上 下 两 部 分 ， 
分 别 是 header 和 main， 用 <div> 标 签 进行 分 块 。 
<div class="container"> 
<div class="header"> 
<h1> 英 国史 上 最 大 航母 即将 组 装 将 成 英 海军 旗舰 </h1> 
<p class="pl">2014 年 8 月 4 日 11: 01 环球 军事 </p> 
</div> 
<div class="main"> 
<p> 据 英国 《太阳 报 》7 月 31 日 报道 ,英国 史上 最 大 的 航母 一 一 “伊利 莎 白 女 王 ” 级 航母 的 一 个 关 
键 主体 模块 已 经 完成 ， 即 将 被 运往 苏格兰 罗 塞 斯 船厂 开始 整体 组 装 。《 太 阳 报 》 军 事 记者 弗吉尼亚 。 惠 勒 日 前 得 


J 
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到 特别 授权 ， 参 观 了 负责 该 模块 生产 的 法 尔 费 德 船厂 ， 走 近 了 这 稻 被 誉 为 “海上 之 城 ”的 巨 舰 。 惠 勤 在 报道 开篇 | 
就 激动 地 描述 道 :“ 当 8000 吨 重 的 模块 从 船厂 被 吊 出 时 ,场面 就 像 巨 鲸 浮 上 水 面 一 般 ， 这 头 由 钢铁 铸 成 的 庞 然 大 | 


物 融合 了 高 新 技术 ， 是 强大 军事 力量 的 象征 。 ”</P> 

<P> 法 尔 费 德 船厂 的 项 目 负 责 人 斯 图 尔 特 “威尔逊 表示 ， 这 艘 航母 非 党 庞大。 据悉， 有 人 说 它 大 到 
被 称 为 “21 世纪 的 诺 亚 方舟 ”， 大 到 英国 政府 动用 全 国 6 大 造船 基地 分 别 制 造船 体 的 主要 模块 ， 大 到 有 上 万 名 技 
师 参与 建造 工作 。“ 伊 丽 莎 白 女 王 ” 级 航母 在 很 多 英国 人 眼中 的 意义 仅 次 于 2012 年 伦敦 奥运 会 。 法 尔 费 德 船厂 所 


负责 的 是 3 号 下 层 甲板 模块 的 制造 。 一 支 由 850 名 精兵 强 将 组 成 的 团队 从 2009 年 动工 起 ， 每 天 三 班 倒 ， 保 证 造 ， 
船 工作 24 小 时 不 间断 。 目 前 该 模块 已 制造 完毕 ， 共 用 掉 钢材 5600 吨 、 电 缆 30.3 万 米 、 管 道 1 万 米 ， 重 量 接近 | 


9000 吨 。</p> 
<p> 从 这 组 数字 来 看 ,“ 伊 丽 莎 白 女 王 ”级 航母 的 这 一 个 模块 就 在 重量 上 超过 了 号 称 “ 欧 洲 第 一 舰 ” 
的 英国 “勇敢 ”级 45 型 驱逐 舰 ， 而 航母 的 排水 量 预计 可 达到 6.5 万 吨 。</P> 


<P> 一 名 负责 为 巨 舰 编 程 的 英国 航空 航天 系统 公司 的 主管 表示 : “伊丽莎白 女王 ”级 航母 无 疑 会 在 | 
未 来 的 数 10 年 中 以 英国 海军 旗舰 的 身份 出 现 , 她 将 在 英国 航海 史上 树立 新 的 里 程 碑 ”。 由 于 国防 军费 下 调和 财政 | 


资金 短缺 , 英国 军 方 曾 有 不 少 人 担心 耗资 庞大 的 航母 建造 项 目 会 被 叫 停 。 英国 审计 部 门 的 官员 此 前 也 对 这 稻 巨 舰 
的 未 来 表示 了 担心 ， 称 其 资金 需求 可 能 会 舰 升 到 预算 的 两 倍 。 伦敦 已 经 考虑 为 “伊丽莎白 女王 ”级 航母 购 进 更 便 
宜 的 装备 ， 这 一 变动 为 审计 和 财政 部 门 所 欢迎 ， 却 为 军 方 所 反对 。 </p> 

</div> 
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一 一 一 一 一 AN、 网 和 no 计 与 网 站 建设 从 入 门 到 糙 通 


<li><a hre 伍 "#"> 日 《防卫 白皮书 》</a></li> 

<li><a hre 人 "> 安理会 通过 声明 谴责 叙利亚 当局 对 平民 用 武力 </a></li> 
<li><a hre 人 "> 巴 34 岁 美女 外 长 惊艳 访 印 打通 印 巴 对 话 之 门 <Ja></li> 
<li><a hre 伟 "#"> 叙 利 亚 局 势 紧张 安理会 闭 门 磋商 </a></li> 





</div> 


<li><a hre 仁 "#"> 美 化 学 武器 库 发 生 章 子 气 泄漏 </a></li> 

<li><a href="#> 美 提高 债务 上 限 同时 提升 军费 为 确保 霸主 地 位 </a></li> 
<li><a href="#> 加 拿 大 与 美国 海军 联合 在 北极 展开 军事 使 命 </a></li> 
<li><a href="#> 阿 富 汗 和 平 进程 疑问 重重 巴 美 合作 但 合力 有 限 </a></li> 


在 整体 的 container 框架 下 ， 页 面 分 为 header 和 main 两 部 分 。 在 header 下 ， 分 别 定义 了 <hl> 标 
签 和 <p> 标 签 。 在 main 下 ， 分 别 定义 3 个 <p> 标 签 的 文本 段落 。 此 时 的 显示 效果 极其 简单 ， 仅 仅 是 简 
单 的 文字 和 标题 ， 并 没有 友好 的 界面 ， 如 图 2.62 所 示 。 


英国 史上 最 大 航母 即将 组 装 将 成 英 海军 旗舰 


2014 年 明 4 日 11，01 环球 军事 
ee 英国 史上 最 大 的 及 而 王 " 郁 航 如 的 一 个 关键 主体 板 坎 己 经 完成 ， 即 兹 丁 运往 苏 格 
i 
力量 的 象征。 
0 i 生生 提 秋 ， < 全 大 到 被 称 为 的 二 绕 


。" 眉 责 苏 白 女王 "经 
直 850 名 畏 兵 强 将 组 


-从 | 一 让 | 人 从 2009 
Fa RE EE ， a 电 纵 303 万 米 、 塌 记 1 万 米 ， 


从 这 组 数 地 来 看 ，“ 伊 丽 功 白 女 王 邦 航 母 的 这 一 个 模块 儿 在 重量 上 超过 了 号 称 - 葡 州 第 一 舰 -的 英国 ` 勇 到 坝 45 型 肛 还 损 ， 而 航 避 的 
排水量 守 二 研 这 SG 5 区 。 


一 名 并 瑰 局 各 入 各 的 和 时 忆 训 胃 天 基 统 合同 的 主 罗 才 未 女王 : 无疑 斌 在 未 本 的 蛤 1 年 中 以 J 半 国 海军 放 投 | 一 
份 出 现 ， 邓 将 在 基 国 院 洛 史上 于 程 香 ” 大 痪 庇 大 的 航 配 : 

适 项 目 会 被 bf 停 . | 由 计 人 二 和 a 
“所 骨 生生 更 全 家 提 条 备 ， 这 一 交 动 时 所 军 方 其 反对、 





图 2.62 网 页 基本 结构 
第 2 步 ， 定 义 网 页 基本 属性 。 


body{ 
background-color-#fle2d9: 
font-family:" 宁 体 ": 


§ 
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) 
.Container{ | 
‘border:2px solid #clbebc: | 
background-color:#cOfSef: | 一 咕 
} 





在 以 上 代码 中 ，body 标签 定义 了 背景 色 、 字 体 类 型 和 对 齐 方 式 等 属性 。 在 container 中 定义 了 
container 容器 的 宽度 为 800px， 另 外 使 用 border:2px solid #clbebc 语句 为 container 容器 的 四 周 添加 了 
边框 ， 这 种 添加 边框 的 方法 是 一 个 由 3 个 部 分 组 成 的 语句 : 宽度、 式样 、 颜 色 。 读 者 可 以 试 着 改变 它 
们 的 值 以 产生 不 同 的 效果 。 需 要 特别 指出 的 是 ， 在 <body> 标 签 中 定义 了 text-align:center， 在 container 
中 定义 了 margin:0px auto， 两 条 语句 配合 使 用 ， 目 的 是 使 container 容器 水 平 居 中 ， 而且 只 有 两 条 语句 
配合 使 用 才 使 网 页 有 更 强 的 兼容 性 。 


< 负 注 意 : 只 在 <body> 标 签 中 定义 text-align:center, 而 不 在 container 中 定义 margin:0px auto， 只 能 在 
Firefox 浏览 器 中 居中 显示 , 不 能 兼容 正 。 只 在 container 中 定义 margin:0px auto 而 不 在 <body> 
标签 中 定义 textralign:center， 会 使 有 些 低 版 本 下 无 法 兼容 。 显 示 效 果 如 图 2.63 所 示 。 


英国 史上 最 大 航母 即将 组 装 将 成 英 海军 旗舰 
2014 年 8 月 4 日 11，01 环球 军事 
太阳 损 》7 月 51 日 报 返 ， 英 国史 上 最 大 的 院 母 一 一 “ 伊 表 夷 白 女 王 ” 级 航母 的 一 个 关键 主 牢 模块 已 经 


据 王国 
成 生生 直 的 二 四 由 | 开 抽 引 休 得 站 亏本 阳 报 》 手 事 记 寿 章 十 尼 卫 . 囊 革 日 前 得 到 特别 白 权 ， 人 
, 况 责 该 模块 生产 的 法 尔 费 德 骨 三 ， 走 近 了 海上 之 城 ” 的 王 舰 。 惠 勒 在 操 道 开 乱 六 


“ 当 8000 吨 音 的 模块 从 船厂 被 吊 出 时 ， 场 面 就 全 和 让 这 关 由 币 铁 锋 成 的 庞然大物 全 了 | 让， 
全 


法 尔 短 般 三 的 El 国外 特 这 巾 陆 全 i ， 握 悉 ， 有 人 说 已 大 到 祖 生 为 2 
Ty ,大 到 抽 移 中 夺 下 是 Ee 区 
7 A 往外! 和 Ep 
好 大 组 成 的 团队 从 2009 竹 动工 起 ， 符 天 三 班 便 ， A 间断 。 目 前 该 
Ee 共用 神 钢 村 5600 吨 、 en 3 万 米 、 管 着 1 万 米 ， 重 量 接 这 9000 叶 。 


从 这 组 效 字 来 看 ，“ 亿 而 功 白 女王 ”级 航母 的 这 一 个 模块 钛 在 重量 上 起 过 了 号称 “欧洲 第 一 舰 ”的 英国 “ 勇 做 ” 级 
4 型 驱逐 舰 ， 市 航母 的 排水 量 预 计 可 达到 8. 5 万 吨 。 


A 

BS 担 了 司 建 计 项 目 二 被 叫 停 。 英 国 审计 邹 门 的 宣 ; 也 对 这 直下 了 担心 

A 
审计 和 财政 部 所 欢迎 ， 却 为 军 方 所 反对 。 





2.63 设置 网 页 的 基本 属性 
第 3 步 ， 设 置 header 部 分 样式 。 


width:800px: /*header 宽度 */ | 
border-bottom: 1px solid #clbebe: 诺 下 边框 *#/ | 
} | 
mf | 
font-family:" 黑 体 ": | 
margin-top:50px: 让 标题 文字 上 方 补 白 为 50px*/ | 
} 8 
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ns 


| color:#000099:; 
| text-align:center: 
.| 
全 ~ | 在 上 方 代码 中 ， 首 先 定义 了 header 容器 的 样式 ， 并 在 容器 的 下 方 添加 一 条 宽 为 1px 的 边框 。 在 


Note | <hl> 标 签 中 定义 了 标题 的 字体 类 型 ， 以 及 用 margin-top:50px 语句 定义 标题 文字 上 方 补 白 为 50px。 用 
headline 定义 了 副标题 样式 。 显 示 结 果 如 图 2.64 所 示 。 
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据 尖 国 《太阳 报 >7 月 31 日 报道 ， 英 国史 上 最 大 的 综 久 一 | 经 完 
到 性 ， 厂 开始 束 休 扯 装 i 前 得 到 特别 授权 ， 孝 观 了 

德 般 三 ， 和 囊 勒 在 招 返 开 ] 这 ， 
时 到 的 模 过 从 肌 厂 饭 员 出 时 ， 场 -3 ee a 这 关 由 钢铁 铸 克 的 许 然 大 和 融合 了 高 新 技术 ， 


re 的 项 目 负 责 人 斯 图 外 和 煌 . 威 尔 和 表示， 这 阜 阴 后 非常 谋 大 ， ee ey | 
本 | 搓 国政 府 可 地 分 别 制 千 船体 “ 仇 


| i 目 六 该 
3 ee 电线 30 3 万 米 、 管 道 1 万 米 


从 这 组 数字 来 看 ， A eh 的 英国 “勇敢 ”级 
5 弄 ! 哎 评 枫 ， 而 杭 寻 的 排水 量 巴 计 可 达到 6. 5 


全 国 6 大 这 知 基 | 的 主要 模块 ， 大 到 有 - 
1 全 到 Se A T2012 和 人吉 全 二 全 全 A 后 怕人 
a 


并 国字 可 天 统 公 ,全 级 无 基 会 在 来 的 才 10 年 中 以 

A te 全 二 

et en et 

称 其 资金 需求 可 能 会 裔 和 到 奖 算 的 两 售 。 伦 款 已 经 考虑 为 “ 仇 面 苏 白 女王 ” 机 六 轩 下 全 的 六 人 这 一 交 动 为 
寓 计 和 财政 部 门 所 欢迎 ， 却 为 军 方 所 反对 ， 





2.64 设置 header 部 分 样式 


| 从 图 2.63 可 以 看 出 ， 网 页 的 基本 样式 已 经 初 见 端倪 ， 但 是 段落 文本 还 没有 进行 设置 ， 接 下 来 对 
| main 部 分 的 段落 添加 CSS 样式 控制 。 


| 
| .main{ 
| width:740px: /*main 的 宽度 */ 
| text-align:left: 
| margin:20px 30px 40px 30px; /*main 容器 四 周 的 补 白 */ 
| } 
| .main p{ 
| font-size:15px; 
| text-indent:2em: 
| line-height:1.6em: 
} 


! 

| 在 以 上 代码 中 ，main 定义 其 宽度 为 740px， 有 的 读者 可 能 会 问 ， 为 什么 在 container 中 定义 了 宽 
| 度 为 800px， 这 里 为 什么 是 740px 呢 ? 因为 在 main 中 定义 了 margin:20px 30px 40px 30px， 也 就 是 上 
| 方 补 白 为 20px， 右 方 补 白 为 30px， 下 方 补 白 为 40px， 左 方 补 白 为 30px， 左 右 的 补 白 分 别 是 30px， 
相 加 〈740px+60px) 就 是 800px。 在 main 下 的 p 标签 中 ， 定 义 了 文本 的 水 平 对 齐 为 左 对 齐 。 显 示 效 
| 果 如 图 2.65 所 示 。 
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英国 史上 最 大 航母 即将 组 装 将 成 英 海军 旗舰 


2014 年 8 月 4 日 11: 01 环球 军训 


所 英国 < 太阳 报 》7 月 1 日 近 道 。 英国 史上 好 大 的 圾 三 一 一 “ 协 而 中 白 廊 王 ”级 杭 续 的 一 个 关键 六 并 次 已 
经 完成 ,即将 被 运往 苏 棕 三 罗 硅 电 舰 厂 开始 整体 组 获 。<< 六 帮 报 邓 插 事 记 考 邵 言 尼 亚 - 护 革 日 副 和 到 桂 别 授权， 
多 现 了 负责 该 模 霓 生 产 的 法 尔 属 生息 厂 ， 走 近 了 这 舰 祝 营 为 “ 声 上 之 霸 ” 的 巨 拆 。 如 所 在 报道 开篇 就 洛 动 地 指 
述 道 ; “ 当 8000 号 重 的 模块 从 般 厂 被 吊 出 时 ， 场 而 就 像 巨 苗 译 上 水 画 一 般 ， 这 头 由 钢 儿 等 成 的 施 基 文物 加 合 了 高 
新 技术 ， 是 强大 诗 事 力 择 的 钊 征 - ” 


法 尔 费 德 知 厂 的 顶 县 人 责 人 斯 图 尔 特 ， 戚 尔 想 表示 ， 这 款 航 母 耻 党 应 大 ”据悉 ， 有 人 说 它 大 到 祯 称 为 “21 世 
纪 和 的 请 亚 方 贱 ”， 大 到 英国 政府 动用 全 国 6 大 造船 及 地 分 别 刊 适 策 广 的 王 要 模块 ， 大 到 有 上 万 名 技师 多 与 建造 工 
作 *。 “ 伊 丽 东 日 女王 ”级 航母 在 很 多 英国 人 耻 中 的 语义 识 次 于 2012 年 化 至 办 运 会 。 法 尔 费 简 弟 厂 所 负责 的 是 3 号 
下 基 甲 概 模 块 的 制造 。 一 支 由 a50 名 精 乒 强 将 组 成 的 团队 从 2009 年 功 工 起 ,每 天 三 指 测 ， 保 证 造船 工作 24 小 时 不 
间断 目前 该 模块 已 制造 完 兴 ， 共 用 济 锅 村 3600 吨 ， 电 缠 30, 3 万 扩 、 车 道 ; 万 米 ， 重 旦 奖 近 3000 兄 - 


从 这 组 糙 字 未 看 ，“ 伊 丽 汞 日 女王 ” 红 航 等 的 这 一 个 民 具 就 在 重量 上 起 过 了 号 和 “ 欧 小 第 一 和 ”的 英国 “ 勇 
邓 ” 级 所 型 驱 还 舰 ， 而 畔 纪 的 挤 水 量 预 汗 可 达到 5.5 万 号 。 


一 吉 负 责 为 巨 租 编 径 的 英国 航空 纹 天 系统 公司 的 主管 表示 ““ 伊 丽 功 白 女王 ”级 航 嫩 无 短 会 在 未 末 的 数 10 
年 中 以 英国 沟 军 组 假 的 务 份 出 现 ， 她 将 在 芙 国 航海 史上 宙 立 新 的 于 程 碑 ”。 由 于 国防 军 荐 下 调和 时政 资 鲍 二 
1 方 曾 有 不 少 人 担心 耗资 诬 大 的 航 瑟 建造 项 目 会 污 叫 停 。 英国 南 计 邵 门 的 启 员 此 前 也 对 这 者 豆 般 的 未 来 
表示 了 担心 ， 称 其 资 色 需求 可 能 会 识 升 到 知 牙 的 两 信 。 伦 神 已 经 革 虑 力 “ 伊 丽 林 白 女 王 ” 级 级 号 购 设 更 便 真 的 六 
高 ， 这 一 变动 为 南 计 和 财政 部 门 所 欢 开 ， 却 为 军 方 所 反对 。 





图 2.65 最 终 显示 效果 


2.6.3 设计 单 页 图 文 混 排版 式 


本 示例 通过 网 上 常见 的 一 则 新 闻 正 文 页 ， 介 绍 如 何 设置 段落 版 式样 式 的 方法 ， 进 一 步 讲述 CSS 
段落 的 排版 方法 。 本 例 的 演示 效果 如 图 2.66 所 示 。 


CE 3 hp ocahoewmy noncer mr P- SC 


人 口红 利 持续 衰减 “未 富 先 老 ” 考 验 中 国 


过 :we*， 伴随 下 中 共 主导 的 册 于 开放 下 新 深 比 ， 中 国 在 通信 疯 代 北 和 发 法 蓝 兴 的 尖 站 上 一 部 “ 飞 至 ”但 历史 无 汉 孙 放 

所 制 : 国 革 六 融 危 机 的 省 生 ,以 及 日 各 各 霸 化 的 人 记 苇 构 ， 中 国 反 济 发 村 乾 巡 信 多 闫 蚤 ， 让 中 全 后 识 到 竺 到 发 展 方式 已 剂 
古本 强 . 中 共 中 央 总 村 忆 震 析 诲 在 流 及 比 问题 fj， 首 军 风 地 连用 了 个“ 加快” 中 国 让 利 院 人 口 与 闪避 有 济 研 究 所 到 所 长 张 计 履 
在 挤 各 中 白 注 忆 者 平 功 时 大 示 ， 到 005 年， 中国 失 人 口 江 和 也 到 消失 。 林 观 纪 济 的 皇 下 ， 站 国 绢 力争 在 比 之 表 守 成 居 村 万 式 


NE。 香 则 ， 训 只 烤 委 在 半 尖 ,陷入 “中 等 怕 入 隐 渡 ”。 中 国家 绕 计 局 避 条 得 要 四 示 , 目前 中 国 so 岁 只 上 人 口 占 总 人 口 时 的 
.3 隆 ， 比 1 和 关上 升 了 工人 百分点 。 硅 体 表 示 ， 人 口交 化 坟 基 不 可 谤 球 。 老 村 化 2 入 这 来， 合生 各 “人口 红利/ 溃 持 屿 过 
若 。 如今 ， 中 国 已 汪 是 各 出 “不 高 先 老 ” 特征， 其 5 济 发 展 将 面 愉 6 的 折 。 。。 张 桔 人 


人 人 RS 人 有 T 扫 贡 | 


A 
者 化 的 加 条 ， 中 国人 口 特点 后 各 出 芝 动 十 圭 人 口 下 隐 队 及 让 全 总 本 比 上 和 的 站 汉 。 台 车 全 指出 ， 芳 克 力 民 寺 不 青 汪 尖 不 新 ,中国 


图 2.66 单 页 图 文 混 排 版 式 





【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 。 使 用 <div> 标 签 ， 设 置 container 为 页 面 整体 框架 ， 在 此 框架 下 分 别 定义 
了 <hl> 标 签 、3 个 <p> 标 签 ， 在 p 标签 中 又 定义 了 <span> 标 签 ， 目 的 是 为 文本 添加 特殊 效果 。 
<div class="container"> 
<h1> 人 口红 利 持续 衰减 “未 富 先 老 ”考验 中 国 </h1> 
<p ><span class="sh"> 过 </span> 去 30 多 年 ， 伴 随 着 中 共 主 导 的 改革 开放 不 断 深化 ， 中 国 在 通 往 现代 化 





*。75 。 
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和 民族 复兴 的 道路 上 一 路 “ 飞 奔 ”。 但 历史 无 法 简单 复制 。 国 际 金 融 危机 的 冲击 ， 以 及 日 趋 老 龄 化 的 人 口 结构 ， 
中 国 经 济 发 展 遭 遇 众 多 瓶颈 ， 让 中 共 意 识 到 转变 发 展 方式 已 刻不容缓 。 中 共 中 央 总 书记 胡锦涛 在 谈 及 此 问题 时 ， 
曾 罕 见地 连用 了 50 个 “加 快 ”。 中 国 社 科 院 人 口 与 劳动 经 济 研究 所 副 所 长 张 车 伟 在 接受 中 新 社 记者 采访 时 表示 ， 
到 2025 年 ， 中 国 的 人 口红 利 将 彻底 消失 。 要 实现 经 济 的 腾飞 ， 中 国 必须 力争 在 此 之 前 完成 发 展 方式 的 转变 。 否 
则 ,就 只 能 停 在 半路 ,陷入 “中 等 收入 陷阱 ”。 中国 国家 统计 局 最 新 数据 显示 ， 目 前 中 国 60 岁 及 以 上 人 口 占 总 人 
口 数 的 13.26%， 比 10 年 前 上 升 了 <span class="s1">2.93</span> 个 百分点 。 张 车 伟 表 示 ， 人 口 变化 趋势 不 可 逆转 。 
老龄 化 加 速 而 来 ， 意 味 着 “人 口红 利 ” 将 持续 衰减 。 如 今 ， 中 国 已 经 显现 出 “未 富 先 老 ” 特 征 ， 其 经 济 发 展 将 面 
临 严峻 的 考验 。 <img src='images/1.jpg>  ”” 张 车 伟 解 释 说 , 中 国人 口 抚养 比 自 20 世纪 60 年 代 中 期 起 开始 下 降 
但 由 于 种 种 因素 ,中 国 当时 并 没 能 将 潜在 人 口红 利 转变 为 现实 推动 力 。 他 指出 ,改革 开放 以 来 ， 中 国之 所 以 能 够 


| 创造 世界 发 展 史 上 的 奇迹 , 很 重要 的 一 个 原因 ,就 是 将 经 济 发 展 模式 与 人 口 结构 特点 相 结 合 ,发 挥 劳动 力 资源 充 


沛 的 优势 ， 通 过 发 展 劳动 密集 型 产业 和 出 口 导向 ， 推 动 国民 经 济 高 速 增长 。 在 上 述 发 展 模式 的 推动 下 ， 中 国 经 济 
从 频 临 衣 省 边缘 发 展 为 总 量 跃 居 世界 第 二 ， 人 民生 活 从 温饱 不 足 发 展 到 总 体 小 康 。</p> 

<p> 但 金融 危机 后 ， 发 达 国家 过 度 消费 拉动 全 球 经 济 增长 的 需求 动力 结构 正在 发 生变 化 。 伴 随 着 老龄 化 
的 加 深 , 中 国人 口 特点 显现 出 劳动 适龄 人 口 下 降 以 及 社会 总 抚养 比 上 升 的 趋势 。 张 车 伟 指 出 ， 劳 动力 供给 不 再 源 
源 不 断 , 中 国 经 济 要 继续 向 前 迈进 , 必须 将 过 去 那 种 依靠 要 素 投入 刺激 经 济 增长 的 发 展 模式 转 到 依靠 生产 率 提高 
及 技术 进步 推动 的 经 济 增长 上 来 。 不过, 一 个 总 量 近 <span class="s2">40 万 亿 元 人 民 币 </span> 的 经 济 体 要 完成 转 
身 绝 非 易 事 。 经 济 学 家 吴 敬 柬 回忆 说 ， 早 在 1981 年 中 国 国务 院 就 曾 提出 ， 要 把 经 济 发 展 转移 到 效率 提高 的 基础 
上 去 。 但 多 年 来 的 实践 表明 ,转型 的 路 上 会 有 着 诸多 挑战 。 在 张 车 伟 看 来 , 最 大 的 挑战 在 于 创新 。 他 表示 , 目前 ， 
中 国 经 济 依靠 外 部 驱动 的 特征 比较 明显 ,技术 来 源 于 外 部 ,产品 销 往外 部 ,这 和 中 国 创新 能 力 的 不 足 有 密切 的 关 
系 。 未 来 ， 必 须 加 强 创 新 能 力 的 培养 。 扩 内 需 也 是 当务之急 。 张 车 伟 指 出 ， 中 国 要 确保 内 需 的 增长 ， 需 要 做 好 三 


| 件 事情 。 首 先 ， 加 快 劳动 者 工资 的 增长 ， 至 少 与 劳动 生产 率 的 增长 同步 。 其 次 ， 健 全 社会 保障 体系 ， 避 免 有 钱 不 


敢 花 钱 的 现象 。 再 次 ， 要 进行 完全 的 城市 化 。 目 前 进入 到 城市 的 人 都 是 年 轻 的 人 ， 农 村 的 留守 老人 生活 艰难 。 今 
后 城市 化 ， 要 让 老年 人 也 进入 到 城市 当中 去 。</p> 
<p> 此 外 ， 政 府 职能 的 转变 也 十 分 关键 。 张 车 伟 说 ， 中 国 此 前 的 增长 和 政府 的 主导 是 密 不 可 分 的 。 但 今 
后 ， 政 府 应 该 把 主要 精力 从 关注 经 济 增长 转移 到 为 社会 提供 公共 服务 上 来 。</p> 
</div> 
在 整体 的 container 框架 下 ， 分 别 定义 了 <hl> 标 签 和 3 个 <p> 标 签 的 文本 段落 。 此 时 的 显示 效果 极 
其 简单 ， 仅 仅 是 简单 的 文字 和 标题 ， 并 没有 友好 的 界面 ， 如 图 2.67 所 示 。 


国 已 经 显现 出 "未 富 先 老 特征 ， 革 经 济 涯 暴 将 面临 产 埃 全 
比 让 20 攻 纪 60 征 代 : 始 下 降 ， 但 让 中 | 


界 党 要 的 一 个 原因 ， 
癌 ， 推 动 国民 经 入 高 这 增长 。 在 上 过 发 展 模 式 的 推动 





图 2.67 网 页 基本 结构 
第 2 步 ， 定 义 网 页 基本 属性 。 
body{ 
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font-family:" 宋 体 ": 
text-align:center: 
background-color-#445545: 
} 
.Container{ ! 
width:850px; | 医 


ee 
Iargin:0pX auto; 


padding:40px 40px 80px 40px: 
backeround-color:#CCCCCC: 


) 六 





} 


在 以 上 代码 中 ，body 标签 定义 了 背景 色 、 字 体 类 型 和 对 齐 方 式 等 属性 。 在 container 中 定义 了 
container 容器 的 宽度 为 850px， 另 外 使 用 border 语句 为 container 容器 的 四 周 添加 了 边框 。 与 2.6.2 节 
的 示例 相同 ， 在 <body> 标 签 中 定义 了 text-align:center， 在 container 中 定义 了 margin:0px auto， 两 条 语 
句 配合 使 用 ， 目 的 是 使 container 容器 水 平 居 中 。 完 成 此 步骤 后 ， 页 面 中 的 属性 设置 完毕 ， 显 示 效 果 
如 图 2.68 所 示 。 
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a 
书记 二 名 济 在 并 及 此 人 “加 快 ”。 中 国 
天 村 站 条 于 科 2 到 2025 年 ， 有 
人 和 全 比 1 年 人 下 
剖 标 着 。 人 口红 利 ” 将 持续 训 裕 。 训 信 ， 中 国 已 经 显现 出 “未 富 





图 2.68 设置 网 页 的 基本 属性 
第 3 步 ， 设 置 标题 样式 。 
hi{ 
font-weight:bold: 
color:#000066: 
margin:20px auto: /# 标 题 文字 上 边界 和 下 边界 为 20px*/ 


} 

在 上 方 代码 中 ， 首 先 定义 了 标题 的 字体 粗细 为 bold， 用 margin:20px auto 语句 定义 标题 文字 上 边 
界 和 下 边界 为 20px， 左 右边 界 为 浏览 器 自动 适应 宽度 。 显 示 结果 如 图 2.69 所 示 。 

第 4 步 ， 从 图 2.69 可 以 看 出 ， 网 页 的 基本 样式 已 经 初 见 端 倪 ， 但 是 段落 文本 还 没有 进行 设置 ， 
接 下 来 对 段落 添加 CSS 样式 控制 。 


.Container p{ 
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人 口红 利 持续 衰减 “未 富 先 老 ” 人 


过 去 30 多 年 ， 作 随 善 中 共 主导 的 改革 开放 不 断 深化 ， 中 国 在 通 往 现代 化 和 民族 复兴 的 道路 上 一 路 “ 飞 弃 ”- 
机 的 和 冲击， 以 及 日 意志 难 世 的 人 口 结构 
书记 | 六 此 I 
1 


时 复制 > 四 本 和 
人 | 1 
否则 
人 pe 

Ti 目 


| 图 2.69 设置 标题 样式 
| 

| 在 以 上 代码 中 , p 标签 定义 了 所 有 段落 的 样式 , 包括 字体 大 小 、 对 齐 方 式 、 行 间距 等 , 用 margin:0 
| 和 padding:0 来 定义 段落 之 间 的 间距 为 0。 在 pl 中 设置 了 首 行 缩 进 , 这 一 设置 专门 针对 的 是 第 二 个 <p> 
| 标签 和 第 三 个 <p> 标 签 ， 因 为 第 一 个 <p> 标 签 有 一 个 首 字 下 沉 的 效果 ， 所 以 不 需要 进行 首 行 缩 进 的 设 
置 。 显 示 效 果 如 图 2.70 所 示 。 
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过 去 3 哆 年 ， 全 着 关中 共 主导 的 改革 开放 趟 这 化 ， 中 国 在 送 往 现代 化 和 民族 复兴 前 老 防 上 一 卡 ” 飞 亩 " 。 但 历史 无 法 简单 复制 。 国际 金 
可 危机 的 冲击 ， 以 及 日 灶 志 时 化 的 人 口 结 和 ， 中 国 上 济 类 展 坦 通 从 多 并 预 ， 全 让 其 中 央 时 书记 机 
洲 在 读 及 此 癌 于 时 ， 曾 衬 风 地 连用 了 30 个 “加快 ”。 中国 计 补 院 人 口 己 劳 引 E 访 旗 完 所 到 所 长 旨 : 





| 图 2.70 设置 段落 文本 


*。78 。 


第 了 章 美化 网 页 文 村 一 | 
pd | 


第 5 步 ， 设 置 图 片 样式 。 





img{ 
width:200px; 
border:#339999 2px solid: 
float:left: 
Iargin:10pX: 

} 


图 片 的 相关 内 容 在 后 面 的 章节 会 详细 介绍 , 这 里 只 做 一 个 简单 的 叙述 , width 定义 了 图 片 的 宽度 ，| 
border 语句 为 图 片 添加 了 2px 宽 的 边框 , float:left 是 对 图 片 进行 左 浮动 , margin: 10px 表示 图 片 四 周 补 | 
白 为 10px。 显 示 效果 如 图 2.71 所 示 。 | 
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过 去 30 多 年 ， 伴 随 着 中 共 主 导 的 改革 开放 不 断 深化 ， 中 国 在 通 往 项 羽化 和 民族 复兴 的 消 路 上 一 路 ““ 奔 ”。 介 历史 无 法 简单 复 材 。 国 奈 合 
和 亏 机 的 冲击 ， 以 及 日 趁 老 峙 沙 的 人 口 荡 构 ， 中 国 S 济 穴 展 惠 光 作 多 车 巴 ， 让 中 共 塌 如 到 竺 训 发 展 方式 已 刘 不 名 缓 。 中 共 中 央 总 书记 胡 刍 
清册 留守 见地 痊 用 了 60 个“ 加快 ”。 中国 让 利 院 人 | 所 长 凿 车 仿 在 接受 中 新 注 记者 采访 时 表示 , 到 
2035 年 ， 中 国 的 人 口红 利 将 条 谨 湖 夫 * 要 实现 经 济 的 瞄 飞 ， 中 网 尼 岳 力争 在 此 之 前 志 成 类 展 方式 的 污 迹 。 再 刚 ， 藉 只 能 停 在 站 政 ， 隘 入 
“中 等 收入 陷 悍 ”* 中 国 国家 六 计 局 大 新 灶 沁 显示 ， 目 前 中 国 60 交 及 愉 上 人 口 点 总 人 口 对 的 14, 26%， 比 10 年 前 上 升 了 2. 69 个 百分点 。 张 车 
伟 表 示 ， 人 口 变 北 趋势 不 可 适 转 。 老 闪 世 加 束 而 未 ， 融 听 看 “人 口红 利 ” 将 持续 衰减 如今 中 国 己 经 显 宙 出 “未 襄 先 老 ” 特 征 ,其 经 济 


加 腔 , 中 国人 口 特点 灵 现 出 范 塘 着 纬 人 口 下 降 涂 及 社会 总 抚养 比 上 升 的 入 势 * 张 车 伟 指 出 ， 劳 起 力 供 
冶 不 再 源 淹 不 析 ， 中 国 经 济 村 维 殷 户 尖 三 进 ， 几 筑 将 过 去 部 种 信 掌 要素 挫 入 利 | 洲 经 六 身长 的 几 医 根 式 针 到 依靠 生产 率 捍 高 及 技术 进步 推 
的 经 济 拉 长 上 来 " 不过， 一 个 总 旺 近 40 万 亿 元 人 民 币 的 经 济 们 葛 元 成 针 身 给 非 舞 事 ”经济 拖 家 员 灿 甘 回忆 说 ， 早 在 1981 秆 中 国医 公信 就 着 
提出 ， 枫 押 经 济 发 展 转 牧 到 效率 标高 的 肝 础 上 去 * 但 多 年 来 的 六 吕 表 明 ， 和 转型 的 路 上 富有 有着 诸多 挑 成 。 在 张 车 人 看 来 ， 最 大 的 提 岂 在 二 全 
新 ， 他 表示 ， 电 前 ， 中 国 经 济 依 皇 外 人 h3E 动 的 特征 比较 明星， 技术 来 源 于 外 部 ,产品 朱 往 外 部 ， 这 和 中 国 8 新 能 力 的 不 年 有 密切 的 关系 ， 





图 2.71 设置 图 片 样式 


第 6 步 ， 设 置 首 字 下 沉 效果 。 首 字 下 沉 的 效果 往往 能 在 第 一 时 间 吸 引 人 的 眼球 。 在 CSS 中 ， 首 
字 下 沉 的 效果 是 通过 对 第 一 个 字 进行 单独 设置 样式 来 实现 的 。 在 本 例 中 ,通过 对 <span> 标 签 中 的 文本 
首 个 字 进 行 单独 设置 实现 。 


sh{ 
font-size:50px; 证 首 字 的 字体 大 小 */ 
color:green: 人 # 首 字 的 字体 颜色 #/ 
float:left: 证 设置 左 浮动 以 实现 下 沉 的 效果 */ | 
padding-bottom:2px: 广 首 字 的 底部 补 白 */ | 
padding-right:Spx: 此 首 字 的 右边 界 补 白 */ | 
font-weight:bold; 启 首 字 的 字体 粗细 */ | 
font-family… 黑 体 …: 人 # 首 字 的 字体 类 型 | 
} | 
在 以 上 的 代码 中 ， 实 现 首 字 下 沉 主要 是 通过 float 语句 来 进行 控制 的 ， 并 且 用 <span> 标 签 ， 对 首 | 
字 进 行 了 单独 的 样式 设置 ， 以 达到 突出 显示 的 目的 ， 其 显示 效果 如 图 2.72 所 示 。 | 
| 
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一 一 于 朗 兴 入门 到 持 适 


人 口红 利 持续 衰减 “未 富 先 老 ”考验 中 国 


上 一 “再 ，- 记 历 吧 无 法 向 音 贡 和 





向， 关 品 三 外 ， 过 和 有 能 的 下 5 
图 2.72 首 字 下 沉 


第 7 步 ， 为 文本 段 中 的 数字 设置 特殊 的 显示 效果 。 在 段落 中 ， 有 两 处 数字 ， 为 了 突出 ， 把 这 两 个 
数字 进行 特殊 显示 ， 方 法 同样 也 是 通过 <span> 标 签 ， 对 数字 进行 了 单独 的 样式 设置 。 





.S1{ 
font-size:20px; 
font-style:italic:; 
text-decoration:underline; 
color:#FF0000; 

} 

.S2{ 
font-size:20px; 
text-decoration:line-through: 
color:#CC0000; 

} 

在 sl 中 定义 了 字体 为 斜体 , 为 字体 添加 了 下 划 线 。 在 s2 中 定义 了 字体 的 颜色 ,并 添加 了 删除 线 。 

显示 效果 如 图 2.73 所 示 。 


人 口红 利 持续 衰减 “未 富 先 老 ” 考 验 中 国 


过 去 0 咏 年 ， 们 有关 中共 主导 交 8y 本 开始 环 炒 中 国 在 一 柱 现代 化 和 导读 生 的 省 直上 一 大 “ 飞 ”。 旬 历史 天 法 共 地 复制， 
国际 全 各 以 及 月 站 老 种 化 的 全 。 类 条 半生 你 条 并 苛 ， 让 中 世间 到 科 区 最 万 式 已 下 寄 咕 - 中共 
让 由 总 书记 如 村 在 请 及 此 有 9， 曾 字 风 地 过 了 so 人 “人 5”。 让 恒 入 科 涯 人 品 芝 起 引 记 夺 守 所 
:CLE 


介 人 于 放 后 ， 关 尖 轩 寺 度 关 村 芭 全 时 汉 济公 的 地 动车 们 在 生化 .请 主人 
加 达 ， 中 国 和 人口 特点 且 现 过 芭 生 相 人 口琴 有 社会 忆 岳 北上 和 的 千 扫 。 强 车 礼 出， 劳 四 供 
再 汪汪 新 ， 中 国 近世 本 入 ,公信 本 过 二 局 守 没入 提前 和 和 委 模 区 各 到 人 生生 产 未 摘 及 半 术 过 推动 
ES a a emi ea 





图 2.73 ”最 终 显示 效 果 


。80 -. 
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2.6.4 ”设计 新 闻 内 容 页 


新 闻 内 容 主要 包含 了 新 闻 标 题 、 新 闻 摘 要 、 新 闻 发 布 相关 信息 、 新 闻 内 容 以 及 相关 讨论 等 内 容 。 | 
在 HTML 代码 中 相对 应 地 采用 可 以 相关 联 的 HTML 标签 ,使 HTML 代码 结构 相对 性 地 更 具有 语义 化 ，| 国 


如 图 2.74 所 示 。 | 


) 六 





<h1> 新 闻 标 题 </h1> 


ee | 
2014-05-23 19:0537 来源 箱 华 网 四 贴 2 条 手机 看 向 闻 <div class="info'> 新 闻 | 
新 闻 摘要 : 发 布 相关 信息 </div> | 


核心 提示 ， 上 海 市 日 前 规定 ， A 
校 。 纪委 给 予 交通 速 法 人 相应 处 分 、 诚 外 次 话 或 通报 批 证 


新 闻 内 容 : <p class="summary"> 新 


天 、 事业 单位 工作 入 员 产 ] 村 肝 交通 实例 沾 流 条 为 向 当事人 记 在 单位 抄 言 , 
列 入 干部 年 度 专 核 的 休 据 之 - 


上 海 市 纪委 认定 的 严重 道中 违法 行为 主要 有 ， 无 驾驶 证 驾驶 机 动车 辆 ， 
起 <div class="content"> 新 
辐 : 人 国 突 通 安 全 庄 法 行为 有 到 他 

闻 内 容 </div> 


省 早 部 分 内 容 ， 信 息 来 钴 于 网 络 ! (本 文 来 源 ， 关 全 回 作者 ， 张 和 平 ) 
【已 有 23 位 网 友 发 表 了 看 法 ， 点 击 查 看 。】 


! 
前 上 和 让、 扩 和 部 ， 人 各 届 、 忆 和 加 人 人 加, 轨 | | 闻 摘 要 </p> | 
| 


<div class="comments"> 


相关 讨论 </div> 





图 2.74 新 闻 内 容 页 整体 结构 分 析 


【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 。 根 据 图 2.74 的 结构 分 析 ， 可 以 将 新 闻 内 容 页 的 内 容 区 域 在 HTML 代码 
中 的 结构 表示 如 下 : 


<div class="news-box"> 
<!-- 新 闻 标题 $--> 
<h1> 上 海 市 将 公务 员 酒 后 驾车 列 入 年 度 考核 </hl> 
<!-- 新 闻 标题 E--> 
<!-- 新 闻 相关 信息 S--> 
<div class="info"> <span class="date">2014-05-23 19:05:37</span> <span class="from"> 来 源 :<a hre 仁 "#"> 
新 华 网 </a></span> <a hre 伍 "#" class="comments num"> 跟 贴 23 条 </a> <a hre 伍 "#"> 手 机 看 新 闻 </a> </div> 
<!-- 新 闻 相 关 信 息 E--> 
<!-- 新 闻 摘要 S--> 
<div class="summary"> 
<h2> 新 闻 摘要 : </h2> 
<p> 核 心 提 示 : 上 海 市 日 前 规定 ， 公 务 员 酒 后 驾车 等 交通 安全 违法 行为 将 列 入 年 度 考核 。 纪 委 给 予 
交通 违法 人 相应 处 分 、 诚 勉 谈 话 或 通报 批评 。</p> 
</div> 
<!-- 新 闻 摘要 E --> 
<!-- 新 闻 内 容 S --> 
<div class="content"> 
<h2> 新 闻 内 容 : </h2> 
<p><strong> 新 华 网 5 月 23 日 电 </strong> 上 海 市 纪委 、 组 织 部 、 公 安 局 、 监 察 局 日 前 联合 作出 规 
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| 定 ; 机 关 、 事 业 单位 工作 人 员 严重 道路 交通 安全 违法 行为 ， 向 当事人 所 在 单位 抄 告 ， 并 列 入 干部 年 度 考核 的 依据 
之 p> 
<p> 上 海 市 纪委 认定 的 严重 道路 交通 安全 违法 行为 主要 有 : 无 驾驶 证 驾驶 机 动车 辆 ， 发 生 道路 交通 
| 事故 后 逃逸、 故意 破坏 现场 或 者 冒名 顶替 , 饮酒 后 或 醉酒 驾驶 机 动车 辆 ， 因 抗拒 或 阻碍 道路 交通 管理 而 受到 行政 
全 A 处 罚 ， 因 交通 安全 违法 行为 受到 行政 拘留 处 罚 。</p> 
<p> 省 略 部 分 内 容 ， 信 息 来 源 于 网 络 ! <span class="editor">( 本 文 来 源 ，<a hre 伍 "##'> 新 华 网 </a> 作 


yote 者 : pe 


| ee 
<!-- 新 闻 评论 S--> 
<div class="comments"><a href="#">【 已 有 <em>23</em> 位 网 友 发 表 了 看 法 ， 点 击 查 看 。】</a></div> 
<!-- 新 闻 评论 E--> 
</div> 
为 了 能 体现 刚刚 在 分 析 结 构 时 所 说 的 语义 化 ， 可 以 通过 浏览 器 直接 浏览 未 添加 CSS 样式 的 网 页 
| ( 即 网 络 中 所 说 的 “裸奔 ”)， 如 图 2.75 所 示 。 页 面 结 构 、 内 容 层次 清晰 ， 即 使 在 无 样式 下 都 能 使 他 
| 人 了 解 页 面 中 哪些 信息 是 代表 着 什么 含义 的 。 


es Er 居 
上 海 市 将 公务 员 酒 后 驾车 列 入 年 度 考核 
2014-05-23 19:05:37 来 源 : 矣 华 轩 跟 止 3 条 手机 看 痢 同 


新 闻 摘 要 : 


核心 提示 ， 上 痢 市 日 前 规定 ， 公 务 员 酒 后 怎 车 等 文通 安全 记 法 行为 将 列 入 年 度 者 
核 。 纪委 抢 子 文 通 违 法 人 相应 处 分 、 斌 出 淡 话 束 通 报批 评 - 


区 违法 行为 主要 
发 生 说 路 交通 事故 后 近 议 、 故 音 大 妹 现场 或 者 中 名 降 箱 冬 驶 机 动 
二 和 民 的 和 攻 了 理 尖 二 生理 内 脆 2 T 政 处 神 ， 违法 行为 受到 行 


省 略 部 分 和 内容， 信息 不 源 于 网 络 ! (本 文 来 邓 ， 哲 全 回 作者 ， 张 和 平 ) 


【已 再 23 位 网 友 发 亚 了 者 法， 点 亏 豆 着 。】 





图 2.75 内 容 结构 层次 清晰 的 “裸奔 ”页 面 


| 第 2 步 ， 但 最 终 一 个 页 面 是 需要 通过 CSS 样式 的 美化 才能 更 漂亮 ， 因 此 需要 根据 设计 稿 将 页 面 
| 美化 。 首 先 ， 将 页 面 中 所 有 元 素 的 内 外 补丁 全 部 清 零 ， 并 将 .news-box 这 个 容器 设置 宽度 、 文 字 大 小 、 
| 背景 色 等 样式 。 

| 二 (清除 页 面 中 所 有 元 素 的 内 外 补丁 

| margin:0: 

| padding:0: 

| } 

| -news-box {* 设 置 新 闻 内 容 区 域 的 宽度 ， 并 设置 文字 大 小 、 颜 色 等 样式 */ 

| width:580px: 

| padding: 10px; 

| font:normal 14px/1.5em simsun, Verdana,.Lucida, Arial, Helvetica, sans-serif /*simsun 字体 就 是 宋体 的 英文 
| 写法 #/ 
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color-#000000; 
border: 1px solid #333333; 
backeround-color-#F6FAFD:; 
} 


第 3 步 , 根据 设计 稿 所 示 , HTML 结构 中 的 “新 闻 摘要 ”和 “新 闻 内 容 ” 是 不 需要 显示 在 页 面 中 ，| 铀 
因此 可 以 在 CSS 样式 中 将 其 隐藏 。 


) 六 





.news-box h2 { /* 隐 藏 新 闻 内 容 区 域 中 不 需要 的 标题 六 
display:none; 

} | 

第 4 步 ， 整 体 的 CSS 样式 已 经 差不多 完成 了 ， 那 么 就 可 以 开始 将 其 从 头 到 尾 的 修饰 ， 先 将 新 闻 | 

的 标题 hl 标签 中 的 文字 样式 修饰 一 下 。 | 


-news-box hl {/* 设 置 新 闻 标题 的 样式 高 度 为 30px， 宽 度 为 默认 值 auto， 并 添加 行 高 以 及 设置 文字 大 小 */ 
height:20px; | 
padding:Spx 0: | 
line-height:26px: | 
overflow:hidden; /* 行 高 比 高 度 属性 值 大 ， 设 置 overflow:hidden; 隐藏 超过 部 分 */ 
font-size:20px: 

} 

第 5 步 ， 对 “新 闻 相关 信息 ”文字 添加 CSS 样式 进行 美化 。 

-news-box .info {/* 设 置 新 闻 相关 信息 样式 ， 添 加 外 补丁 ， 使 其 与 内 容 信息 产生 间距 */ 
height:20px; 
margin-bottom:15px:; 
font-size: 12px; 


} 


第 6 步 ,“ 新 闻 摘 要 ”部 分 比较 特殊 ， 有 属于 其 自己 的 背景 色 以 及 边框 ， 不 过 不 用 担心 ， 可 以 利 
用 CSS 样式 来 达到 效果 。 
.news-box .summary { /* 设 置 新 闻 摘要 内 容 区 域 的 样式 */ 
padding:Spx: 
margin-bottom:10px: 
text-indent:2em; /* 首 行 缩 进 2 个 汉字 的 宽度 */ 
border: 1px solid #DCDDDD: 
background-color:#FFFFFF: 


} 


第 7 步 ,“ 新 闻 内 容 ” 区 域 的 文字 信息 都 是 存在 段落 p 标签 中 的 ， 其 中 的 strong 加 强 标签 代表 着 
该 处 内 容 是 “新 闻 内 容 ” 区 域 中 需要 强调 的 部 分 ， 将 每 个 段落 的 行 间距 加 大 ， 并 设置 首 行 缩 进 。 
-news-box .content p {l* 新 闻 内 容 区 域 的 每 个 段落 加 大 行 间距 〈 行 高 )， 并 首 行 缩 进 ， 段 落 与 段落 之 间 存在 一 
点 间距 */ 
margin-bottom:10px: 
line-height:22px: 
text-indent:2em:; 








lL 
第 8 步 ， 最 后 一 个 “相关 讨论 ”区 域 的 内 容 也 要 将 其 用 CSS 样式 美化 ， 主 要 体现 就 是 背景 色 以 
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及 上 下 两 边 的 边框 样式 ， 还 有 高 度 的 属性 。 
-news-box .comments {/* 设 置 讨论 区 域 上 下 边框 样式 为 虚线 的 灰色 ， 背 景色 为 白色 */ 
， height:30px: 
袋 六 | padding:0 Spx: 
a line-height:30px: /* 行 高 属性 值 与 高 度 属性 值 相同 ， 可 将 单行 文字 垂直 居中 显示 */ 
| border-top:1px dashed #AFAFBO: 
Note | border-bottom: 1px dashed #AFAFBO: 
| background-color-#FFFFFF: 
} 
第 9 步 ， 通过 以 上 的 CSS 样式 定义 ， 新 闻 内 容 页 面 已 经 基本 上 完成 了 。 只 能 说 是 基本 上 已 经 完 
成 ， 有 部 分 细节 内 容 还 需要 添加 CSS 样式 将 其 美化 。 
部 分 细节 主要 体现 在 链接 的 文字 颜色 ， 以 及 部 分 特殊 的 文字 链接 样式 。 那 么 最 后 需要 做 的 事情 就 
| 是 将 文档 中 文字 链接 的 样式 美化 一 下 。 


第 10 步 ， 细 节 部 分 修饰 完毕 ， 现 在 通过 浏览 器 查看 页 面 效果 ， 如 图 2.76 所 示 。 


| a {/* 设 置 页 面 中 所 有 a 链接 的 颜色 */ 
| color#1E50A2; 
| 
| a:hover {/* 设 置 页 面 中 所 有 a 链接 被 触发 时 的 颜色 以 及 下 划 线 消失 */ 
| color:#BA2636: 
text-decoration:none: 
| 
| a.comments_ num {/* 设 置 新 闻 相 关 信息 处 的 跟 帖 信息 链接 的 文字 颜色 */ 
| color#BA2636: 
| 上 
| .comments a em {/* 设 置 新 闻 评 论处 的 评论 数据 文字 样式 非 倾斜 */ 
| font-style:normal; 
| 
! 
| 


€ 3 nA 
公务 员 酒 后 驾车 列 入 年 度 考核 
下 37 坟 源 :白化 辐 姐 点 :条 王 所 和 友 司 


+ 上海 市 日 前 规 定 ， 后 下 车 等 文通 字 全 于 法 行 力 将 列 和 年度 考核 。 纪 
六 下 迁 法 人 相应 处 分 、 谍 各 淡 韦 或 通报 批评 

新 华 网 5 月 23 昌 电 上 汽 市 纪委、 钴 织 训 、 公 安 局 、 监 要 局 日前 碟 全 作出 规 定 : 机 关 、 名 业 
单位 工作 人 虽 严 重 刘 中 交 诅 2 全 这 法 行为 ， 辣 当事人 所 在 单位 的 告 并 列 入 二 部 年 度 寺村 的 依 
加 之 一 

上 海 市 纪委 认定 的 严重 小 交 么 安全 运 法 | 力主 芝 有 ; 无 交 骏 证 加 机 动车 畏 ， 必 生 江 路 
六 下 事故 于 进 造 、 直 总 硬 二 现场 或 埋 冒 名 页 将， 忱 再 后 民有 有 驾驶 机 动车 琐 。 轴 抗拒 或 碍 过 
中 又 首 音 理 而 受到 行政 处 站 ， 因 文章 实 全 还 法 为 受到 行政 拘 甸 处 入- 

省 栈 刘 内容， 全息 未 源 于 了 网络 1 (全 文 来源: 下 从 回 作者 : 张 和 丰 


【有 23 信 图 友和 才 了 矢 法 ， 右 二 查看 。 了 








图 2.76 新 闻 内 容 页 完成 后 的 效果 图 
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定义 网 页 链接 


( 怨 视频 讲解 : 63 分 钟 ) 


通过 网 页 链接 可 以 在 互联 网 上 实现 方便 、 快 捷 地 跳 转 访问 。 只 需 用 鼠标 轻 轻 点 击 ， 就 能 跳 
转 到 想 去 的 地 方 ， 真 正 实现 网 络 无 国界 、 来 去 自由 的 梦想 。 所 以 说 链接 是 网 页 上 不 可 缺少 的 重 
要 元 素 。 本 章 将 详细 介绍 如 何 用 Dreamweaver 轻松 创建 链接 ， 以 及 设计 链接 样式 ， 美 化 网 页 链 


接 文本 


【 学 习 重 点 】 


认识 链接 

建立 链接 

管理 链接 
框架 与 链接 
定义 链接 的 基本 样式 
设计 链接 下 划 线 样式 
设计 按钮 样式 

设计 导航 菜单 


i 


3.1 认识 链接 


身 J| 

Ea | 使 用 链接 可 以 真正 实现 在 互联 网 上 自由 跳 转 ， 例 如 ， 在 不 同 站 点 间 、 同 一 站 点 的 不 同 网 页 间 ， 或 

Note | 者 同一 网 页 上 的 不 同 区 域 间 跳 来 跳 去 。 
| “一 个 完整 的 链接 包括 链接 载体 、 链 接 标志 (默认 为 0d) 和 链接 目标 。 在 网 页 链接 载体 上 (通常 为 
| 文字 或 图 像 )》， 当 鼠标 指针 变 为 手 形 b 时 《默认 状态 下 ) ， 所 指 之 处 便 可 实现 链接 ， 同 时 所 指 文字 或 
| 图 像 的 颜色 或 其 他 属性 会 随 之 发 生变 化 (可 以 自由 控制 ) ， 通 过 单 击 或 者 其 他 触发 事件 跳 转 到 要 显示 
| 的 链接 目标 。 下 面 通过 两 个 实例 来 认识 链接 。 
| 【示例 1 链接 是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 ， 在 网 页 中 用 来 链接 的 对 象 ， 可 以 是 一 
| 段 文本 或 者 是 一 个 图 片 ， 当 浏览 者 单 击 已 经 链接 的 文字 或 图 片 后 ,链接 目标 将 显示 在 浏览 器 上 ， 并 且 
| 根据 目标 的 类 型 来 打开 或 运行 。 网 页 之 间 的 链接 ， 效 果 如 图 3.1 和 图 3.2 所 示 。 
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ng | 
全 提示 : URL (Uniform Resource Locator， 统 一 资源 定位 符 ) 用 以 指明 在 互联 网 上 取得 信息 的 方式 | 
与 位 置 。 其 格式 为 “通信 协议 /服务 器 地 址 /路 径 /文件 名 ”， 如 http:lwww.adobe.com/ | 


software/。 


【示例 2】 电 子 邮件 地 址 的 链接 ， 效 果 显示 如 图 3.3 所 示 。 当 用 户 单 击 链 接 文字 ， 将 会 在 本 地 启 | 廊 - 
动 电子 邮件 客户 端 软件 ， 以 便 快 速 发 送 邮件 。 


这 提示 : 邮件 地 址 链接 的 URL 必须 使 用 mailto 协议 形式 ， 如 图 3.3 状态 栏 中 显示 的 mailto:service@ 
dajie.com。 电 子 邮 件 发 送 软件 为 浏览 器 默认 的 程序 。 


按照 链接 路 径 的 不 同 ， 网 页 链接 一 般 分 为 3 种 类 型 : 内 部 链接 、 锚 点 链接 和 外 部 链接 。 如 果 按 照 
使 用 对 象 的 不 同 ， 网 页 链接 又 可 以 分 为 文本 链接 、 图 像 链接 、Email 链接 、 锚 点 链接 、 多 媒体 文件 链 


北京 总 部 : 
北京 市 海区 王 计 路 1 综 考 站 | 
册 纺 :100084 
客户 及 和 由 


商务 联系 出 往 : corp@dajie.com 


客户 服务 热线 ( 们 市话 责 ); 400-813-1117 


情 丰 : 010-63182599 


上 海 分 公司 : 


上 污 市 商 滞 区划 页 本 路 175 号 王 朋 广场 610 室 


请 。 200002 


广州 分 公司 : 


广州 市 天 河 区 马 志 路 15 呈 富力 一 芍 B 栖 1601 室 


邮 上 :510627 


关于 | 后 | 人 上 | 4 市 | 生生 “pT 


图 3.3 电子 邮件 的 链接 


3.2 建立 网 页 链接 


接 、 空 链接 等 。 下 面 重点 介绍 几 种 常用 的 链接 形式 。 


321 


在 互联 网 上 网 页 间 的 链接 使 用 非常 广泛 , 单 击 那些 具有 链接 功能 的 文字 或 图 片 就 可 以 跳 转 到 相应 
的 网 页 。 例 如 ， 以 文字 为 链接 载体 建立 链接 ， 链 接 到 Adobe 公司 的 网 站 首页 ， 有 具体 操作 步骤 如 下 。 


定义 网 页 间 链 接 


【操作 步骤 】 


第 1 步 ， 首 先 启动 Dreamweaver， 新 建 一 个 网 页 文件 。 选择 【窗口 1【 属 性 】 命 令 , 打开 【属性 】 


面板 。 按 Ctrl+F3 快捷 键 可 快速 打开 【属性 】 面 板 。 
第 2 步 ， 选 择 链接 载体 “Adobe”， 如 图 3.4 所 示 。 


第 3 步 ， 在 【属性 】 面 板 的 【链接 】 下 拉 列 表 框 中 输入 Adobe 公司 的 URL (http://www.adobe.com/》， 


劳 与 声明 | 





如 图 3.4 所 示 。 定 义 好 的 链接 文字 会 改变 颜色 (默认 色 为 蓝 色 ) ， 并 带 有 下 划 线 。 
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图 3.4 选择 链接 载体 


Li 

| 例 提示 : Dreamweaver 提供 多 种 定义 网 页 链接 的 快捷 方法 ， 下 面 列举 其 中 两 种 常用 方法 。 

| 回 利用 【属性 】 面 板 上 的 局 按钮 。 单 击 该 按钮 ， 出 现 【选择 文件 〗】 对 话 框 ， 如 图 3.5 所 示 。 在 
【选择 文件 〗 对 话 框 中 ， 可 以 搜寻 网 站 内 部 要 链接 的 网 页 名 称 。 
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图 3.5 【选择 文件 】 对 话 框 


回 利用 【属性 】 面 板 上 的 仿 按 钮 ， 配合 【文件 〗 窗 口 也 可 设置 链接 。 首 先 选择 【窗口 1 【文件 】 
命令 , 打开 【文件 面板 ,然后 在 网 页 中 选取 需要 建立 链接 的 文字 , 拖 动 【属性 】 面板 上 【 链 
接 】 文 本 框 右 侧 的 全 按钮 到 【文件 】〗 面 板 中 要 链接 的 网 页 名 称 上 ， 释 放 和 鼠标 即 可 。 


第 4 步 ， 选 择 链接 目标 的 载 入 位 置 。 在 默认 情况 下 ， 被 链接 网 页 是 在 当前 窗口 中 打开 的 。 要 想 使 
链接 目标 显示 在 其 他 窗口 ， 需 要 在 【目标 】 下 拉 列 表 框 中 进行 选择 ， 如 图 3.6 所 示 。 
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| 图 3.6 选择 网 页 的 载 入 位 置 
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_blank: 把 链接 目标 载 入 到 新 的 浏览 器 窗口 中 显示 。 
new: 把 链接 目标 载 入 到 新 窗口 中 显示 。 


_parent: 把 链接 目标 载 入 到 父 窗口 或 包含 该 链接 的 框架 窗口 中 显示 。 


办 办 办 加 


_self:， 把 链接 目标 载 入 到 与 该 链接 相同 的 框架 或 窗口 中 显示 〈 默 认 设置 ) 。 
_top: 把 链接 目标 载 入 到 顶部 浏览 器 窗口 并 删除 所 有 框架 。 


第 5 步 , 链接 设置 完毕 后 , 按 F12 键 在 主 浏览 器 中 浏览 页 面 效 果 。 鼠 标 指针 移 到 链接 载体 上 变 成 
手 形 ， 单 击 就 会 链接 到 Adobe 公司 的 网 站 首页 。 


3.2.2 ”定义 电子 邮件 链接 


链接 目标 除了 网 页 之 外 , 常见 的 还 有 电子 邮件 地 址 。 这 种 链接 为 用 户 提供 了 一 个 信息 交流 的 途径 。 
下 面 介绍 如 何 使 用 Dreamweaver 快速 建立 电子 邮件 链接 。 


【操作 步骤 】 


第 1 步 ， 首 先 启动 Dreamweaver， 新 建 一 


的 位 置 ， 或 者 选择 链接 载体 。 


个 网 页 文件 。 把 鼠标 指针 置 于 文档 窗口 中 希望 显示 链接 


第 2 步 ， 按 Ctrl+F2 快捷 键 ， 打 开 【 插 入 】 面 板 ， 单 击 国 按钮 ， 如 图 3.7 所 示 。 
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3.7 在 【插入 】 


第 3 步 ， 打 开 【 电 子 邮件 链接 】 对 话 框 ， 
如 “联系 我 们 ”; 
果 如 图 3.8 所 示 。 


文本 [联系 我 们 


面板 中 单 击 【电子 邮件 链接 】 按 钮 
在 【文本 】 文本 框 中 输入 (或 编辑 ) 作为 链接 载体 的 文本 ， 


在 【电子 邮件 】 文 本 框 中 输入 收 件 人 的 电子 邮件 地 址 ， 如 mailto:service@dajie.com， 效 


电子 部 件 ， [ailto:service@dajis.con | 


3.8 





【电子 邮件 链接 】 对 话 框 


第 4 步 ， 单 击 【 确 定 】 按 钮 ， 即 可 建立 链接 ， 预 览 效 果 如 图 3.9 所 示 。 
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| 图 3.9 建立 的 邮件 链接 效果 
| 3.2.3 ”定义 网 页 锚 点 


| 
| 

| 

| 锚 点 就 是 在 网 页 中 设置 的 位 置 标记 ， 并 给 该 位 置 一 个 名 字 ， 以 便 引 用 。 锚 点 可 以 指向 网 页 内 部 或 
| 其 他 网 页 的 某 个 位 置 ; 它 还 常用 来 制作 网 页 文章 的 目录 链接 , 通过 单 击 目录 可 以 跳 转 到 指定 章节 起 始 位 
| 置 , 这 样 方便 阅读 , 加 快 信息 检索 速度 。 建 立 锚 点 链接 应 先 定义 一 个 锚 点 ， 然 后 建立 到 销 点 的 链接 即 可 。 
| 【操作 步骤 】 

| 第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 文件 。 在 文档 窗口 中 ， 把 鼠标 指针 置 于 要 设置 锚 点 的 
| 位 置 。 
| 第 2 步 ， 切 换 到 【代码 】 视 图 ， 输 入 代码 : <a name="top"></a>， 定 义 一 个 命名 锚 记 ， 如 图 3.10 
| 所 示 。name 指明 锚 记 的 名 称 ， 在 链接 地 址 中 可 以 指向 它 ， 以 便 准确 找到 页 面 中 该 位 置 的 信息 。 
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3.10 定义 命名 锚 记 


【拓展 】 所 有 浏览 器 都 支持 为 任何 标签 定义 ID 属性 值 , 在 链接 URL 中 也 能 通过 锚 记 形式 快速 找 
到 该 位 置 。 例 如 ， 在 下 面 页 面 中 ， 当 单 击 页 面 底部 的 链接 文本 时 ， 会 自动 跳 转 到 页 面 顶部 。 


| <!doctype html> 
| <html> 


第 3 章 定义 网 页 链接 一 好 [ 


<div id="top" style="margin-bottom:2000px:"> 网 页 顶部 </div> 
<a href="#top"> 跳 转 到 网 页 项 部 </a> 
</body> 





</html> 


第 3 步 ， 在 文档 窗口 中 选择 要 建立 链接 的 载体 ， 如 文本 或 链接 图 标 。 | 
第 4 步 , 在 lsh 面板 的 【链接 】 下 拉 列 表 框 中 输入 “ 失 锚 点 名 称 ”， 如 图 3.11 所 示 。 | 
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图 3.11 建立 锚 点 链接 
容 提示 : 如 果 和 要 指向 不 同 的 网 页 ， 在 【链接 1】 下 拉 列 表 框 中 需 输 入 “URL+ 持 锚 点 名 称 ”。 


第 5 步 ， 保 存 网 页 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 则 预览 效果 如 图 3.12 所 示 。 当 单 击 链接 文本 
“返回 顶部 ”， 会 快速 跳 转 到 网 页 顶部 ， 在 浏览 器 地 址 栏 可 以 看 到 锚 记 信息 。 














Ce oad EECIEC FT 





3.12 ” 锚 点 链接 预览 效果 
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K% 
3.2.4 定义 图 像 映射 


图 像 映 射 (Image Map ) 就 是 在 一 张 图 片 的 不 同 区 域 建 立 链接 ， 指 向 不 同 的 URL。 图 片上 的 区 域 
也 称 为 “热点 (hotspots) ”。 当 单 击 该 热点 区 域 时 ， 会 触发 超 链接 ， 并 跳 转 到 其 他 网 页 或 网 页 的 某 
| 个 位 置 。 图 像 地 图 是 一 种 特殊 的 超 链接 形式 ， 常 用 来 在 图 像 中 设置 局 部 区 域 导航 。 
【操作 步骤 】 
| 第 1 步 ， 插 入 图 像 ， 然 后 选中 图 像 ， 打 开 【 属 性 】 面 板 ， 并 单 击 该 面板 右 下 角 的 展开 箭头 ， 显 
| 示 图 像 地 图 制作 工具 。 使 用 【指针 热点 工具 】 则 、【 甜 形 热 点 工具 】 口 、【 椭 圆 热 点 工具 】 器 和 【多 边 
形 热 点 工具 】 癌 可 以 调整 和 创建 热点 区 域 ， 如 图 3.13 所 示 。 









































图 3.13 图 像 【属性 】 面 板 
E: 输入 热点 区 域名 称 ， 便 于 引用 。 






: 动 热点 区 域 。 
: 在 选 定 图 像 上 拖 动 鼠标 指针 可 以 创建 圆 形 热 区 。 
工具 : 在 选 定 图 像 上 拖 动 鼠标 指针 可 以 创建 矩形 热 区 。 
【多 边 形 热点 工具 】 按 钮 :在 选 定 图 像 上 ， 单 击 选择 一 个 多 边 形 ， 定 义 一 个 不 规则 形状 的 
热 区 。 单 击 【 指 针 热点 工具 】 按 钮 可 以 结束 多 边 形 热 区 定义 。 
第 2 步 ， 在 【属性 】 面板 的 【地 图 】 文 本 框 中 输入 热点 区 域名 称 - 如 果 一 个 网 页 的 图 像 中 有 多 个 
热点 区 域 ， 必 须 为 每 个 图 像 热点 区 域 起 一 个 唯一 的 名 称 。 
| 第 3 步 ， 选 择 一 个 工具 ,根据 不 同 部 位 的 形状 可 以 选择 不 同 的 热 区 工具 ， 这 里 选择 【 甜 形 热点 工 
| 具 】 在 选 定 的 图 像 上 拖 动 鼠标 指针 ， 便 可 创建 出 图 像 热 区 。 
第 4 步 ， 热 点 区 域 创建 完成 后 ， 选 中 热 区 ,【 属 性 】 面 板 变 成 如 图 3.14 所 示 。 
回 【链接 】 文 本 框 : 可 输入 一 个 被 链接 的 文件 名 或 页 面 ， 单 击 【 选 择 文件 】 按 钮 可 选择 一 个 
文件 名 或 页 面 。 如 果 在 【链接 】 文 本 框 中 输入 “#”， 表 示 空 链接 。 
| 回 【目标 】 下 拉 列 表 框 : 要 使 被 链接 的 文档 显示 在 其 他 地 方 而 不 是 在 当前 窗口 或 框架 ， 可 在 
| 【目标 】 下 拉 列 表 框 中 输入 窗口 名 或 选择 一 个 框架 名 。 
| 回 【 蔡 换 】 文 本 框 : 在 该 文本 框 中 输入 所 定义 热 区 的 提示 文字 。 在 浏览 器 中 当 鼠 标 移 到 该 执 
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| 
点 区 域 中 将 显示 提示 文字 。 可 设置 不 同 部 位 的 热 区 显示 不 同 的 文本 。 | 
| 
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图 3.14 热点 【属性 】 面 板 | 
第 5 步 ， 用 【 算 形 工具 】 创 建 一 个 热 区 ， 在 【 莹 换 】 文 本 框 中 输入 提示 文字 ， 并 设置 好 链接 | 
和 目标 窗口 ， 如 图 3.14 所 示 。 | 
第 6 步 ， 以 相同 的 方法 分 别 为 各 个 部 位 创建 热 区 ， 并 输入 不 同 的 链接 和 提示 文字 ， 保 存 并 预览 
这 时 单 击 不 同 的 热 区 就 会 跳 转 到 对 应 的 页 面 中 。 


3.3 管理 链接 








前 面 几 节 介 绍 了 单个 链接 的 建立 , 而 在 一 个 网 站 里 包含 着 形形色色 的 多 个 链接 ,如何 安 排 和 管理 | 

这 些 链接 ， 关 系 到 网 站 能 否 良好 地 运作 。 | 
| 

3.3.1 设计 结构 清晰 的 链接 | 

在 网 站 中 建立 清晰 的 链接 ， 既 提供 给 浏览 者 一 个 良好 的 访问 环境 ， 也 方便 网 站 管理 人 员 的 管理 与 | 
维护 。 为 此 ， 要 考虑 到 以 下 几 点 。 | 

1. 设计 一 个 清晰 的 网 站 结构 图 

首先 要 定位 网 站 的 主题 ， 如 个 人 网 站 、 商 业 网 站 、 知 识 类 网 站 和 娱乐 类 网 站 等 ， 然 后 再 来 看 这 个 
网 站 要 包含 哪些 内 容 ， 需 要 多 少 网 页 文件 。 可 以 画 一 个 草图 来 理 清 思路 。 

2. 首页 上 的 链接 要 “有 去 有 回 ” 

不 论 网 站 的 链接 多 么 丰富 ， 都 要 随时 给 浏览 者 回 到 首页 的 可 能 ， 使 之 不 会 在 互联 网 上 迷失 方向 。 

3. 给 图 像 链 接 做 文字 说 明 

简单 的 文字 说 明 可 以 让 浏览 者 了 解 要 链接 的 目标 。 为 图 像 链接 做 说 明 有 两 种 方法 。 

回 “ 把 文字 直接 做 在 图 像 上 ， 成 为 图 像 的 一 部 分 。 
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a 提 页 宙 计 与 网 站 建设 愉 入 门 到 将 通 
把 文字 直接 写 在 【属性 】 面 板 的 【车 换 】 文 本 框 中 。 
| 。。 这样 当 民 标 指针 指向 图 像 时 ， 就 会 出 现 文字 提示 。 
| 


| 3.3.2 ”使 用 【资源 】 面 板 管理 链接 


| 充分 利用 Dreamweaver 提供 的 【资源 】 面板 可 以 极 大 地 方便 操作 。 一 般 可 以 在 【资源 】 面板 中 快 
| 速 找到 站 点 已 有 资源 ， 并 方便 插入 到 网 页 中 。 
| 在 链接 视图 中 记录 了 整个 网 站 所 有 使 用 过 的 外 部 链接 ， 包 含 FTP、gopher、HTTP 以 及 E-Mail 链 
| 接 等 。 用 链接 分 类 中 的 资源 快速 改变 网 页 中 文字 或 图 像 的 链接 。 
| 【操作 步骤 】 
| 第 1 步 ,启动 Dreamweaver, 打开 已 定义 的 站 点 ,新 建文 档 , 保存 到 站 点 根 目 录 下 , 命名 为 testhtml。 
| 


| 次 提示 ， 没 有 定义 站 点 ， 可 以 参考 第 13 章 相关 小 节 内 容 进行 操作 . 


第 2 步 ， 在 编辑 窗口 中 插入 一 幅 图 片 。 然 后 选中 网 页 中 要 作 链 接 的 文字 或 图 像 。 
| 第 3 步 ， 在 【链接 】 分 类 列表 中 单 击 选择 网 站 的 链接 ， 接 着 单 击 【 资 源 】 面 板 左下 角 的 【应 用 】 
| 按钮 ， 插 入 链接 。 也 可 以 使 用 鼠标 将 链接 直接 拖 动 到 页 面 编辑 窗口 中 选中 的 文字 上 ， 如 图 3.15 所 示 。 
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图 3.15 ”应 用 超 链接 
【拓展 】【 资 源 】 面 板 充当 网 站 的 资源 调配 中 心 ， 把 握 这 个 中 心 的 运转 ， 能 够 帮助 网 站 建设 者 高 效 
开发 网 站 。 在 【资源 】 面 板 中 ， 用 户 可 以 选择 多 个 资源 或 者 编辑 资源 ， 也 可 以 收藏 个 人 喜爱 的 资源 等 。 
1. 选择 资源 
要 选择 多 个 资源 文件 ， 可 执行 如 下 操作 : 
(1) 选中 第 一 个 资源 文件 ， 然 后 按 住 Shift 键 ， 再 次 单 击 最 后 一 个 资源 文件 ， 可 以 选择 连续 排列 


的 文件 。 
(2) 按 住 Ctrl 键 ， 然 后 逐个 单 击 ， 可 以 选择 不 连续 的 文件 。 


2. 修改 资源 


要 修改 资源 文件 ， 首 先 将 该 资源 文件 选中 ， 接 着 单 击 【资源 】 面 板 右 下 角 的 【编辑 】 按 钮 ， 系 统 
| 会 启动 该 分 类 对 应 的 外 部 编辑 器 ， 然 后 在 外 部 编辑 器 中 即 可 进行 编辑 资源 文件 的 操作 。 
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3. 收藏 资源 | 
当 站 点 比较 庞大 ， 资 源 非常 丰富 时 ， 要 查找 一 个 资源 是 比较 麻烦 的 ， 为 了 提高 利用 资源 的 效率 ， | 
Dreamweaver 在 【资源 】 面 板 中 提供 了 收藏 功能 ， 用 户 可 以 把 经 常 使 用 的 资源 增加 到 【收藏 】 列表 中 ， 
并 进行 归 类 排列 ， 引 用 资源 就 方便 多 了 。 将 资源 添加 到 【收藏 】 列 表 的 方法 如 下 : | 
(1) 在 【站 点 】 列 表 中 ， 选 择 一 个 或 多 个 资源 ， 然 后 单 击 【资源 】 面 板 右 下 角 的 【添加 到 收藏 ， 
夹 】 按 钮 喝 。 | 
(2) 在 【站 点 】 列 表 中 ， 选 择 一 个 或 多 个 资源 ， 然 后 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 | 
【添加 到 收藏 夹 】 命 令 。 | 
(3) 用 鼠标 右键 单 击 编辑 窗口 的 对 象 ， 在 弹出 的 快捷 菜单 中 选择 【添加 到 xx 收藏 】 命 令 ， 即 可 | 
快速 增加 到 【资源 】 面 板 的 收藏 列表 中 。 | 
(4) 在 【文件 】 面 板 中 ， 选 择 一 个 或 多 个 文件 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 添 | 
加 到 收藏 】 命 令 也 能 增加 到 【资源 】 面 板 的 收藏 列表 中 。 | 
4. 共享 资源 


! 

| 

【资源 】 面 板 中 显示 的 资源 只 能 在 当前 站 点 中 利用 ， 如 果 要 在 其 他 站 点 中 引用 该 站 点 资源 ， 必 须 | 
| 





先 复制 过 去 ， 复 制 时 可 以 是 一 个 单独 的 资源 、 一 组 单独 的 资源 或 整个 收藏 夹 。 
【操作 步骤 】 | 
第 1 步 ， 在 【资源 】 面 板 中 选择 要 复制 的 资源 。 | 
第 2 步 ， 右 击 要 复制 的 资源 ， 在 弹出 的 快捷 菜单 中 选择 【拷贝 到 站 点 】 命 令 ， 在 该 子 菜单 中 列 出 
了 所 有 定义 过 的 站 点 ， 从 中 选择 目标 站 点 即 可 。 


3.4 案例 实战 : 制作 框架 页 


框架 网 页 是 非常 实用 的 一 种 网 页 ， 特 别 适 合 架 设 聊天 室 、 论 坛 等 类 型 网 站 。 下 面 结合 框架 技术 和 | 
链接 技术 制作 一 个 作品 展示 站 点 ， 整 个 站 点 浏览 效果 如 图 3.16 所 示 。 
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3.16 ”框架 集 网 页 效果 
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| 3.4.1 “框架 网 页 设计 


本 框架 网 页 的 设计 目标 是 想 把 网 页 标题 放 在 顶部 ， 并 固定 不 动 ， 在 网 页 的 左 侧 放置 导航 条 ， 右 边 
作为 网 页 的 主体 显示 主要 动态 内 容 。 有 了 初步 的 想法 , 不 妨 在 具体 动手 之 前 把 这 样 的 设计 想法 画 出 来 ， 


图 3.16 框架 集 网 页 效果 ( 续 ) 





























图 3.17 框架 网 页 草图 


| 。。 实现 上 述 想 法 用 框架 技术 是 不 错 的 选择 , 也 可 以 选择 其 他 实现 技术 和 途径 , 但 需要 用 到 脚本 编程 
| 如 用 <ifame> 标 签 或 用 CSS 技术 等 来 实现 。 但 作为 初学 者 ， 用 框架 技术 实现 还 是 比较 简单 的 。 主 要 技 
| 术 参 数 如 下 : 

| 回 “框架 集 页 面 宽度 为 816 像素 。 

| 回 “需要 用 到 框架 集 抵 套 技术 ， 类 似 表格 工 套 效果 。 


如 图 3.17 所 示 。 
Ne 
i 航 主体 活动 页 
| 页 


| 先 创建 上 下 结构 的 框架 集 ， 上 部 框架 高 度 固定 为 94 像素 ， 宽 为 816 像素 ， 无 边框 ， 下 部 框 
| 架 高 度 为 相对 ， 宽 为 816 像素 ， 无 边框 。 
| 回 ”在 下 部 框架 内 嵌 套 框架 集 ， 媒 套 框架 集 的 左 框架 为 固定 宽度 160 像素 ， 无 边框 ， 右 框架 宽 
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度 为 相对 ， 边 框 为 默认 。 
3.4.2 ”制作 框架 分 页 面 


根据 设计 参数 ， 下 一 步骤 需要 制作 各 个 分 页 面 ， 具 体 介绍 如 下 。 
1， 标 题 页 (top html) 











【操作 步骤 】 

第 1 步 ， 用 Photoshop 绘制 网 页 图 像 ， 本 例 图 像 的 大 小 为 816x94 像素 ， 效 果 如 图 3.18 所 示 。 
ee 二 赤 my 二 二 入 
= Er 有 











3.18 制作 网 页 底 图 


第 2 步 ， 在 工具 箱 中 选择 【切片 工具 】 之 ， 在 【原稿 】 编 辑 窗口 中 根据 网 页 编辑 需要 切 分 图 像 ， 
如 图 3.19 所 示 。 


























图 3.19 切 分 网 页 底 图 


第 3 步 ， 选 择 【 文 件 】|【 存 储 为 Web 所 用 格式 】 命 令 ， 打 开 【 存 储 为 Web 所 用 格式 】 对 话 框 ， 
对 于 该 对 话 框 可 以 保持 默认 设置 ， 选 择 保存 位 置 ， 单 击 【确定 】 按 钮 保存 即 可 。Photoshop 提供 的 这 
个 全 自动 优化 并 导出 网 页 图 像 是 个 非常 实用 的 命令 。 

第 4 步 ， 启 动 Dreamweaver， 新 建 一 个 文件 。 选 择 【 文 件 】| 【打开 】 命令 ,打开 第 3 步 输出 的 网 
页 图 像 ， 另存 为 top.html， 要 注意 源 图 像 切 分 图 片 保存 文件 夹 images 和 top.html 文件 的 位 置 关 系 ， 即 
要 处 在 同一 文件 夹 中 ， 否 则 会 找 不 到 。 

第 5 步 , 在 Dreamweaver 编辑 窗口 中 , 把 需要 输入 文本 或 插入 图 像 等 网 页 元 素 的 切片 区 域 设置 为 
背景 显示 图 像 ， 方 法 是 先 根据 单元 格 插入 图 像 的 大 小 ， 在 【属性 】 面 板 中 设置 该 单元 格 的 大 小 ， 然 后 
复制 插入 图 片 路 径 ， 再 选中 单元 格 ， 在 【属性 】 面 板 中 把 该 路 径 复制 到 【背景 】 文 本 框 中 ， 如 图 3.20 
所 示 。 








画 CueerewwDocumanreve ste\ myenevep hm 二 








me = 


Qed} as OU) Cr> (UD REY 目 目 es 


3.20 ”编辑 网 页 图 像 


第 6 步 ， 在 最 后 一 行 单元 格 中 嵌入 一 个 JavaScript 脚本 文件 ， 用 来 制作 动态 下 拉 菜单 ， 感 兴趣 的 
读者 可 以 参考 本 书 示 例 ， 浏 览 效果 如 图 3.21 所 示 。 
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权 网 页 设计 与 网 站 建设 从 入 门 到 精通 





2. 导航 页 (lefthtml) 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 left.html。 选 择 【 修 改 】| 【页面 属性 】 命 令 ， 打 
开 【 页 面 属 性 】 对 话 框 ， 设 置 页 面 背景 色 为 浅 蓝 色 ， 靠 近 左上 角 对 齐 网 页 ， 如 图 3.22 所 示 。 


eo pe 











Er | 
Tum0) 区 可 





图 3.21 制作 下 拉 菜 单 图 3.22 【页 面 属性 】 对 话 框 
第 2 步 ， 插 入 一 个 2 行 1 列 的 表格 ， 设 置 宽 为 60 像素 ， 其 他 设置 如 图 3.23 所 示 。 
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图 3.23 插入 表格 


| 
| 
| 
| 第 3 步 , 在 表格 的 第 1 行 中 插入 标题 图 片 ,在 第 2 行 中 插入 一 个 4 行 2 列 的 表格 ,宽度 为 100%， 
| 如 图 3.24 所 示 。 根 据 设计 输入 文本 和 提示 小 图 标 ， 效 果 如 图 3.25 所 示 。 
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图 3.24 插入 嵌 套 表格 图 3.25 输入 文本 和 图 标 
| 第 4 步 ， 选 中 第 2~4 行 所 有 单元 格 ， 如 图 3.26 所 示 ， 切 换 到 【代码 】 视 图 ， 会 高 亮 显 示 选 中 单 
| 元 格 的 代码 ， 并 在 这 段 代 码 前 输入 “<tbody id="Content4"” style="display:none:"> ”， 在 后 面 输入 
| “</tbody>”， 详 细 代 码 如 图 3.27 所 示 。 
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图 3.26 选中 被 控制 的 单元 格 图 3.27 输入 控制 载体 代码 
第 5 步 ， 同 时， 在 <head> 和 </head> 之 间 输 入 一 段 JavaSeript 脚本 ， 用 来 控制 第 2~4 行 单元 格 的 显 | 
示 , 实际 上 该 代码 主要 用 来 控制 <tbody> 和 </tbody> 标 签 中 间 包含 的 所 有 表格 和 元 素 显示 和 隐藏 代码 | 


如 下 详细 页 面 代码 可 参考 本 书 示例 源 代码 》: 


<script> 
/控制 第 一 个 表格 显 隐 函 数 
function tumit(ss,ii.aa){ 
if (ss.style.display—"none"){ 
ss.style.display=""; 
ii.src="images/ 0.gif":; 
aa.src="images/iconO01.gif": 
yelse{ 
ss.style.display="none"; 
i.src="images/+0.gif"; 


aa.src="images/icon.gif"; 


} 


} 
// 控 制 最 后 一 个 表格 显 隐 函 数 
function tumit] (ss,ii.aa){ 
if (ss.style.display—"none"){ 
ss.style.display=""; 
ii.sre="images/ .gif 
aa.src="images/icon01.gif': 
jelse{ 
Ss.style.display="none": 
过 src="images/+2.gif 


aa.STc="images/icon gif 


} 


} 
// 控 制 中 间 表 格 显 隐 函 数 
function turnit2(ss,ii.aa){ 
if (ss.style.display—"none") { 
ss.style.display="": 
ii.src="images/ .gif': 


i 
: 
也 


“99. 





</script> 

第 6 步 ， 切 换 到 【设计 】 视 图 ， 选 中 第 1 行 单元 格 ， 在 选中 内 代码 上 面 的 <tr> 标 签 中 增加 脚本 控 
制 脚 本 : onMouseUp="turnit(Content1,Imgl,icon1);"， 经 过 上 面 操作 就 可 以 实现 动态 折 芭 表格 效果 。 

第 7 步 ， 以 同样 的 方式 制作 中 间 表 格 和 最 后 一 个 表格 的 动态 效果 ， 多 个 表格 倒 加 在 一 起 就 形成 了 
导航 菜单 。 要 注意 各 个 表格 由 于 所 引用 的 图 标 不 同 , 所 以 事件 引用 的 函数 也 不 同 , 见 源 代 码 中 的 注释 ， 
效果 如 图 3.28 所 示 。 

lS 
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折 受 表格 展开 表格 
图 3.28 动态 折 肥 表格 效果 


3.4.3 ”框架 合成 


3.4.1 节 和 3.4.2 节 重 点 介绍 了 两 个 关键 页 面 的 制作 ， 其 他 页 面 可 以 参考 本 书 示 例 。 完 成 框架 分 页 
的 设计 工作 后 ， 下 面 只 需要 创建 一 个 框架 集 页 面 把 这 些 分 页 面 合成 在 一 起 即 可 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 

第 2 步 ， 切 换 到 【代码 】 视 图 ， 输 入 下 面 代 码 ， 创 建 一 个 嵌 套 框架 集 。 


<html xmlns="http:/www.wW3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 框 架 网 页 制作 </title> 
</head> 
<frameset rows="94.*" framespacing="0" frameborder="no" border="0" bordercolor="0"> 
<frame src="top.html" frameborder="no" scrolling="no" noresize="noresize" marginwidth="0" marginheight= 
"0" id="top"> 
<frameset cols="160.*" framespacing="0" frameborder="no" border="0" bordercolor="0"> 
<frame src="left.html" name="left" frameborder="no" scrolling="no" noresize="noresize" marginwidth= 
"0" marginheight="0" id="left"> 
<frame src="main html" name="main" frameborder="no" noresize="noresize" marginwidth="0" marginheight= 
"0" id="main"> 
</frameset> 
</frameset> 
<noframes> 
<body> 
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<h1> 当 前 浏览 器 不 支持 框架 页 。</hl> | 
</body> | 
</noframes> | 
第 3 步 ， 保 存 框架 页 ， 按 F12 键 即 可 预览 页 面 。 | 车 





3.5 设计 链接 样式 


| 
网 页 链接 的 外 观 ， 蓝 色 、 下 划 线 ， 这 种 默认 样式 没有 吸引 力 ， 使 用 CSS 可 以 产生 令 人 吃惊 的 效果 。 | 
| 
3.5.1 定义 普通 样式 
对 链接 应 用 样式 最 容易 的 方式 是 使 用 类 型 选择 器 。 例 如 ， 以 下 规则 将 使 所 有 链接 显示 为 红色 。 
a{ 
color:red: 
} 
但 是 ， 锚 可 以 作为 内 部 引用 ， 也 可 以 作为 外 部 链接 ， 所 以 使 用 类 型 选择 器 不 总 是 理想 的 。 例 如 ， 
下 面 的 第 一 个 锚 包 含 一 个 片段 标识 符 ， 当 用 户 单 击 这 个 锚 时 ， 页 面 将 跳 到 第 二 个 锚 的 位 置 。 
<p><a href="#mainContent"> 跳 转 到 标题 位 置 </a></p> 
<hl><a name="mainContent"> </a></hl> 
虽然 只 想 让 真正 的 链接 变 成 红色 ， 但 是 标题 的 内 容 也 成 了 红色 的 。 为 了 避免 这 个 问题 ，CSS 提 
供 了 两 个 特殊 的 选择 器 ， 即 链接 伪 类 选择 器 。 
:link 伪 类 选择 器 用 来 寻找 没有 被 访问 过 的 链接 。 
:visited 伪 类 选择 器 用 来 寻找 被 访问 过 的 链接 。 | 
【示例 】 在 下 面 的 示例 中 定义 两 个 样式 , 设置 所 有 没有 被 访问 过 的 链接 将 是 蓝 色 的 ， 所 有 被 访问 | 
过 的 链接 将 是 绿色 的 。 | 
alink{ | 
colorblue: 


} 
a:Visited{ 
color:green: 


FE 

可 以 用 来 对 链接 应 用 样式 的 另外 两 个 选择 器 是 :hover 和 :active 动态 伪 类 选择 器 。 

回 。 :hover 动态 伪 类 选择 器 用 来 寻找 鼠标 停留 处 的 元 素 。 | 

回 :active 动态 伪 类 选择 器 用 来 寻找 被 激活 的 元 素 。 | 

对 于 链接 来 说 ， 激 活 发 生 在 链接 被 单 击 时。 所 以 ， 在 下 面 的 示例 中 ， 当 鼠标 停留 在 链接 上 或 单 击 | 
链接 时 链接 将 变 成 红色 。 

ahovera:active { 

color:red: 


| 
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很 多 设计 师 最 初 使 用 这 些 选择 器 的 目的 之 一 是 去 掉 链 接 的 下 划 线 , 然后 在 鼠标 停留 在 链接 上 或 单 
击 链接 时 打开 下 划 线 。 实 现 的 方法 是 将 未 访问 和 已 访问 的 链接 的 text-decoration 属性 设置 为 none， 将 
鼠标 停留 和 激活 的 链接 的 text-decoration 属性 设置 为 underline。 


在 上 面 示例 中 ， 选 择 器 的 排列 是 非常 重要 的 。 如 果 顺序 反 过 来 ， 鼠 标 停留 和 激活 样式 就 不 起 作用 了 。 
a:hover,a:active { 
text-decoration:undexline; 
} 
alinka:Visited { 
text-decoration:none; 
} 
这 是 由 层 营造 成 的 ， 当 两 个 规则 具有 相同 的 特殊 性 时 ， 后 定义 的 规则 优先 。 在 这 个 示例 中 ， 两 个 


| 规则 具有 相同 的 特殊 性 ， 所 以 :link 和 visited 样式 将 覆盖 :hover 和 :active 样式 。 为 了 确保 不 会 发 生 这 种 


情况 ， 最 好 按照 以 下 顺序 应 用 链接 样式 。 
alink 
aivisited 
ahover 
aactive 


3.5.2 ”定义 下 划 线 样式 


从 易 用 性 和 可 访问 性 的 角度 分 析 ， 通 过 颜色 之 外 的 某 些 方式 让 链接 区 别 于 其 他 内 容 是 很 重要 的 。 
这 是 因为 有 视觉 障碍 的 人 很 难 区 分 对 比 不 强烈 的 颜色 ,尤其 是 在 文本 比较 小 的 情况 下 。 例 如 ， 有 色盲 
症 的 人 无 法 区 分 有 具有 相似 亮度 或 饱和 度 的 某 些 颜 色 。 因 此 ， 链 接 在 默认 情况 下 会 加 上 下 划 线 。 
下 划 线 让 页 面 看 上 去 比较 乱 。 如 果 决 定 去 掉 链 接 的 下 划 线 ， 那 么 可 以 让 链接 显示 为 粗 体 。 这 样 页 
面 看 起 来 没 那 么 乱 ， 而 链接 仍然 醒目 。 
alink a:visited{ 
text-decoration:none: 
font-weight:bold: 
} 
当 鼠 标 停留 在 链接 上 或 激活 链接 时 ， 可 以 重新 应 用 下 划 线 ， 从 而 增强 其 交互 状态 。 
ahover a:active{ 
text-decoration:underline: 
} 
也 可 以 使 用 边框 创建 不 太 影响 美观 的 下 划 线 。 
【示例 】 在 下 面 示例 中 ， 取 消 默 认 的 下 划 线 ， 将 它 蔡 换 为 不 太 刺眼 的 点 线 。 当 鼠标 停留 在 链接 上 
或 激活 链接 时 ， 这 条 线 变 成 实 线 ， 从 而 为 用 户 提供 视觉 反馈 。 
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alink a:visited{ 
text-decoration: none: 
border-bottom: 1px dotted #000: 

b 

a:hover.a:active{ 
border-bottom-style:solid: 

} 


通过 使 用 图 像 创建 链接 下 划 线 ， 可 以 产生 非常 有 意思 的 效果 。 例如， 创建 了 一 个 非常 简单 的 下 划 
线 图 像 ， 它 由 点 线 组 成 ， 可 以 使 用 以 下 代码 将 这 个 图 像 应 用 于 链接 ， 显 示 效 果 如 图 3.29 所 示 。 
a:link, a:visited{ 
Color:#f00; 
font-weight:bold: 
text-decoration: none; 
background:url(images/dashed1 .gif) left bottom repeat-x: 
} 
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定义 下 划 线 样式 
1 使 用 text-decoration 属 性 定义 下 划 线 样式 
: 医 


2 使用 border 属 性 定义 下 划 线 样式 


= 往 寄 
3. 使 用 background 需 性 定义 下 刘 线 样式 


首页 


: 况 





3.29 ”设计 下 划 线 样式 
这 种 方式 并 不 限于 link 和 visited 样式 。 在 下 面 示例 中 ， 为 hover 和 active 状态 创建 了 一 个 动画 
GIF， 然 后 使 用 以 下 CSS 应 用 它 。 
ahover a:active{ 
background-image:url(images/underlinel1-hovez.gif): 
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当 鼠 标 停留 在 链接 上 或 单 击 链接 时 ， 点 线 从 左 到 右 滚动 出 现 ， 这 就 产生 了 一 种 有 意思 的 效果 。 并 | 
非 所 有 浏览 器 都 支持 背景 图 像 动画 ,但 是 不 支持 这 个 特性 的 浏览 器 常常 会 显示 动画 的 第 一 帧 ， 这 确保 | 


效果 在 老式 浏览 器 中 可 以 平稳 退化 。 当 然 使 用 动画 要 小 心 ， 因 为 它 会 对 某 些 用 户 造成 可 访问 性 问题 。 
3.5.3 ”设置 链接 类 型 标识 


在 很 多 网 站 中 ， 很 难看 出 链接 是 指向 网 站 中 另 一 个 页 面 ， 还 是 指向 另 一 个 站 点 。 为 了 解决 这 个 问 
题 ， 许 多 站 点 在 新 窗口 中 打开 外 部 链接 。 但 是 ， 这 不 是 好 办 法 ， 最 好 的 解决 方案 是 让 外 部 链接 看 起 来 
不 一 样 ， 让 用 户 自 己 选择 是 离开 当前 站 点 ， 还 是 在 新 窗口 或 新 的 标签 页 中 打开 这 个 链接 。 

可 以 在 外 部 链接 旁边 加 一 个 小 图 标 , 而 且 对 于 离 站 链接 的 图 标 已 经 出 现 了 一 种 约定 : 一 个 框 加 一 
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| 个 箭头。 实现 这 种 效果 最 容易 的 方法 是 在 所 有 外 部 链接 上 加 一 个 类 ， 然 后 将 图 标 作为 青 景 图 像 应 用 。 
| 【示例 ] 在 下 面 的 示例 中 ,给 链接 设置 少量 的 右 填充 ， 从 而 给 图 标 留 出 空间 ， 然 后 将 图 标 作为 普 


| 景 图 像 应 用 于 链接 的 右上 角 ， 如 图 3.30 所 示 。 


其 L | eeaal 
! backeround: url(images/externalLink.gif) no-repeat right top: 


Note | 
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图 3.30 设置 类 型 链接 样式 


尽管 这 个 方法 是 有 效 的 , 但 是 它 不 太 优雅 ， 因 为 必须 手工 地 在 每 个 外 部 链接 上 添加 类 。 有 办 法 让 
CSS 判断 链接 是 否 是 外 部 链接 吗 ? 实际 上 ， 确 实 有 办 法 ， 这 就 是 使 用 属性 选择 器 。 

属性 选择 器 允许 根据 特定 属性 是 否 存 在 或 属性 值 来 寻找 元 素 。CSS3 扩展 了 它 的 功能 ， 提 供 了 子 
字符 串 匹 配属 性 选择 器 。 顾 名 思 义 ， 这 些 选择 器 允许 通过 对 属性 值 的 一 部 分 和 指定 的 文本 进行 匹配 来 
寻找 元 素 。CSS3 还 没有 成 为 正式 的 规范 ， 所 以 使 用 这 些 高 级 选择 器 可 能 会 使 代码 失效 。 但 是 ， 许 多 符 
合 标准 的 浏览 器 〈 如 Firefox 和 Safad) 已 经 支持 这 些 CSS3 选择 器 了 ， 所 以 从 最 终 规范 中 去 掉 它 们 的 可 
能 性 是 很 小 的 。 这 种 技术 的 工作 方式 是 使 用 [att*=val] 属 性 选择 器 寻找 以 文本 http: 开 头 的 所 有 链接 。 

alhref ="http:"] { 

background: url(images/externalLink.gif) no-repeat right top: 

j padding-right: 10px: 

这 应 该 会 突出 显示 所 有 外 部 链接 。 但 是 也 会 选中 使 用 绝对 URL 而 不 是 相对 URL 的 内 部 链接 。 为 
了 避免 这 个 问题 ,需要 重新 设置 指向 网 站 内 部 的 所 有 链接 ， 删 除 它们 的 外 部 链接 图 标 。 方法 是 匹配 指 
向 自己 网 站 域名 的 链接 ， 删 除外 部 链接 图 标 ， 重 新 设置 右 填 充 。 

alhref’="http://www.yoursite.com"], a[href*="http://yoursite.com"]{ 

backsground-image:none: 

Ppadding-right: 0; 

大 多 数 符合 标准 的 浏览 器 都 支持 这 种 技术 ， 而 老式 浏览 器 (如 正 6 及 更 低 版 本 ) 会 忽略 它 。 

还 可 以 扩展 这 种 技术 ， 如 对 邮件 链接 也 进行 突出 显示 。 在 下 面 的 示例 中 ， 在 所 有 mailto 链接 上 
添加 一 个 小 的 邮件 图 标 。 
! a[href*="mailto:"] { 
background: url(images/email.png) no-repeat right top: 


»104°* 





第 3 弟 突 妈 网 页 链 拷 一 G59 | 


性 


padding-right: 10px: 
} 


甚至 可 以 突出 显示 非 标准 的 协议 ， 如 用 小 的 图 标 突出 显示 。 


afhref*="aim:"] { 
background: url(images/im.png) no-repeat right top; 
padding-right: 10px; 


} 
<a href="aim:goim?screenname=andybudd"> 链 接 内 容 </a> 
突出 显示 可 下 载 的 文档 和 提要 另 一 种 不 好 的 常见 情况 是 , 单 击 一 个 链接 ， 本 以 为 会 进入 另 一 个 页 
面 ， 却 开始 下 载 一 个 PDF 或 Word 文档 。 幸 运 的 是 ，CSS 也 可 以 帮助 区 分 这 些 类 型 的 链接 。 这 要 使 用 
[att$=val] 属 性 选择 器 ， 它 寻找 以 特定 值 (如 .pdf 或 .doc) 结尾 的 属性 。 
alhref$=".pdf"] { 
background: url(images/PdfLink.gif) no-repeat right top: 
padding-right: 10px: 





alhref$=".doc"]{ 
background: url(images/wordLink.gif) no-repeat right top: 
Ppadding-right: 10px; 


采用 与 前 面 示例 相似 的 方式 , 可 以 用 不 同 的 图 标 突 出 显示 Word 和 PDF 文档。 这 样 访问 者 就 知道 
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它们 是 文档 下 载 ， 而 不 是 链接 到 另 一 个 页 面 的 链接 。 为 了 避免 可 能 发 生 的 混淆 ， 读 者 还 可 以 通过 类 似 | 


的 方法 用 RSS 图 标 突出 显示 链接 的 RSS 提要 。 
a[href$=".rss"], a[href$=".rdf"] { 
background: url(images/feedLink.gif) no-repeat right top: 
Padding-right: 10px: 
bE 
通过 提醒 用 户 注意 离 站 链接 或 可 下 载 的 文档 ,让 他 们 明确 地 了 解 在 单 击 链接 时 会 发 生 的 情况 ， 避 
免 了 不 必要 的 取消 操作 和 烦恼 。 


3.5.4 ”模拟 按钮 样式 
a 是 行内 元 素 ， 只 有 在 单 击 链接 的 内 容 时 才 会 激活 链接 。 但 是 ， 有 时 候 希 望 它 显示 为 按钮 样式 ， 


因此 可 以 将 a 的 display 属性 设置 为 block, 然后 修改 width、height 和 其 他 属性 来 创建 需要 的 样式 和 单 
击 区 域 。 


【示例 1】 在 页 面 中 为 所 有 链接 定义 按钮 样式 效果 ， 由 于 链接 现在 显示 为 块 级 元 素 ， 单 击 块 中 的 | 


任何 地 方 都 会 激活 链接 。 
af 


backsground-color: #g488E9: 
border: Ipx solid black: 
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} 


在 上 面 代码 中 ， 宽 度 是 以 em 为 单位 显 式 设置 的 。 由 于 块 级 元 素 会 扩展 ， 填 满 可 用 的 宽度 ， 所 以 
如 果 父 元 素 的 宽度 大 于 链接 所 需 的 宽度 ,那么 需要 将 希望 的 宽度 应 用 于 链接 。 如 果 希 望 在 页 面 的 主 内 
容 区 域 中 使 用 这 种 样式 的 链接 ， 就 很 可 能 出 现 这 种 情况 。 但 是 ， 如 果 这 种 样式 的 链接 出 现在 宽度 比较 
窒 的 地 方 〈 如 边栏 ) 中 ， 那 么 可 能 只 需 设 置 父 元 素 的 宽度 ， 而 不 需要 为 链接 的 宽度 担心 。 
为 什么 使 用 line-height 属性 定义 按钮 的 高 度 ， 而 不 是 使 用 height 属性 ? 
这 实际 上 是 一 个 小 技巧 ， 能 够 使 按钮 中 的 文本 垂直 居中 。 如 果 设 置 height， 就 必须 使 用 填充 将 文 
本 压低 ， 模 拟 出 垂直 居中 的 效果 。 但 是 ， 文 本 在 行 框 中 总 是 垂直 居中 的 ， 所 以 如 果 使 用 line-height 属 
性 ， 文 本 就 会 出 现在 框 的 中 间 。 
上 述 缺 点 : 如 果 按钮 中 的 文本 占据 两 行 ， 按 钮 的 高 度 就 是 需要 的 高 度 的 两 倍 。 避 免 这 个 问题 的 唯 
一 方法 是 调整 按钮 和 文本 的 尺寸 ， 让 文本 不 换行 ， 至 少 在 文本 字号 超过 合理 值 之 前 不 会 换行 。 
使 用 :hover 伪 类 就 可 以 创建 翻转 效果 ， 不 需要 JavaScript。 如 在 鼠标 停留 时 设置 链接 的 背景 和 文 
本 颜色 ， 从 而 实现 非常 简单 的 动态 效果 。 
ahover { 
background-color:#369; 
color-#fEF 
} 


【示例 2】 修改 背景 颜色 对 于 简单 的 按钮 很 合适 , 但 是 对 于 比较 复杂 的 按钮 ,最 好 使 用 背景 图 像 。 


| 在 下 面 示例 中 ， 创 建 了 两 个 按钮 图 像 ， 一 个 用 于 正常 状态 ， 一 个 用 于 鼠标 停留 状态 ， 也 可 以 添加 激活 


状态 ， 即 使 用 :active 动态 伪 类 触发 。 预 览 效果 如 图 3.31 所 示 。 


text-decoration:none': 
background:#9488E9 url(images/button.gif) no-repeat left top: 
text-indent:SOpx: 

} 

ahover{ 
background:#369 url(images/butten_over.gif) no-repeat left top: 
color:#fff: 

B 


els SE ER 

















图 3.31 设置 按钮 样式 
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上 面 代码 与 前 面 示例 相似 。 主要 的 差异 是 使 用 背景 图 像 而 不 是 背景 颜色 ， 同 时 使 用 固定 宽度 和 高 
度 的 按钮 ， 所 以 在 CSS 中 设置 显 式 的 像素 尺寸 。 但 是 ， 也 可 以 创建 特大 的 按钮 图 像 ， 或 者 结合 使 用 
背景 颜色 和 图 像 创建 流体 的 或 弹性 的 按钮 。 


【示例 3】 多 图 像 方法 的 主要 缺点 是 在 浏览 器 第 一 次 装载 鼠标 停留 图 像 时 有 短暂 的 延迟 。 这 会 造 | 


成 闪烁 效果 ， 让 按钮 感觉 起 来 有 点 儿 反 应 迟钝 。 可 以 将 鼠标 停留 图 像 作为 背景 应 用 于 父 元 素 ， 从 而 预 
先 装 载 它们 。 但 是 ， 有 另 一 种 方法 。 并 不 切换 多 个 背景 图 像 ， 而 是 使 用 一 个 图 像 并 切换 它 的 背景 位 置 。 
使 用 单个 图 像 的 好 处 是 减少 了 服务 器 请 求 的 数量 ， 而 且 可 以 将 所 有 按钮 状态 放 在 一 个 地 方 。 

首先 ， 创 建 组 合 的 按钮 图 像 ， 如 图 3.32 所 示 。 


| 
| 有 | 


图 3.32 设计 背景 图 像 








在 这 个 示例 中 ， 使 用 正常 状态 和 鼠标 停留 状态 ， 也 可 以 使 用 激活 状态 和 已 访问 状态 。 代 码 几乎 与 | 


前 面 的 示例 相同 。 设 计 在 正常 状态 下 ， 将 翻转 图 像 对 准 左边 ， 而 在 鼠标 停留 状态 下 对 准 右边 。 
alinka:visited{ 
display:block: 
width:200px: 
height:40px: 
line-height:40px: 
color:#000; 
text-decoration:none; 
background:#9488E9 url(images/pixy-rollover.gif) no-repeat left top: 
text-indent:50px; 
} 
ahover{ 
background-color:#369; 
background-position:right top: 
Color:#fff: 
} 


由 于 正 仍然 会 向 服务 器 请 求 新 的 图 像 ， 这 会 产生 轻微 的 闪烁 ， 为 了 避免 闪烁 ， 需 要 将 翻转 状态 
应 用 于 链接 的 父 元 素 ， 如 包含 它 的 段落 。 
pt 
background:#g488Eg url(images/pixy-rollover.gif) : 
no-repeat right top: 
} 
在 图 像 重 新 装载 时 ， 它 仍然 会 消失 一 段 时 间 。 但 是 ， 由 于 提前 加 载 ， 现 在 会 露出 相同 的 图 像 ， 消 
除了 闪烁 。 


3.5.5 ”定义 已 访问 样式 


用 户 常常 忘记 处 理 已 访问 链接 样式 ， 导 致 已 访问 的 链接 和 未 访问 的 链接 采用 同样 的 样式 。 但 是 ， 
不 同 的 已 访问 链接 样式 可 以 帮助 用 户 , 让 他 们 知道 哪些 页 面 或 站 点 他 们 已 经 访问 过 了 ,避免 不 必要 的 
取消 操作 。 

【示例 】 通 过 在 每 个 已 访问 链接 的 旁边 添加 一 个 提示 框 , 就 可 以 创建 一 种 非常 简单 的 已 访问 链接 


“Fs 
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| padding-right:20px; 
全 | background:url(check.gifright middle: 
2 | } 


加 时 3。 食 设 在 边栏 中 有 一 系列 外 部 钴 技 。 


| 人 

| <li><a href="http://www.baidu.com/" target="” blank"> 百 度 </a></li> 
<li><a href="http://www.google.com.hk/" target="” blank"> 谷 歌 </a></li> 

| <li><a hre 人 ="http://www.sina.com/" target=”blank"> 新 浪 </a></li> 

| <li><a href="http://www.sohu.comy/" target="” blank"> 搜 狐 </a></li> 

| <ul> 


为 未 访问 状态 和 已 访问 状态 创建 单一 图 像 , 然后 按照 与 前 面 一 样 的 方式 应 用 背景 图 像 。 背景 图 像 
给 锚 和 已 访问 状态 添加 了 样式 。 


ulflist-style:none: } 

lifmargin:Spx:; } 

lia{ 
display:block: 
width:300px:; 
height:30px; 
line-height:30px: 
color:#000; 
text-decoration: none; 
background:#9488E9 url(images/visited.gif) no-repeat left top; 
text-indent:]0pxX: 


} 
lia:visited{ 
background-position:right top: 


} 
每 个 已 访问 站 点 的 旁边 显示 一 个 图 标 标记 ， 这 个 反馈 图 标 表 示 访 问 者 已 经 访问 过 该 链接 。 


3.5.6 “定义 提示 样式 


| 链接 提示 是 当 鼠 标 停留 在 具有 title 属性 的 元 素 上 时 一 些 浏览 器 弹出 的 黄色 小 文本 框 。 一 些 开 发 人 
| 员 结 合 使 用 JavaScript 和 CSS 创建 了 样式 独特 的 链接 提示 。 但 是 ， 通 过 使 用 CSS 定位 技术 ， 可 以 创 
| 建 纯 CSS 链接 提示 。 

【示例 】 先 创建 结构 良好 且 有 意义 的 HTML 结构 。 


“> 
<a hre 伍 "http://www.baidu.comy" class="tooltip"> 百 度 <span> (百度 一 下 ， 你 就 知道 ) </span></a> 
<p> 
| 这 个 链接 设置 类 名 为 tooltip， 以 便 从 其 他 链接 中 区 分 出 来 。 在 这 个 链接 中 ， 添 加 希望 显示 为 链接 
| 文本 的 文本 ， 然 后 是 包围 在 span 中 的 链接 提示 文本 。 将 链接 提示 包围 在 圆 括号 中 ， 这 样 的 话 在 样式 
| 关闭 时 这 个 句子 仍然 是 有 意义 的 。 

| 首先 ， 将 a 的 position 属性 设置 为 relative。 这 样 就 可 以 相对 于 父 元 素 的 位 置 对 span 的 内 容 进行 
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绝对 定位 。 不 希望 链接 提示 在 最 初 就 显示 出 来 ， 所 以 应 该 将 它 的 display 属性 设置 为 none。 
! 


a.tooltip{ 
position:relative:; 


) 六 


b 
a.tooltip span{ ! 国 


i 


当 鼠 标 停留 在 这 个 锚 上 时 ， 和 希望 显示 span 的 内 容 。 方 法 是 将 span 的 display 属性 设置 为 block， | 
但 是 只 在 鼠标 停留 在 这 个 链接 上 时 这 样 做。 如 果 现在 测试 此 代码 ， 当 鼠标 停留 在 这 个 链接 上 时 ,链接 | 
的 旁边 会 出 现 span 文本 。 | 
为 了 让 span 的 内 容 出 现在 锚 的 右 下 方 ， 需 要 将 span 的 position 属性 设置 为 absolute， 并 且 将 它 | 
定位 到 距离 锚 顶 部 lem， 距 离 左 边 2em。 


a.tooltip:hover span { 





这 就 是 这 种 技术 的 主体 部 分 。 余 下 的 工作 是 添加 一 些 样式 让 span 看 起 来 像 链接 提示 。 可 以 给 span 
加 一 些 填充 、 一 个 边框 和 背景 颜色 。 最 后 演示 效果 如 图 3.33 所 示 。 
atooltip:hover span{ 


padding:0.2em 0.6em 
border: 1px solid #996633; 
background-color:-#FFFF66;: 
color:#000; 


S Go 





图 3.33 ”链接 提示 样式 
< 全 注意 : 绝对 定位 元 素 的 定位 相对 于 最 近 的 已 定位 祖先 元 素 ， 如 果 没 有 ， 就 相对 于 根 元 素 。 在 这 个 
示例 中 ， 已 经 定位 了 a， 所 以 span 相对 于 a 进行 定位 。 


atooltip:hover{ 
font-size:100%: 


} 
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3.6 案例 实战 


| 本 书 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 链接 样式 ， 以 提高 实战 技法 和 技巧 ， 快 速 理 解 CSS 
EN mt. 
| 3.6.1 定义 鼠标 指针 样式 


在 默认 状态 下 ， 鼠 标 移 过 链接 则 显示 为 箭头 样式 ， 如 果 链 接 显示 为 按钮 样式 ， 我 们 还 可 以 把 光标 
设计 为 手 形 样式 ， 这 样 能 够 提高 用 户 使 用 体验 。 设 计 鼠 标 样式 的 效果 如 图 3.34 所 示 。 


eS hp//ocalhost myste/inder hm! D - a OB localhoet 





3.34 ”鼠标 样式 


【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 ， 在 <body> 标 签 中 输入 以 下 内 容 ; 


<u> 
<li> <a hre 伍 "#> 帮 助 </a></li> 
<li> <a hre 伍 "#"> 文 本 </a></li> 
<li> <a hre 伍 "#" > 等 待 </a></li> 
<li> <a hre 伍 "#"> 斜 箭头 </a></li> 
<li> <a hre 人 ="#"> 十 字 </a></li> 
<li> <a hre 伍 "#"> 移 动 </a></li> 

<n> 


第 2 步 ， 规 划 整 个 页 面 的 基本 显示 属性 以 及 统一 所 有 元 素 的 默认 样式 。 
3 


margin:10px 0 0 10px: 
padding:Opx: 

} 

body { 
font-size:14px: 
font-family:" 宋 体 ": 


} 

第 3 步 ， 定 义 水 平 显示 的 导航 菜单 样式 。 在 ul 类 型 选择 器 中 清除 列表 项 目 符号 ， 通 过 1 选择 器 
| 让 所 有 列表 项 并 列 显示 ， 通 过 添加 左 侧 边界 2 像素 ,实现 列表 项 目 之 间 留 有 一 点 距离 。 定 义 a 元素 为 
块 显示 ， 设 计 背 景色 为 亮 蓝 色 ， 通 过 固定 高 和 宽 设 置 方形 样式 ， 利 用 line-height 属性 实现 文本 科 直 居 
| 中 ， 清 除 默 认 的 下 划 线 样式 ， 设 置 字体 为 白色 。 显 示 效 果 如 图 3.35 所 示 。 
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图 3.35 ”设置 水 平 导航 样式 
第 4 步 ， 利 用 CSS 的 cursor 属性 定义 多 个 光标 样式 类 。 
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| 该 属性 的 取 值 说 明 如 表 3.1 所 示 。 
表 3.1 cursor 取 值 说 明 
| 属性 值 说 了 明 
鲜 | au 默认 值 。 浏 览 器 根据 当前 情况 自动 确定 鼠标 光标 类 型 
sol | E60 有 上 、 下 、 左 、 右 4 个 箭头 ， 中 间 有 一 个 加 点 的 光标 。 用 于 标示 页 面 可 以 向 上 、 下 、 左 、 
Note | RE 右 任何 方向 滚动 





col-resize ”| 下 6.0 有 左右 两 个 箭头 , 中 间 由 竖 线 分 隔 开 的 光标 。 用 于 标示 项 目 或 标题 栏 可 以 被 水 平 改 变 尺寸 
crosshair 简单 的 十 字 线 光 标 
default 客户 端 平台 的 默认 光标 。 通 常 是 一 个 箭头 

















hand 竖 起 一 只 手指 的 手 形 光标 。 就 像 通 常用 户 将 光标 移 到 链接 上 时 那样 
move 十 字 箭头 光标 。 用 于 标示 对 象 可 被 移动 
help 带 有 问号 标记 的 箭头 。 用 于 标示 有 帮助 信息 存在 
正 6.0 带 有 一 个 被 斜 线 贯 穿 的 圆圈 的 手 形 光 标 。 用 于 标示 被 拖 起 的 对 象 不 允许 在 光标 的 当前 位 置 
Do-drop 被 放下 


| 

not-allowed | 下 6.0 禁止 标记 〈 一 个 被 斜 线 贯穿 的 圆圈 ) 光标 。 用 于 标示 请 求 的 操作 不 允许 被 执行 

| _pointer 正 6.0 和 hand 一 样 。 竖 起 一 只 手指 的 手 形 光标 。 就 像 通常 用 户 将 光标 移 到 链接 上 时 那样 
progress IE6.0 带 有 沙漏 标记 的 箭头 光标 。 用 于 标示 一 个 进程 正在 后 台 运 行 

| _row-resize ”| IE6.0 有 上 下 两 个 箭头 , 中 间 由 横 线 分 隔 开 的 光标 。 用 于 标示 项 目 或 标题 栏 可 以 被 垂直 改变 尺寸 

| _text 用 于 标示 可 编辑 的 水 平 文 本 的 光标 。 通 常 是 大 写字 母 的 形状 

| 


vertical-text | 正 6.0 用 于 标示 可 编辑 的 垂直 文本 的 光标 。 通 常 是 大 写字 母 I 旋转 90 度 的 形状 
wait 用 于 标示 程序 忙 用 户 需 要 等 待 的 光标 。 通 常 是 沙漏 或 手表 的 形状 


用 于 标示 对 象 可 被 改变 尺寸 方向 的 箭头 光标 。w-resize | s-resize | n-resize | e-resize| ne-resize | 
SW-resize | se-resize | nW-resize 


url(url) 正 6.0 用 户 自 定义 光标 。 使 用 绝对 或 相对 url 地 址 指定 光标 文件 后 缀 为 .cur 或 者 .ani) 
第 5 步 ， 把 这 些 样式 类 绑 定 到 列表 项 目 中 包含 的 链接 a 元 素 上 即 可 。 


<ul> 

<Hi> <a hreE-"#n class="help"> 帮 助 <Ja></li> 

<li> <a hre 仁 "#" class="text"> 文 本 </a></li> 

<li> <a hre 伍 "#" class="wait"> 等 待 </a></li> 

<li> <a href="#" class="sw-resize"> 斜 箭头 </a></li> 
| <li> <a href="#" class="crosshair"> 十 字 </a></li> 
| <li> <a hre 个 "##" class="move"> 移 动 </a></li> 
| 
| 


*-resize 


< 


3.6.2 ”定义 菜单 样式 


很 多 链接 放 在 一 起 ， 就 可 以 组 成 菜单 ， 菜 单 是 网 站 的 导航 中 心 ， 在 每 个 页 面 都 会 看 见 它 ， 因 此 设 
计 链 接 样式 ， 以 及 导航 菜单 样式 就 成 为 网 页 设计 中 很 重要 的 组 成 部 分 。 

菜单 样式 风格 不 一 、 种 类 繁多 ， 页 面 该 用 什么 样式 ， 这 个 需要 结合 网 页 设计 风格 。3.6.1 节 中 曾 
| 经 介绍 了 按钮 样式 ， 下 面 就 以 按钮 样式 为 基础 ， 设 计 一 个 水 平 显示 的 菜单 样式 ， 示 例 效果 如 图 3.36 
| 所 示 。 
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图 3.36 设计 菜单 样式 





【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 ， 在 <body> 标 签 中 输入 以 下 内 容 : 





整个 菜单 结构 以 无 序列 表 为 基础 ， 使 用 <ul> 和 <li> 标 签 配合 ， 设 计 每 个 菜单 项 ， 在 每 个 菜单 项 中 
包含 一 个 链接 ， 此 时 的 显示 效果 如 图 3.37 所 示 ， 可 以 看 到 ， 无 序列 表 结构 呈现 垂直 显示 ， 并 带 有 项 
目 符号 ， 每 个 项 目 以 缩 进 呈现 。 





图 3.37 构建 列表 结构 
第 2 步 ， 定 义 网 页 基本 属性 ， 设 置 列表 默认 样式 ， 清 除 项 目 符号 ， 并 让 菜单 文本 居中 显示 。 
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margin-left:Spx; 
} 


在 以 上 代码 中 ， 首 先 定义 了 页 面 边 界 为 0， 清 除 页 边 距 ， 统 一 字体 大 小 为 16 像素 ， 字 体 类 型 为 
| 宋体， 为 div 元 素 定义 左右 margin 为 auto， 上 下 为 10 像素 。 此 时 的 显示 效果 如 图 3.38 所 示 。 


Note |S /toam o -30 [s+ “ 轩 导 ] 





图 3.38 设置 列表 基本 属性 


第 3 步 ， 定 义 按钮 样式 。 


ailink a:visited {/* 链 接 正常 状态 、 被 访问 过 的 样式 */ 
color: #000; 
width:100px; 
height:20px; 
line-height:20px; 
padding:4px 10px 4px 10px; 
background-color: #ffd8db:; 
text-decoration: none; 
border-top: 1px solid #ece0e0: 必 边 框 实现 阴影 效果 %/ 
border-left: 1px solid 多 ce0e0: 
border-bottom: 1px solid #636060: 
border-right: 1px solid #636060: 


a:hover {* 鼠 标 经 过 时 的 链接 */ 
color:#821818: :改变 文字 颜色 */ 
padding:Spx 8px 3px 12px: /* 改 变 文字 位 置 */ 
background-color:#e2c4c9: A/# 改 变 背 景色 */ 
border-top: 1px solid #636060: 上 边框 变换 ， 实 现 “ 按 下 去 ”的 效果 */ 
border-left: 1px solid #636060: 
border-bottom: 1px solid #eceQe0: 
border-right: 1px solid #ece0e0: 


} 

在 上 面 代码 中 定义 链接 在 默认 状态 下 显示 黑色 ,顶部 边框 线 和 左 侧 边框 线 为 浅 色 效 果 ， 而 右 侧 和 
| 底部 边框 线 颜色 为 深 色 。 当 鼠标 经 过 时 , 则 重新 设置 四 边 边框 线 颜 色 , 把 上 下 和 左右 边框 线 颜色 调换 ， 
| 这 样 利用 错觉 就 设计 出 了 一 个 凸凹 立体 效果 ， 此 时 网 页 的 显示 效果 如 图 3.39 所 示 。 


Eee Ms 
uy 男 内 新 闻 体 有 条 闻 。 | 。 国际 新 闻 娱乐 新 闻 ”| 。 财经 s 同 | 








| 图 3.39 ”设计 立体 按钮 样式 


.114 。 
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容 提示 : 设计 立体 样式 的 技巧 就 是 借助 边框 样式 的 变化 ( 主要 是 颜色 的 深浅 变化 ) 来 模拟 一 种 凸凹 
变化 的 过 程 ， 即 营造 一 种 立体 变化 效果 。 使 用 CSS 设计 立体 效果 的 3 种 技巧 如 下 。 
回 利用 边框 线 的 颜色 变化 来 制造 视觉 错觉 。 可 以 把 右边 框 和 底部 边框 结合 ， 把 顶部 边框 和 左边 
框 结合 ， 利 用 明暗 色彩 的 搭配 来 设计 立体 变化 效果 。 
回 利用 链接 背景 色 的 变化 来 营造 凸凹 变 化 的 效果 。 链接 的 背景 色 可 以 设置 相对 深 色 效果 ， 以 营 | 
造 目 起 效果 ， 当 鼠标 经 过 时 ， 再 定义 浅 色 背景 来 营造 凹 下 效果 。 
回 利用 环境 色 、 字 体 颜色 (前 景色 ) 来 烘托 这 种 立体 变化 过 程 。 


3.6.3 设计 苹果 风格 菜单 


苹果 菜单 风格 : 简洁 、 优 雅 、 圆 润 。 这 种 设计 风格 比较 流行 ， 本 示例 模仿 苹果 风格 设计 导航 菜单 
样式 ， 演 示 效 果 如 图 3.40 所 示 。 
【操作 步 又】 
第 1 步 ， 构 建 网 页 基本 结构 。 在 本 示例 中 构建 了 一 个 无 序列 表 结构 。 
<div id="nav"> 
<ul> 
<li class="n01"><a href="#">index</a></li> 
<li class="n02"><a href="#">Store</a></li> 
<li class="n03"><a href="#">Mac</a></li> 
<li class="n04"><a href="#">iPod +iTunes</a></li> 
<li class="n05"><a href="#">iPhone</a></li> 
<li class="n06"><a href="#">Downloads</a></li> 
<hl> 
</div> 


此 时 在 没有 CSS 样式 设置 时 的 显示 结果 如 图 3.41 所 示 。 
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3.40 设计 苹果 导航 菜单 3.41 构建 列表 结构 
第 2 步 ， 设 置 标签 默认 样式 。 


body 
font:12px "宋体 ". Arial. sans-serif 
Color:#333; 
} 
body. form. menu. dir fieldset blockquote. p. pre. ul. ol dl. dd. hl. h2. h3. h4. hs. h6 { 
padding:0: 
margin:0: 


“Me 


a 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


| 有 
| odt 
| list-style:none: 
! 
人 | E 
全 ~ | 以 上 代码 中 ,首先 设置 了 html 和 body 样式 , 然后 统一 常用 标签 的 样式 , 设置 它们 的 边界 都 为 0， 


Note | 并 清除 列表 结构 的 项 目 符号 。 此 时 的 显示 效果 如 图 3.42 所 示 。 
第 3 步 ， 定 义 导航 菜单 样式 。 
#nav { 
width:490px; 
height:38px; 
margin:15px 0 0 10px: 
background:url(images/globalnavbg.png) no-repeat: 


! 


text-indent:-9999px: 
background:url(images/globalnavbg.png) no-repeat 0 0: 
} 
以 上 代码 中 , 首先 定义 了 导航 菜单 包含 框 样式 , 定义 固定 宽度 和 高 度 , 设置 背景 图 , 通过 overflow: 
hidden 声明 隐藏 超出 区 域 的 内 容 。 设 置 列表 项 目 和 锚 点 浮动 显示 ， 实 现 并 列 显示 ， 设 置 display 为 块 
显示 ， 同 时 为 锚 点 设置 背景 图 像 ， 通 过 text-indent 属性 隐藏 文字 。 此 时 的 显示 效果 如 图 3.43 所 示 。 


SE ET 





3.42 ”设置 标签 默认 样式 3.43 ”设置 导航 菜单 项 目 样式 
第 4 步 ， 为 每 个 列表 项 目 定位 背景 图 像 的 显示 位 置 。 
#nav n01{f width:118px: } 
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#nav .n03 a:link { background-position:-23SpX 0: } 

#nav .n03 a:visited { background-position:-235px -114px: } 

#nav .n03 a:hover { background-position:-235px -38px: } | 4 
jav .n03 a:active { background-position:-235px -76px: } | 全 


#nav .n02 a:active { background-position:-118px -76px: } 
| 


#nav .n04 alink { backeround-position:-352px 0: } | 
和 nav n04 a:visited { background-position:-352px -114px: } 





加 av .n04 a:hover { background-position:-352px -38px:; } 

#nav .n04 a:active { background-position:-352px -76px; } 

加 av .n05 a:link { background-position:-469px 0: } 

#nav .n05 a:visited { backeround-position:-469px -114px: } | 

#nav .005 a:hover { background-position:-469px -38px: } | 

#nav .n05 aactive { background-position:-469px -76px: } | 

加 av .n06 a:link { background-position:-586px 0: } 

#nav .n06 a:visited { backeround-position:-586px -114px: } 

#nav .n06 a:hover { background-position:-586px -38px: } | 

和 nav .n06 a:active { background-position:-586px -76px: } | 
| 


从 以 上 代码 可 以 看 到 ， 定 义 了 6 个 样式 类 ， 利 用 包含 选择 器 ， 为 每 个 锚 点 定义 不 同 伪 类 状态 下 的 
样式 。 最 终 效果 如 图 3.44 所 示 。 








图 3.44 定位 背景 图 像 效 果 


【拓展 】 在 以 用 户 体验 为 中 心 的 网 页 设计 时 代 ， 很 多 用 户 会 因为 打开 网 页 速度 太 慢 而 关闭 网 页 。 
网 页 提速 有 很 多 的 方法 ， 其 中 一 条 就 是 减少 HITP 请 求 。 每 一 个 网 站 都 会 用 到 图 片 ， 当 一 个 网 站 有 
10 张 单独 的 图 片 , 就 意味 着 在 浏览 网 站 时 会 向 服务 器 提出 10 次 http 请 求 来 加 载 图 片 。 在 CSS 设计 中 ， 
一 般 使 用 CSS Sprites 技巧 减少 图 片 请 求 的 方法 ， 该 方法 也 称 之 为 CSS 精灵 。 

简单 描述 就 是 ， 将 多 张 小 图 片 合 成 为 一 张大 图 片 ， 减 少 HTTP 请 求 次 数 而 达到 网 页 提速 。 下 面 以 | 
淘宝 网 为 例子 ， 为 大 家 讲解 下 CSS Sprites 是 如 何 实现 的 。 如 果 要 在 网 页 上 显示 “今日 淘宝 活动 ”这 | 
个 图 片 ， 如 图 3.45 所 示 。 

实现 代码 如 下 : 

<div style="width: 107px: height:134px: background:url(sprites.gif) no-repeat -133px -153px"></div> 

加 ”width: 要 定位 图 片 的 宽度 。 

加 ”height: 要 定位 图 片 的 高 度 。CSS Sprites 要 求 必须 定义 容器 的 大 小 ， 不 然 会 显示 出 错 。 

回 。 background: url(sprites.g 记 定义 背景 图 片 的 路 径 ，no-repeat 定义 背景 不 重复 ，-133px 定义 义 

坐标 的 位 置 ，-153px 定义 y 坐标 的 位 置 。 | 

可 能 有 人 会 不 明白 这 个 -133px 和 -153px 是 怎么 来 的 ， 这 个 坐标 是 小 图 片 在 大 图 片 中 的 x 坐标 和 | 
y 左 边 坐 标 ， 如 图 3.46 所 示 。 红 色 点 的 坐标 是 在 大 图 上 x 坐标 为 133px，y 坐标 为 133px。 坐 标 也 可 
以 用 百分比 表示 ， 如 50% 50%。 有 人 会 提出 ， 为 什么 坐标 是 正 数 ， 这 里 却 写成 了 负数 呢 ? 


二 


i 


消费 者 保障 新 手 上 路 付款 方式 淘宝 特色 当前 据点 
| 了 Ri= 册 时 登 录 。 吕 多 要 让 
六 多 再 = 是 。 熏 些 录 。 员 免 责 天 顾 


| 
| 
| 
| wa ,| 二 而 本 二 
| A 
会 六 | | @g NY | $a 
| Ke 
从 鬼 物 








| 上 
| 图 3.45 拼合 的 背景 图 像 图 3.46 定位 背景 图 像 在 大 图 中 的 坐标 位 置 
| 


因为 用 background 定义 背景 图 片 ， 默 认 x、y 坐标 是 0、0。 如 图 3.46 所 示 今 日 淘宝 活动 图 片 的 
坐标 是 133px、153px， 所 以 要 用 -133px、-153px 才能 正确 地 显示 图 片 。 
回 ”CSS Sprites 的 优点 : 可 以 减少 HITP 的 请 求 数 ， 如 10 张 单独 的 图 片 就 会 发 出 10 次 的 HTTP 
请 求 ， 合 成 为 一 张大 图 片 ， 只 会 发 出 一 次 的 HTTP 请 求 ， 从 而 提高 了 网 页 加 载 速度 。 
回 CSS Sprites 的 缺点 : 由 于 每 次 图 片 改动 都 要 往 这 张 图 片 添加 内 容 ， 图 片 的 坐标 定位 要 很 准 
确 ， 稍 显 繁琐 。 坐 标定 位 要 固定 为 某 个 绝对 值 ， 因 此 会 失去 一 些 灵活 性 。 
CSS Sprites 有 优点 也 有 缺点 。 要 不 要 使 用 ,具体 要 看 网 页 以 加 载 速度 为 主 ,还 是 以 维护 方便 容易 
为 主 。 


3.6.4 ”设计 选项 卡 


选项 卡 ， 也 称 之 为 标签 页 ， 通 过 单 击 相应 的 标签 名 后 将 内 容 显示 在 固定 的 区 域 。 而 在 网 页 中 ,我 
们 可 以 以 多 种 不 同 的 形式 表现 。 一 般 通 过 JavaScript 脚本 辅助 显示 需要 浏览 的 内 容 ， 隐 藏 暂时 不 需要 
浏览 的 内 容 。 本 示例 使 用 纯 CSS 设计 这 种 效果 ， 演 示 效 果 如 图 3.47 所 示 。 


< 
[eas | meus | xe [So | sa | tn | 





3.47 块 状 选项 卡 





【操作 步骤 】 

| 第 1 步 ， 设 计 原 理 。 这 类 选项 卡 主要 是 由 选项 卡 标题 以 及 其 内 容 区 域 所 组 成 ， 并 且 是 由 多 个 相同 
| 类 似 性 质 的 内 容 组 成 了 一 个 选项 卡 群体 , 通过 鼠标 单 击 选项 卡 标题 的 事件 或 者 鼠标 经 过 选项 卡 标题 的 
| 事件 触发 选项 卡 标题 相对 应 的 内 容 区 域 显示 。 下 面 以 效果 示意 图 分 析 一 下 选项 卡 是 怎么 通过 CSS 样 


“0e 
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式 实现 最 终 效 果 图 中 的 布局 方式 的 ， 如 图 3.48 所 示 。 





选项 卡 标题 选项 上 标题 下 和 项 标题 | 
Ee 









选项 卡 内 容 区 





选项 卡 标题 


选项 卡 内 容 区 域 C 


图 3.48 选项 卡 示意 图 


从 图 3.48 可 以 看 到 ， 选 项 卡 主要 是 由 多 个 “选项 卡 标题 ”和 “选项 卡 内 容 区 域 ”组 成 。 通 过 CSS 
样式 中 的 浮动 (float) 属性 或 者 定位 (position) 属性 将 “选项 卡 标题 ”和 “选项 卡 内 容 区 域 ”分 别 控 
制 在 某 个 区 域 ， 例 如 ， 可 以 通过 浮动 (float) 的 方式 将 “选项 卡 标题 ”横向 排列 在 一 排 ， 再 通过 定位 

(position) 的 方式 将 “选项 卡 内容 区 域 ” 定 位 在 “选项 卡 标 题 ” 的 下 面 。 

第 2 步 ， 设 计 选 项 卡 结构 。 首 先 利 用 一 个 div 标签 将 所 有 的 内 容 包 含 在 一 个 容器 中 ， 再 根据 示意 
图 所 展示 的 效果 书写 “选项 卡 标 题 ” 和 “选项 卡 内 容 区 域 ” 的 代码 结构 。 在 “选项 卡 标题 ”(<div 
class="tab_1"> 包 含 框 ) 区 域 包含 一 个 列表 结构 ， 在 “选项 卡 内 容 区 域 ”(<div class="content"> ) 中 包 
含 多 个 内 容 框 。 

<div class="tab"> 

<div class="tab_1"> 
<ul> 
<li><a hre 全 "#a"><span> 栏 目 公告 </span></a></li> 
<li><a hre 仁 "#b"><span> 新 闻 动 态 </span></a></li> 
<li><a hre 仁 "fc"><span> 社 会 大 观 </span></a></li> 
<li><a hre 人 ="#d"><span> 百 态 人 生 </span></a></li> 
<li><a hre 仁 "fe"><span> 精 品 博文 </span></a></li> 
<li><a hre 伍 "#f'><span> 本 站 团购 </span></a></li> 
</ul> 
</div> 
<div class="content"> 
<div class="tab 2"” id="a"> 
<h3> 栏 目 公告 <h3> 
<p>1.2011 年 第 一 季度 优秀 作者 06-10 。 《来稿 精 选 》 第 四 期 推出 。</p> 
<p>2. 动 画 片 ， 动 画 梦 工场 .…. 文 集 信息 标题 :栏目 公告 简介 : 创建 : 2008-01-09。</p> 











现 
) 六 





<p>3. 栏 目 则 在 为 广大 河南 网 友 提供 一 个 发 表 建议 ,反映 社会 各 层面 问题 的 公共 网 络 平台 。</p> | 
<p>4.VIP 用 户 资费 即日 开始 调整 [gongxm][2009-07-23] 即日 开始 VIP 栏目 实现 限制 访问 ,</p> ， 


</div> 
<div class="tab 2" id="b"> 
<h3> 新 闻 动 态 </h3> 


“MBs 
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<p>“。 南方 五 省 区 电力 供应 告急 ， 紧 张 情 况 或 持续 </p> 
<p>， 二 三 线 城市 限购 名 单 呼之欲出 “金九银 十 ”</p> 
<p>。 华电 新 疆 公 司 亚 欧 博 览 会 保 电 工作 准备 就 绪 </p> 
<p>， 住 建部 正 研 究 相 关 政 策 使 房地产 去 投机 投资 化 </p> 
</div> 
<div class="tab 2" id="c"> 
<h3> 社 会 大 观 </h3> 
<p>1.2011 年 第 一 季度 优秀 作者 06-10 。《 来 稿 精 选 》 第 四 期 推出 。</p> 
<p>2. 动 画 片 ， 动 画 梦 工场 ... 文 集 信息 标题 :栏目 公告 简介 : 创建 : 2008-01-09。</p> 
<p>3. 栏 目 旨 在 为 广大 河南 网 友 提供 一 个 发 表 建议 、 反映 社 会 各 层面 问题 的 公共 网 络 平台 。</p> 
<p>4.VIP 用 户 资费 即日 开始 调整 [gongxmj[2009-07-23] 即日 开始 VIP 栏目 实现 限制 访问 。</p> 
</div> 
<div class="tab 2" id="d"> 
<h3> 百 态 人 生 </h3> 
<p>1. 男 子 欲 疏 行 回 家 续 : 被 送 走 后 重 现 郑州 。</p> 
<p>2. 网 络 文学 先驱 “辣子 蔡 ” 沉 寂 10 年 重出 江湖 。</p> 
<p>3. 初 三 学 生 不 服 调查 管教 用 板结 将 女 教师 打 尝 。</p> 
<p>4. 重 庆 妈 妈 得 病 无 钱 治 姐妹 俩 上 街 卖 头发 (组 图 )。</p> 
</div> 
<div class="tab 2" id="e"> 
<h3> 精 品 博文 </h3> 
<p>1. 济 缘 算命 ， 哪 种 八字 适合 嫁 入 豪门 ? 命理 点 评 。</p> 
<p>2. 楼 市 新 政 引发 海外 购房 热 国人 恋 房 情结 令 人 担忧 。</p> 
<p>3. 佛 教 在 线 精品 博文 频道 ， 汇 集 佛教 界 法 师 博客 中 的 精品 文章 ， 为 大 家 提供 的 平台 。</p> 
<p>4 远离 黑暗 的 提示 不 要 让 情感 乱 了 心智 ， 在 “ 假 相 、 妄 想 ” 中 “ 求 不 得 ”。</p> 
</div> 
<div class="tab 2" id="f"'> 
<h3> 本 站 团购 </h3> 
<p>1. 世 界 知名 品牌 Swissgear 专场 ! 仅 48 元 全 国 包 邮 。</p> 
<p>2. 上 网 一 族 必 备 ! 仅 39.9 元 ， 原 价 228 元 香港 RAKISH 电脑 防 辐 。</p> 
<p>3.2011 新 款 9726， 第 一 团 首 发 震撼 全 新 上 市 ! 99 元 全 国 包 邮 。</p> 
<p>4. 世 界 知名 品牌 Swissgear 专场 ! 仅 48 元 全 国 包 邮 ， 即 享 原价 1。</p> 
</div> 


</div> 


</div> 


第 3 步 ， 定 义 网 页 基本 属性 和 外 层 包 含 框 样式 。 


* {font-size:12px:} 

html body { 
Iargin:0: 
text-align:center: 
overflow:hidden: 
height:100%: 
width:100%: 
padding-left:30px: 
background:#999999: 


} 
uf 


list-style-type:none: 
margin:Opx; 
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在 以 上 代码 中 ， 首 先 定义 了 网 页 基本 属性 ， 统 一 网 页 字体 大 小 为 12 像素 ， 并 定义 网 页 背景 色 为 | 
灰色 。 清 除 列表 结构 的 项 目 符号 ， 清 除 列表 缩 进 ， 设 置 选项 卡 包含 框 宽度 为 500 像素 ， 固 定 高 度 。 显 | 
示 效 果 如 图 3.49 所 示 。 
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图 3.49 设计 网 页 基本 样式 
第 4 步 ， 设置 内 层 包 含 框 和 内 容 样式 。 


i 
float:left: 


一 


4 


0 


: 


。 
和 


以 上 代码 包括 3 部 分 : 第 一 部 分 是 前 5 个 样式 ， 逐 层 定义 选项 卡 标题 包含 框 样式 ， 从 外 到 内 ， 逐 
层 设 置 ， 第 二 部 分 是 定制 内 容 包 含 框 样式 ， 第 三 部 分 定义 鼠标 经 过 标题 栏 时 ， 选 项 卡 的 样式 ， 显 示 效 
果 如 图 3.50 所 示 。 
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3.50 设置 完毕 的 选项 卡 效果 图 


| 3.6.5 “设计 图 片 预览 


图 片 浏览 的 功能 主要 是 展示 相片 ， 让 图 片 以 特定 的 方式 展现 在 浏览 者 的 面前 。 本 示例 利用 纯 CSS 
| 设计 ， 功 能 简单 但 很 有 趣味 ， 其 中 应 用 很 多 CSS 技巧 ， 演 示 效 果 如 图 3.51 所 示 。 
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图 3.51 图 片 预览 


【操作 步骤】 
第 1 步 ， 设 计 原 理 。 简 易 的 CSS 相册 功能 分 析 如 下 。 


3 
) 





相册 在 默认 状态 情况 下 以 缩 略图 的 形式 展现 给 浏览 者 ， 并 且 不 压缩 相片 的 原 有 宽度 和 高 度 | 


属性 ， 而 是 取 相片 的 某 个 部 分 作为 缩 略图 形式 。 
当 鼠 标 悬 停 于 某 张 缩 略 图 时 ， 相 册 列 表 中 的 缩 略 图 恢复 为 原始 相片 的 宽度 和 高 度 ， 展 现在 
相册 的 某 个 固定 区 域 。 
当 鼠 标 移 开 缩 略 图 区 域 时 ， 缩 略 图 列表 恢复 原始 形态 。 
保持 相册 的 HTML 结构 是 最 简洁 、 最 合理 的 结构 ， 不 出 现 多 余 的 相片 内 容 。 
根据 以 上 几 个 关于 CSS 样式 制作 的 简易 相册 功能 要 求 ,可 以 归纳 为 以 下 几 点 在 HTML 结构 与 CSS 
样式 上 需要 把 握 的 重点 : 
回 ”结构 清晰 明了 ， 无 元 余 的 HIML 结构 代码 。 
鼠标 悬 停 效 果 在 CSS 样式 中 就 只 能 利用 :hover 伪 类 才能 完成 ， 而 IE6 浏览 器 在 解释 :hover 
伪 类 时 只 能 将 其 使 用 在 锚 点 a 标签 中 才 有 效 。 
了 解 整个 CSS 相册 中 需要 把 握 的 重点 ， 还 需要 分 析 如 何 实现 以 下 两 个 效果 : 
不 压缩 图 片 ， 而 是 将 相片 中 的 某 个 部 分 作为 缩 略图 显示 在 缩 略 图 列表 区 域 。 
回 ” 当 鼠标 悬 停 缩 略 图 时 ， 如 何 将 图 片 以 完整 的 图 片 形 式 显示 在 相片 展示 区 域 。 
第 2 步 ， 设 计 选 项 卡 结构 。 使 用 a 元 素 包 含 一 个 缩 略图 和 一 个 大 图 ， 通 过 <span> 标 签 包含 动态 显 
示 的 大 图 和 提示 文本 ， 此 时 页 面 显示 效果 如 图 3.52 所 示 。 
<div class="container"> 
<a class="picture" hre 人 ="#"><img class="small-pic" src="images/small-l.jpe" /><span><img src="images/ 
1.jpg" 户 <br 户 协 者 火烧 北京 的 传统 小 吃 </span></a> 
<a class="picture" hre 人 ="#"><img class="small-pic" src="images/small-2.jpe" /><span><img src="images/ 
2jpg" /><br 亿 台湾 菜 式 药材 米酒 香气 的 烧酒 鸡 </span></a> <br 户 
<a class="picture" href="#"><img class="small-pic" src="images/small-3.jpe" /><span><img src="images/ 
3.jpg" ><br /> 福建 菜 十 香 醉 排骨 </span></a> 
<a class="picture" hre 人 ="#"><img class="small-pic" src="images/small-4.ipe" /><span><img src="images/ 
4.jpg" /><br /> 家 常 菜 宫 保 鸡 丁 </span></a> <br 亡 
<a class="picture" hre 人 ="#"><img class="small-pic" src="images/small-6.ipe" /><span><img src="images/ 
6jpg" /><br 人 > 中华 美食 东 坡 肘子 </span></a> 
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<a class="picture" href="#"><img class="small-pic" src="images/small-5.jpe" /><span><img src="images/ 
5jpg" /><br 户 毛 主席 爱 吃 的 毛 氏 红烧 肉 </span></a> </div> 





第 3 步 ， 定 义 图 片 浏览 样式 。 


body { 
background-color:#CCCCCC: 

} 

.Container { 
position: relative; 
margin-left:SOpx: 
margin-top:50px: 

} 

.Picture img { 
border: 1px solid white: 
margin: 0 Spx Spx 0: 

LE 

.Picture:hover { 
background-color: transparent: 

’ 

.picture:hover img { 
border: 2px solid blue: 

Hb 

.picture .small-pic { 
width:100px: 
height:60px: 
border:#FF6600 2px solid: 

} 

.picture span { 
position: absolute: 
background-color:#FFCC33: 
padding: 5px: 
left: -1000px: 
border: 1px dashed gray: 
visibility: hidden: 


图 3.52 ”设计 结构 效果 图 
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I 
color: black: 
font-weight:800; 
text-decoration:none; 
text-align:center: 
} 
.picture span img { 
border-width: 0; 
padding: 2px; 
width:400px; 
height:300px: 
上 
.picture:hover span { 
Visibility: visible; 
top: 0; 
left: 230px: 
上 













[为 相对 定位 position:relative;， 这 样 其 中 


包含 的 各 个 绝对 定位 元 素 都 是 以 当前 包含 框 为 参照 位 。 
默认 设置 a 元 素 中 包含 的 span 元 素 为 绝对 定位 显示 ， 并 隐藏 起 来 ， 而 当 鼠 标 经 过 时 ， 重 新 恢复 
显示 span 元 素 ， 以 及 其 包含 的 大 图 。 鼠 标 移 出 之 后 ， 重 新 隐藏 起 来 。 

由 于 span 元 素 是 绝对 定位 ， 可 以 把 所 有 大 图 都 固定 到 一 个 位 置 ， 并 统一 大 小 ， 默 认 时 它们 都 是 
重 营 在 一 起 ， 并 隐藏 显示 。 

本 实例 中 所 提 到 的 两 个 重点 ， 其 实 就 是 对 于 CSS 样式 的 两 种 应 用 方式 ;相对 定位 应 用 以 及 绝对 | 
定位 应 用 时 的 参照 对 象 。 对 这 个 图 片 浏览 实现 方式 有 兴趣 的 读 
者 可 以 通过 尝试 调整 相册 列表 的 布局 方式 、 显 示 的 位 置 等 CSS 
样式 而 巩固 加 深 对 CSS 样式 的 理解 。 ss 


3.6.6 设计 灯箱 广告 


在 网 页 上 随处 可 见 的 灯箱 广告 ， 有 效 地 提高 了 视觉 冲击 
力 ， 不 断 变换 的 图 片 和 文字 ， 给 浏览 者 不 同 的 感受 ， 灯 箱 广告 
的 动静 结合 ， 引 起 人 们 的 注意 ， 从 而 吸引 人 眼球 ， 以 达到 最 好 
的 经 济 利益 。 本 例 介绍 用 CSS 设置 最 简单 的 灯箱 广告 的 方法 。 
演示 效果 如 图 3.53 所 示 。 




































【操作 步 又】 
第 1 步 ， 首 先 构建 网 页 结构 。 在 本 例 中 ， 应 用 <dl> 标 记 创 图 3.53 灯箱 广告 


建 列 表 ， 从 而 实现 灯箱 广告 效果 。 
<dl id="menu"> 

<dt> 

<a href="#img1">1</a> 

<a href="#img2">2</a> 

<a href="#img3">3</a> 

<a hre 合 "机 mg4">4</a> 
</d> 
<dd> 
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<img src="images/1.JPG" id="img1"/> 
<img src="images/2.JPG" id="img2"/> 
<img src="images/3.JPG" id="img3"/> 
<img src="images/4.JPG" id="img4"/> 





</dd> 
| </dl> 
在 本 示例 中 应 用 <dl></dl> 标 记 来 创建 列表 ， 并 创建 “menu” 类 来 声明 其 样式 ， 在 列表 中 添加 4 


| 幅 图 片 ， 从 而 实现 灯箱 广告 。 
第 2 步 ， 定 义 网 页 的 基本 属性 和 menu 类 样式 。 


| *{ margin:0; padding:0:} 

| body{ "网 页 基本 属性 */ 
| margin:30px auto auto 30px: 刻 四 周 补 白 */ 

| background-color:#000000; 族 网 页 背景 颜色 */ 
| 

| #menu{ /#*dl 标记 类 样式 */ 
| position:relative; 族 相 对 定位 */ 

| height:180px: 族 高 度 */ 

| width:210px: 刻 宽 度 */ 

| background:#ccc: /*dl 标记 的 背景 颜色 #/ 
| text-align:center: 

| padding-top:20px; 

| 国 

| 


在 以 上 的 代码 中 用 *{ margin:0; padding:0;} 语 句 设 置 了 网 页 中 所 有 标签 的 margin 和 padding 属性 ， 
并 设置 了 网 页 背景 颜色 。 在 menu 类 样式 中 ， 首 先 设置 其 定位 为 relative， 此 时 的 显示 效果 如 图 3.54 
所 示 。 











国 
多 
| 
闻 
于 
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局 
新 





| 从 图 3.54 中 可 以 看 到 , 由 于 没有 设置 <dl></dl> 中 <df> 和 <dd> 的 样式 , 使 得 4 幅 图 片 以 及 数字 “1、 
| 2、3、4” 的 位 置 错 乱 ， 接 下 来 对 dt 样式 进行 设置 。 
| 第 3 步 ， 设置 dt 样式 类 和 dt 标记 中 的 a 样式 类 ， 从 而 实现 设置 <dl> 列 表 中 的 项 目标 题 “1、2、3 


| 
| 和 4”。 

| #menu dt{ /*dt 样式 类 */ 

| Position:absolute: 证 绝 对 定位 */ 

| Tight:Spx: 片 右 边框 离 父 级 元 素 的 距离 */ 
| bottom:Spx: 刻下 边框 离 父 级 元 素 的 距离 *4/ 
| 
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#menu dtaf /*a 样式 类 */ 
float-left: 记 左 对 齐 */ 
display:block: 族 定 义 为 块 级 元 素 */ 
padding:1px 4px: 
border: 1px solid #ccc: 证 为 列表 项 加 边框 */ 
margin-left:2px; 
text-decoration:none: 让 不 显示 下 划 线 */ 
color:#309:; 刻字 体 颜 色 */ 
font-size: 12px:; 

} 

#menu dt a:hover { # 鼠 标 悬 停 时 的 a 样式 类 */ 
background-#fE 
color:#FF0000; 

} 


以 上 代码 实现 了 如 图 3.55 所 示 的 样式 。 


图 3.55 dt 样式 类 


首先 定义 了 dt 类 样式 ， 其 中 position:absolute 语句 表示 绝对 定位 ， 也 就 是 其 定位 参照 父 级 元 素 的 
原点 ， 进 行 上 、 下 、 左 、 右 的 移动 。 在 dt 样式 类 的 a 标记 下 ， 首 先 利用 float:left 语句 ， 使 列表 项 横 
向 显示 ， 由 于 a 标记 默认 是 行内 元 素 ， 所 以 用 display:block 语句 将 其 定义 为 块 级 元 素 ， 在 a:hover 中 
定义 了 鼠标 悬 停 时 的 背景 颜色 和 字体 颜色 。 

第 4 步 ， 设 置 dd 样式 类 。 






#menu dd{ /*dd 类 样式 */ 
width:210px: /# 宽 度 3/ 
height:144px: 证 高 度 */ 
overflow:hidden: 证 隐藏 滋 出 */ 

} 


在 dd 类 样式 中 ， 应 用 overflow:hidden 语句 实现 图 片 的 溢出 隐藏 ，overflow:hidden 的 作用 就 是 把 
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超过 其 设置 的 高 度 和 宽度 部 分 隐藏 起 来 ， 在 本 例 中， 设置 了 图 片 的 宽度 为 210px， 高 宽 为 144px, 但 | 


是 由 于 在 dd 中 添加 了 4 张 图 片 ， 而 只 需要 显示 一 张 ， 不 能 让 4 张 图 片 同 时 显示 ， 所 以 在 这 里 设置 了 
overflow:hidden 语句 ， 让 其 他 3 张 图 片 隐 藏 起 来 。 


有 
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在 网 页 中 设计 列表 样式 


( 怨 视频 讲解 : 33 分 钟 ) 


列表 在 生活 中 随处 可 见 ， 在 网 页 中 也 是 如 此 。 大 多 数 网 页 都 包含 形式 多 样 的 列表 ， 如 新 闻 
列表 、 导 航 列表 或 分 类 列表 等 。 页 面 制作 人 员 为 了 能 使 网 页 的 HIML 结构 更 加 符合 语义 ， 会 远 
用 不 同 的 标签 将 列表 信息 表现 在 网 页 中 

HTML 提供 了 项 目 列表 的 基本 功能 , 包括 顺序 列表 的 <ol> 标 签 和 无 顺序 列表 的 <ul> 标 签 等 。 
当 引 入 CSS 后 ,项 目 列表 被 赋予 了 很 多 新 的 表现 形式 。 本 章 主 要 国 绕 项 目 列表 的 基本 CSS 属性 
进行 介绍 ， 同 时 结合 网 页 设计 中 经 常 应 用 的 列表 结构 栏目 ， 配 合 CSS 进行 多 样 化 样式 设计 。 


【 学 习 重 点 】 

WI 设计 列表 信息 

WI 用 CSS 设置 项 目 列表 符号 

I CSS 控制 项 目 列表 横竖 的 方法 

MI 综合 运用 项 目 列表 进行 网 页 中 的 菜单 设计 
WI 设计 图 文 混 排 的 列表 栏目 

WI 设计 列表 结构 的 导航 栏目 


第 企 章 在 网 页 中 设计 列表 样式 一 S T 
性 


4.1 设计 列表 信息 


在 现实 生活 中 每 个 人 都 会 接触 到 各 式 各 样 的 列表 信息 ， 去 超市 购物 前 会 罗列 一 张 购物 清单 , 购物 | 
完毕 结账 时 需要 排队 等 候 ， 结 账 完毕 会 收 到 结账 清单 。 诸 如 此 类 的 情况 出 现 ， 我 们 都 可 以 将 其 视 为 列 
表 。 购 物 清单 是 列表 ， 排 队 等 候 的 人 群 是 列表 ， 结 账 清单 还 是 列表 ， 如 此 之 多 的 列表 出 现在 大 家 的 身 
边 ， 你 是 否 注意 到 了 呢 。 

网 络 生活 近似 于 现实 生活 ， 在 现实 生活 中 随处 可 见 的 列表 ， 在 网 页 中 也 是 可 以 看 到 的 。 例 如 ， 当 
我 们 在 网 络 中 购物 时 ， 会 选择 很 多 东西 放 入 购物 车 中 ,那么 在 购物 车 中 看 到 的 物品 列表 ; 网 购 完毕 付 
账 后 看 到 的 购物 清单 列表 等 。 

网 页 中 的 列表 并 非 都 是 显而易见 的 ， 例 如 ， 网 站 的 导航 其 实 也 是 列表 ,用 户 在 某 个 站 点 中 排名 也 
是 列表 .这 么 多 的 列表 是 不 是 让 你 感觉 有 点 晕 眩 了 ? 不 用 担心 , 在 分 析 各 个 列表 在 网 站 如 何 运用 之 前 ， 
先 了 解 一 下 HIML 中 的 3 种 列表 模式 : 无 序列 表 (ul) 、 有 序列 表 (ol) 和 自 定义 列表 (dl) 。 


4.1.1 无 序列 表 


无 序列 表 就 是 没有 次 序 的 列表 ， 列 表 项 目 不 分 先后 。 以 生活 中 去 超市 购物 为 例 ， 不 会 考虑 先 买 什 
么 再 买 什么 ， 而 是 看 到 所 需 物品 就 直接 放 到 购物 车 中 。 
<ul> 标 签 表示 无 序列 表 的 集合 ， 并 且 <ul> 标 签 中 一 定 是 紧 跟 <li> 标 签 才 是 正确 的 写法 。 
<u> 
<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 


<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 
</ul> 


HTML 对 标签 有 着 相对 严格 的 要 求 , 每 个 标签 都 必须 关闭 ,而 且 每 个 标签 之 间 的 嵌 套 要 正确 , 尤 | 
其 是 列表 的 结构 。 下 面 罗列 几 种 在 HTML 中 无 序列 表 的 错误 嵌 套 方法 。 
回 “ 错误 一 : <ul> 标 签 和 <li> 标 签 之 间 插 入 了 其 他 的 标签 。 
<ul> 
<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 
<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 


<div> 错 误 的 无 序列 表 幅 套 结构 </div> 
</ul> 


回 ”错误 二 : 多 层 <ul> 标 签 嵌 套 时 的 错误 。 





<ul> 
<1i> 错 误 的 无 序列 表 嵌 套 结构 </i> 
<ul> 
<I 记 错误 的 无 序列 表 嵌 套 结构 </li> 
</ul> 
</ul> 


回 “错误 三 :; <l> 标 签 未 关闭 。 


<ul> 
<1i> 错 误 的 无 序列 表 嵌 套 结构 
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<ul> 
<1i> 错 误 的 无 序列 表 嵌 套 结构 <i> 
<ul> 
<1i> 错 误 的 无 序列 表 嵌 套 结构 <Jli> 


关门 | 


| 以 上 几 种 错误 的 写法 纠正 后 ， 应 该 以 如 下 形式 书写 。 
Note | 错误 一 的 纠正 ， 将 <div> 标 签 放 到 <ul> 标 签 的 外 面 ， 或 者 删除 。 


<ul> 
<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 
<1i> 无 序列 表 中 的 其 中 一 条 内 容 </li> 
</ul> 
<div> 将 该 标签 内 容 移 出 <ul> 标 签 的 嵌 套 ， 或 者 删除 </div> 


错误 二 的 纠正 ， 多 层 UU 无 序列 表 标签 嵌 套 时 ， 应 该 将 <ul> 标 签 放 在 <li> 标 签 之 间 。 


<ul> 
<1i> 多 层 <ul> 标 签 嵌 套 时 
<ul> 
<li><ul> 标 签 应 该 放 在 <li> 标 签 之 间 </i> 
</ul> 
<> 
</ul> 
错误 三 的 纠正 ， 关 闭 <li> 标 签 即 可 。 


<ul> 
<1i> 将 <li> 标 签 关闭 即 可 
<ul> 








<1i> 将 <li> 标 签 关闭 即 可 </li> 


<> 
<li> 将 <l 记 标签 关闭 即 可 </li> 
</ul> 
无 序列 表 可 以 分 为 一 级 无 序列 表 和 多 级 无 序列 表 ， 一 级 无 序列 表 在 浏览 器 中 解析 后 ， 会 在 列表 
<li> 标 签 前 面 添加 一 个 小 黑 点 的 修饰 符 ， 而 多 级 无 序列 表 则 会 根据 级 数 而 改变 列表 前 面 的 修饰 符 。 
一 级 无 序列 表 ， 在 无 任何 样式 修饰 的 浏览 器 默认 解析 时 显示 效果 ， 如 图 4.1 所 示 。 
| <u> 
| <li> 一 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 </li> 
ll 


<1i> 一 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效 果 </li> 
<ul> 


多 级 无 序列 表 ， 在 无 任何 样式 修饰 的 浏览 器 默认 解析 时 显示 效果 ， 如 图 4.2 所 示 。 


<Ul> 
<1i> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 1 
<Ul> 
| <li> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 2</li> 
| <1i> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效 果 2</li> 
| <li> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 2 
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> 


<ul> 
<1i> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效 果 3</li> 
<1i> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 3</li> 
< 
<> 
<ul> 


<I> 
<li> 多 级 无 序列 表 的 浏览 器 默认 解析 后 的 页 面 效果 1</li> 
< 


国人 Eeewocacle-… 国 


* 多 级 无 序列 表 的 浏览 器 黑 认 解析 后 的 页 面 效 果 1 
多 级 无 序列 表 的 浏览 器 冉 认 解析 后 的 页 面 效 果 2 


SE 外 behon A 
浏览 


器 默认 解析 后 的 页 面 效果 3 
， 一 级 无 序列 表 的 浏览 器 默认 解 忻 后 的 ete 英 器 财 认 解析 后 的 页 面 效果 3 
ee ~ gE ee 页 面 效果 1 





图 4.1 一 级 无 序列 表 的 默认 解析 效果 图 4.2 多 级 无 序列 表 的 默认 解析 效果 
通过 效果 图 可 以 发 现 无 序列 表 在 随 着 其 所 包含 的 列表 级 数 的 增加 而 逐渐 缩 进 , 并 且 随 着 列表 级 数 
的 增加 而 改变 不 同 的 修饰 符 。 


浏览 器 在 解析 无 序列 表 时 , 会 不 断 地 对 不 同 级 别 的 无 序列 表 进行 缩 进 显示 , 但 修饰 符 却 只 有 3 种 。 
如 果 3 层 岩 套 都 无 法 满足 网 页 中 所 需要 使 用 的 无 序列 表 时 , 读者 就 应 该 反思 这 个 页 面 中 的 列表 嵌 套 是 
否 过 多 了 。 

合理 地 使 用 HTML 标签 才能 让 页 面 的 结构 更 加 清晰 ， 相 对 地 更 符合 语义 。 不 过 不 用 担心 ， 如 果 网 
页 中 实在 需要 更 多 层 嵌 套 ， 并 且 是 不 同 的 修饰 符 时 ， 还 是 可 以 利用 CSS 样式 来 修改 其 修饰 符 的 。 


4.1.2 ”有 序列 表 


成 绩 单 是 大 家 比较 熟悉 的 有 序列 表 了 ， 从 第 一 名 一 直 排 到 最 后 一 名 。 有 序列 表 ， 相 对 于 无 序列 表 
而 言 ， 最 大 的 区 别 就 是 有 序列 表 是 带 有 排名 性 质 的 列表 ， 如 图 4.3 所 示 。 


<oP 
<1i> 张 三 <i> 
<H> 李 四 <Ji> 
< 这 王 五 Ali> 
<I 记 赵 六 </ 户 
<lol> 





<ol> 标 签 表示 有 序列 表 的 集合 ， 其 必须 包含 <li> 标 签 ， 具 体形 式 与 无 序列 表 一 样 ， 但 浏览 器 解析 | 


有 序列 表 时 的 默认 效果 却 是 不 同 的 。 
有 序列 表 也 可 分 为 一 级 有 序列 表 和 多 级 无 序列 表 , 浏览 器 默认 解析 时 都 是 将 有 序列 表 以 阿拉 伯 数 
字 表 示 ， 并 增加 缩 进 ， 如 图 4.4 所 示 为 一 级 有 序列 表 。 
<oP> 
<1i> 一 级 有 序列 表 默认 解析 效果 </li> 
<H> 一 级 有 序列 表 默 认 解析 效果 </li> 


<1i> 一 级 有 序列 表 默 认 解 析 效 果 </li> 
</ol> 


“ls 


i 


Sreean no- RolSimee | 


Ss 
1 一 级 有 序列 表 默 认 解 析 效 果 

大 儿 2. 一 级 有 序列 表 默 认 解 析 效 果 

贪 内 ! 六 3 一角 有 序列 表 默认 解析 效果 





Note | 图 4.3 ”有 序列 表 简 单 示例 图 4.4 一 级 有 序列 表 默 认 解 析 效 果 


多 级 有 序列 表 在 浏览 器 中 默认 解析 效果 如 图 4.5 所 示 。 


<ol> 
<1i> 多 级 有 序列 表 默认 解析 效果 1</li> 
<Hi> 多 级 有 序列 表 默 认 解析 效果 1 
<ol> 
<1i> 多 级 有 序列 表 默认 解析 效果 2</li> 
<1i> 多 级 有 序列 表 默 认 解析 效果 2 
<ol> 
<li> 多 级 有 序列 表 默认 解析 效果 3</li> 
<1i> 多 级 有 序列 表 默 认 解析 效果 3</li> 
<1i> 多 级 有 序列 表 默认 解析 效果 3</li> 
</ol> 


</li> 
<li> 多 级 有 序列 表 默认 解析 效果 2</li> 
<lol> 


<> 
<li> 多 级 有 序列 表 默 认 解析 效果 1</li> 
</ol> 


3 字 级 有 序列 
3. 地 级 有 序列 表 味 认 解 桥 效 办 1 





4.5 多 级 有 序列 表 默 认 解析 效果 


有 序列 表 在 多 级 的 情况 下 ， 理 论 上 应 该 是 随 着 层级 的 增加 而 出 现 1.1 或 者 1.1.1 之 类 的 数字 ， 但 
浏览 器 却 无 法 在 网 页 中 直接 解析 出 这 样 的 效果 ， 如 果 需 要 使 用 1.1 或 者 1.1.1 之 类 的 数字 表示 方式 ， 
| 那么 就 只 能 使 用 CSS、JavaScript 或 者 手工 加 入 。 
| 【示例 】 在 上 面 示例 基础 上 ， 在 文档 中 添加 如 下 CSS 样式 代码 ， 可 以 设计 数字 目录 效果 ， 如 图 4.6 


| 
| 所 示 。 

| ‘<style type="text/css"> 

| ol { list-style:none:} 颇 清 除 默认 的 序号 */ 

| li:before {color:-#f00: font-family:Times New Roman:} 刻 设 计 层 级 目录 序号 的 字体 样式 */ 

| lifcounterincrement'a 1:} 人 # 设 计 递增 函数 a， 递 增 起 始 值 为 1 */ 


| li:before {content:counter(a)". ":} 证 把 递增 值 添 加 到 列表 项 前 面 */ 


“2 
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lilif{counter-increment:b 1:} 片 设计 递增 函数 b， 递 增 起 始 值 为 1 */ 
li li:before {content:counter(a)"."counter(b)". ":} /# 把 递增 值 添加 到 二 级 列表 项 前 面 和 / 
lilili{counter-increment:c 1:} 庄 设 计 递增 函数 ce， 递增 起 始 值 为 1 */ 
lili ti:before {content:counter(a)"."counter(b)"."counter(c)". ":} /* 把 递增 值 添加 到 三 级 列表 项 前 面 */ : ; 
< | 用) 
E | 
KE Er | 
ee 





: 效果 1 
2 多 级 有 序列 表 默 认 解 析 欢 果 1 
2 1 这 级 有 序 下 表 束 认 录 析 
22 多 级 有 序列 表 黑 认 前 本 
22.1. 多 级 有 | 


223 多 级 有 | 引导: 
23 条 级 有 序 5| 寺 于 认 襄 析 效 果 2 
3 多 级 有 序列 表 默 认 解 析 戏 晶 ] 





图 4.6 设计 多 级 有 序列 表 目 录 效果 | 
4.1.3” 自 定义 列表 


顾名思义 ， 自 定义 列表 就 是 以 自 定义 形式 定义 的 列表 。 在 HTML 中 自 定义 列表 用 <dl> 标 签 表示 ， 
在 <dl> 标 签 中 包含 <df> 标 签 和 <dd> 标 签 , 一 个 <dt> 标 签 对 应 多 个 或 者 一 个 <dd> 标 签 .HTML 结构 如 下 : 
<d> 
<dt> 自 定义 列表 标题 </dt> 


<dd> 自 定义 列表 内 容 </dd> 
<d> 


<d 己 自 定义 列表 标题 </dt> 

<dd 自 定义 列表 内 容 ></dd> 

<dd> 自 定义 列表 内 容 </dd> 
</d> 


也 可 以 是 一 组 自 定义 列表 项 目 : 
<d> 
<dP 自 定义 列表 标题 <de> 
<dd> 自 定义 列表 内 容 </dd> 
<dP 自 定义 列表 标题 <de> 
<dd> 自 定义 列表 内 容 </dd> 
<dd> 自 定义 列表 内 容 </dd> 


<dd> 自 定义 列表 内 容 </dd> 
</d> 


无 论 是 以 哪 种 形式 ， 都 应 该 注意 下 面 几 个 问题 : 
回 。 <d 标 签 必 须 与 <dt> 标 签 相 邻 ，<dd> 标 签 需要 相对 于 一 个 <dt> 标 签 。 
回 ”<d>、<de、<dd> 3 个 标签 之 间 不 允许 出 现 其 他 标签 。 
回 “标签 必须 是 成 对 出 现 ， 嵌 套 要 合理 。 
<d> 标 签 是 自 定义 列表 集合 ，<dt> 是 自 定义 列表 标题 ，<dd> 是 自 定 义 列表 的 内 容 ， 因 此 自 定义 列 
表 <dl> 标 签 一 般 都 出 现在 名 词性 解释 的 信息 中 。 


“Ne 


| Eee 网 ; 设计 与 网 站 建设 从 入 门 到 精通 


| 【示例 】 当 需要 介绍 花 转 中 花 的 种 类 时 ， 就 可 以 采用 自 定义 列表 的 形式 。 
| iv class="flowers> 
| <h1> 花 围 中 的 花 </h1> 


| <d> 
医 靖 | <dP 玫 瑰 花 </d> 
| <dd> 玫 瑰 花 ， 一 名 赤 蔡 薇 ， 为 蔷薇 科 沙 叶 灌木 。 蔡 多 刺 。 花 有 紫 、 白 两 种 ， 形 似 蔷 被 和 月 季 。 一 
Note 般 用 作 密 钱 、 糕 点 等 食品 的 配料 。 花 辩 、 根 均 作 药 用 ， 入 药 多 用 紫 玫瑰 。</dd> 
| <de> 杜 鹏 花 </dt> 
<dd> 中 国 十 大 名 花 之 一 。 在 所 有 观赏 花木 之 中 ， 称 得 上 花 、 叶 兼 美 ， 地 栽 、 盆 栽 此 宣 ， 用 途 最 为 
广泛 的 。 白 居 易 鞠 昕 :“ 闲 折 二 枝 持 在 手 ， 细 看 不 似 人 间 有 ， 花 中 此 物 是 西施 ， 鞭 著 芍 药 皆 毁 母 "在 世界 杜 鹏 花 
的 自然 分 布 中 ， 种 类 之 多 、 数 量 之 巨 ， 没有 一 个 能 与 中 国 匹 敌 ， 中 国 ， 乃 世界 杜 鹏 花 资源 的 宝库 ! 今 江 西 、 安 徽 、 
贵州 以 杜 鹏 为 省 花 ， 定 为 市 花 的 城市 多 达 七 人 个 ,足见 人 们 对 杜 鹏 花 的 厚爱 。 杜 鹏 花 盛开 之 时 ， 恰 值 杜 鹏 鸟 吵 之 
时 ,古人 留 下 许多 诗句 和 优美 、 动 人 的 传说 ,并 有 以 花 为 节 的 习俗 。 杜 鹏 花 多 为 灌木 或 小 乔木 , 因 生 态 环境 不 同 ， 
有 各 自 的 生活 习性 和 形状 。 最 小 的 植株 只 有 几 厘米 高 ， 呈 垫 状 ， 贴 地 面 生 。 最 大 的 高 达 数 丈 ， 几 然 插 立 ， 前 为 壮 
| 观 。 </dd> 
<d> 
<ldiv> 
一 般 列 表 信息 需要 添加 一 个 标题 , 自 定义 列表 <dl> 中 的 内 容 主要 是 通过 自 定义 列表 的 标题 和 内 容 
让 阅读 者 明白 该 列表 介绍 的 信息 。 当 向 他 人 介绍 花园 中 花 的 品种 时 ， 先 说 明 主 题 ， 其 次 再 分 别 介绍 花 
的 种 类 以 及 针对 不 同 种 类 的 花 进行 详细 的 介绍 ， 预 览 如 图 4.7 所 示 。 





4.7 自 定义 列表 引 结构 分 析 图 


4.2 定义 列表 样式 


CSS 可 设置 的 列表 样式 , 包括 各 种 无 序列 表 和 有 序列 表 的 符号 和 编号 、 列 表 的 横向 显示 等 。 本 节 
将 通过 实例 介绍 CSS 可 设置 的 列表 的 样式 。 
| 4.2.1 设置 项 目 符号 


在 CSS 中 ， 使 用 list-style-type 属性 来 定义 列表 的 项 目 符号 。 具 体 用 法 如 下 : 


| list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | 
| armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | 
| lowerlatin | Upper-latin 


| 该 属性 的 参数 值 说 明 如 表 4.1 所 示 。 
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| 
表 4.1 list-style-type 属性 的 参数 及 其 显示 效果 | 
| 





























列表 类 型 参数 显示 效果 | 
无 序列 表 dise 实心 加 | 
无 序列 表 circle 空心 贺 | 全 fF 
无 序列 表 square 正方 形 | 
有 序列 表 decimal 阿拉 伯 数 字 1，2,，3,，4,，…… 
有 序列 表 upper-alpha A, BC, D, B, ss | 
有 序列 表 lower-alpha a by Cd © | 
有 序列 表 ipper-roman I，I，IT，IV，V，VI，VI，.……- | 
有 序列 表 i 证 证 ，iv，v，vi， Vi ee | 
无 序列 表 、 有 序列 表 不 显示 任何 符号 | 


【示例 1】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 : 
<h2> 北 京 最 吸引 人 的 地 方 </h2> 
<u> 


<1i> 什 刹 海 <i> 

<1i> 故 宫 </i> 

<1i> 音 乐 会 古 钢琴 咖啡 厅 <li> 

<li> 北 海 公园 泛舟 </li> 

<li> 秋 天 的 香山 公园 赏 红叶 </li> 
</ul> 


在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
来 定义 网 页 属性 和 列表 样式 。 


body { /* 页 面 基本 属性 %/ 
background-color: #CCCCCC: /# 设 置 页 面 背 景 颜 色 #/ | 
} | 
uf 让 列表 样式 */ | 
color: #CC0000: | 
list-style-type: square: 项目 符号 */ | 
} | 


网 页 背景 颜色 为 #CCCCCC，list-style-type:square 语句 设置 了 项 目 符号 为 正方 形 ， 显 示 效 果 如 图 4.8 | 
所 示 。 
= ELT Ep 


北京 最 吸引 人 的 地 方 
=。 什刹海 


。 故 言 

。 言 乐 会 古 钢 于 中 只 厅 
。 北海 公园 泛 丹 

= 灾 天 的 香山 公园 党 红 时 





图 4.8 设置 项 目 列表 符号 


在 CSS 中 ,无 论 是 <o> 还 是 <ul> 都 可 以 使 用 相同 的 属性 值 ， 而 且 效果 是 完全 相同 的 。 例 如 ， 本 示 
例 中 修改 <ul> 标 签 的 样式 为 项 目 编号 。 
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a 及 列表 样式 
| color:#CCO000:; 
| list-style-type:decimal: /# 项 目 编号 类 
EL 
全 | 显示 结果 如 图 4.9 所 示 。 可 以 看 到 ， 项 目 列表 按 阿 拉 伯 数字 显示 编号 ， 这 本 身 是 有 序列 表 <ol> 的 
Note | 属性 参数 , 但 是 由 于 在 CSS 中 <ul> 和 <ol> 的 分 界 并 不 十 分 严格 ， 只 要 利用 list-style-type 属性 ， 二 者 就 
可 以 通用 。 


【示例 2】 当 给 <ul> 或 <ol> 标 签 设置 list-style-type 属性 时 ， 在 它们 中 间 的 所 有 <li> 标 签 也 都 默认 
设置 为 该 属性 ， 而 如 果 单 独 为 某 个 <li> 标 签 设置 list-style-type 属性 时 ， 则 仅仅 作用 在 该 条 项 目 上 。 
启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test2.html， 在 <body> 标 签 内 输入 如 下 代码 : 


<h2> 北 京 最 吸引 人 的 地 方 </h2> 
<u> 
<1i> 什 刹 海 <i> 
<li> 故 宫 <lli> 
| <li class="special"> 音 乐 会 古 钢琴 咖啡 厅 </li> 
| <li> 北 海 公园 泛舟 </li> 
| <li> 秋 天 的 香山 公园 赏 红叶 </li> 
</ul> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
来 定义 网 页 属性 和 列表 样式 。 


body{ /#* 页 面 基本 属性 #/ 
background-color:#CCCCCC: 收 设 置 页 面 背景 颜色 */ 
} 

| uf 证 列表 样式 */ 
| color:#CC0000: 
| list-style-type:disc; 片 项 目 符号 为 实心 圆 */ 

} 

.Special{ 
list-style-type:square: 片 单独 设置 项 目 符号 为 正方 形 */ 


| 
| Wi 
| 
| 显示 效果 如 图 4.10 所 示 。 可 以 看 到 ， 单 独 设置 的 <li> 标 签 和 其 他 标签 的 符号 是 不 同 的 。 





CY eestor ~ 30 € | Er 
北京 最 吸引 人 的 地 方 北京 最 吸引 人 的 地 方 
1 什刹海 “全 章 海 


工 贞 , 直 守 
5 秋天 的 音 山 公园 催 红 叶 : 秋 关 扒 香山 公园 货 红 叶 


4.9 项目 编号 图 4.10 单独 设置 项 目 列表 符号 

| 屋 提 示 : liststyle-type 属性 在 <ol> 标 签 中 默认 的 参数 是 实心 图 ， 如 果 在 没有 设置 listrstyle-type 属性 

| 时 ， 列 表 的 项 目 符号 将 显示 为 实心 图 ， 在 <ol> 标 签 中 默认 的 项 目 编号 是 阿拉 伯 数 字 ， 如 果 
| 希望 列表 不 显示 任何 符号 或 编号 ， 需 要 添加 声明 语句 : list-style-type:none。 
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4.2.2 自 定 义 项 目 符号 


CSS 使 用 list-style-image 属性 来 定义 项 目的 图 片 符号 样式 。 用 法 如 下 : 

list-style-image : none | url (url ) 

其 作用 是 给 列表 添加 项 目 图 片 ， 其 中 url 是 图 片 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 输 入 以 下 内 容 : 

<h2> 京 郊 采 摘 好 去 处 </h2> 

<ul> 





| 
< 这 顺义 大 胡子 采摘 园 </li> | 
<1i> 静 逸 清 农业 生态 观光 园 </li> | 
<li> 英 龙 果园 <li> 
<li> 永 新 源 生态 农业 有 限 公 司 </li> 
<li> 金 海 湖 观光 采摘 园 </i> 
</ul> 
在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
来 定义 列表 项 目 图 片 样式 。 
uf 证 列表 样式 */ 
color:#CC0000: 
list-style-image:url(icon.jpg): 证 项 目 符号 图 片 */ 
} 
以 上 代码 中 ， 定 义 了 项 目 图 片 ， 显 示 结 果 如 图 4.11 所 示 。 


容 提示: 为 了 添加 定制 的 列表 符号 ,可 以 使 用 list-style- 
image 属性 。 但是， 这 种 方法 对 符号 图 像 的 位 
置 的 控制 能 力 不 强 。 更 常用 的 方法 是 关闭 列表 
符号 ， 并 且 将 定制 的 符号 作为 背景 添加 在 列表 
元 素 上 . 然后 可 以 使 用 背景 图 像 的 定位 属性 精 


本 加 locohon 





白 边 (margin) 和 填充 (padding) 设置 为 零 ， 从 而 去 掉 这 个 缩 进 。 要 去 掉 默 认 的 符号 ， 只 需 将 列表 样 
式 类 型 设置 为 none。 


uf 


确 地 控制 定制 符号 的 对 准 方式 。 | 
IE 和 Opera 使 用 左 空白 边 控制 列表 的 缩 进 ， 而 Safari - | 

和 Firefox 选择 使 用 左 填充 。 因此， 首先 需要 将 列表 的 空 图 411 图 片 符号 | 
| 

| 


添加 定制 的 符号 非常 简单 。 在 列表 项 左边 添加 填充 ， 为 符号 留 出 所 需 的 空间 。 然 后 将 符号 图 像 作 
为 背景 图 像 应 用 于 列表 项 。 如 果 列 表 项 跨越 多 行 ， 你 可 能 希望 将 符号 放 在 接近 列表 项 顶部 的 位 置 。 但 
是 ， 如 果 知 道 列 表 项 的 内 容 不 会 跨越 多 行 ， 那 么 可 以 将 垂直 位 置 设置 为 middle 或 50%， 从 而 让 符号 
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垂直 居中 。 
li{ 


backeround: url(icon.jpg) no-repeat 0 50%; 


padding-left:30px: 
} 


4.2.3 ”定义 列表 横竖 显示 


砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


浏览 器 默认 列表 项 竖 向 显示 ， 有 时 需要 列表 项 横向 显示 。 通 过 CSS 控制 ， 可 以 轻松 实现 项 目 列 


表 的 横竖 转换 。 


【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 输 入 以 下 内 容 : 


<div class="container"> 
<u> 
<li><a href="#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 公 司 新 闻 </a></li> 
<li><a hre 伍 "#"> 公 司 产 品 </a></li> 
<li><a hre 伍 "#"> 公 司 图 片 </a></li> 
<li><a hre 伍 "#"> 关 于 我 们 </a></li> 
<u> 
</div> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 


来 定义 列表 样式 。 
body { 
background: #CCCCCC: 
.container { 
font-family: Arial, Helvetica, sans-serif: 


} 

.container ul { 
list-style-type: none: 
margin: Opx: 
padding: Opx: 

} 


定义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 


人 :页面 背景 色 */ 


/*container 容器 样式 */ 


证 列表 样式 */ 
/# 不 显示 项 目 符号 所 


以 上 代码 中 ， 定 义 了 项 目 列表 样式 ， 显 示 结 果 如 图 4.12 所 示 。 
为 了 让 列表 横向 显示 ， 在 <1i> 标 签 中 添加 float:left 样式 声明 ， 使 各 个 列表 项 都 水 平 显示 ， 并 设置 


<a> 标 签 的 相关 属性 ， 代 码 如 下 : 


.container li { 
float: left: 

} 

.container lia { 
display: block: 
padding: 3px 6px: 
margin: 2px: 


text-decoration: none: 
border: 1px solid #996600: 


“38e 


证 左 浮动 ， 实 现 列表 项 的 横向 显示 */ 


/*<a> 标 签 的 样式 */ 

上 # 定 义 为 块 级 元 素 志 

让 上 、 下 、 左 、 右 内 边 距 */ 
证 四 周 补 白 */ 

族 无 下 划 线 */ 

片 边框 样式 */ 


4 | 
第 生 章 在 网 页 中 设计 列表 样式 一 $9 


background: #CCFF66; 片 背景 颜色 */ | 
} | 


以 上 代码 实现 了 列表 的 横向 显示 ， 显 示 结果 如 图 4.13 所 示 。 
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图 4.12 项 目 列表 图 4.13 横向 显示 列表 


总 提示 : display:block 语 扣 能 够 将 起 链接 设置 成 决 级 元 素 ， 当 饼 标 进入 该 块 的 任何 部 分 时 者 会 被 激 ， 
活 ， 而 不 仅仅 是 在 文字 上 方才 被 激活 。 


43 案例 实战 


本 节 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 列表 样式 ， 以 提高 实战 技巧 ， 快 速 理解 CSS 列表 属 
性 的 应 用 。 


| 
4.3.1 设计 新 闻 列表 | 
| 
| 
| 
| 
| 


前 面 详细 介绍 了 CSS 可 设置 的 列表 样式 ， 本 节 通 过 新 闻 栏 目 实例 练习 CSS 设置 列表 的 方法 ， 以 
及 列表 在 网 页 中 的 应 用 。 示 例 效果 如 图 4.14 所 示 。 


军事 新 闻 we 即时 新 闻 
A 中国 为 何不 柏 美 国 英国 人 一 名 丑 道 出 真相 - 
B， 己 本 记者 南沙 回来 入 后 俱 ， 从 于 领 哈 中 国 的 强大 
9 外 至 ， 运 款 马 前 MH17 我 唉 卡车 的 达 菏 兰 卉 由 ， NIB Nt 
D， 拟态 七 在 中 国 的 宇 事 问 次 ， 自 从“ 军 巡 ” 楼 集资 料 , + 全 表征 B- 儿 户 乔 bn 的 前 色 


同心 中 胃 傅 弃 尖 于 闻 (和 加 


财经 资讯 "eb": 丰 折 台 昌 二 和 4 当 (人 困 ) 
1 并 汉王 者 小 说 生 让 业 上 市 国内 出 二 高 多 失 直 权 。 shonin nn 
1 银行 间 外 汇市 场记 前 准 入 许可 明年 取 沙 。 

1 生 光 万 家 花 机 包括 村 商人 区 是 “十 地 ”天 的 要 。 百 家 专 栏 
IV 人民 币 轩 期 汇 地 两 天 时 候 途 500 点 - 一 


大 情 岁月 如 未 加 二 大 好 基 
娱乐 资讯 re 区 点 


。 林 二 到 基 析 范冰冰 童子 愉 韵 应 性 了 多 时 铺 玉 ， 
《向 久 开 全) 类 时 欢 生 六人行 竺 轻 卉 主演 起 于- 
福特 伟 器 关 之 下 靖 疆 拓 王 芷 下 玲 生 日 玩 人 内 ， 弄 哆 吧 只 单 ，Aagslababy 
让 时 双生 Mng=1ateby 二 狂 《 夫 陛 从 史 半 》 天 疡 - A 元 





图 4.14 新 闻 栏 目 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 ndex.html。 
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~ 砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


| 第 2 步 , 构建 网 页 结构 。 在 本 示例 中 首先 用 3 个 <divz 标 签 设置 了 新 闻 栏目 的 容器 , 在 每 一 个 <div> 
| 块 中 分 别 用 <ul> 标 签 和 <1i> 标 签 定义 了 新 闻 栏 目 和 新 闻 标题 。 


| <div class="junshi"> 
倾 让 | <h2> 军 事 新 闻 <span>more...</span></h2> 
| oe 
Note | <li><a hre 全 "> 中 国 为 何不 怕 美 国 英国 人 一 句 话 道 出 真相 。</a> </li> 
<li><a hre 伍 "#"> 日 本 记者 南沙 回来 很 感慨 : 终于 领略 中 国 的 强大 。</a></li> 


| <li><a hre 仁 "#"> 外 媒 ， 运 载 马 航 MH17 残 通 卡 车 抵达 荷兰 境内 。</a> </li> 
<li><a hre 伍 "#"> 揭 秘 藏 在 中 国 的 军事 间谍 自称“ 军 迷 ” 搜 集资 料 。</a></li> 
</ul> 
</div> 
<div class="caijing"> 
<h2> 财 经 资讯 <span>more...</span></h2> 
<ol> 
<li><a hre 伍 "#"> 莫 迪 亚 诺 小 说 年 底 密集 上 市 国内 出 版 商 争 抢 版 权 。</a> </li> 
<li> <a hre 伍 "#> 银 行 间 外 汇市 场 事前 准 入 许可 明年 取消 。 </a></li> 
<li><a hre 仁 "#"> 华 润 万 家 花椒 粉 铝 超标 两 倍 称 是 “土地 ”车 的 祸 。 </a></li> 
<li> <a hre 伍 "#"> 人 民 币 即 期 汇率 两 天 暴跌 逾 500 点 。</a></li> 
</ol> 
</div> 
| <div class="yule"> 
| <h2> 娱 乐 资讯 <span>more...</span></h2> 
! 
9 


<nl> 
<li><a hre 全 "六 "> 林 志 玲 张 柏 芝 范 冰冰 章子怡 夜店 性 感 狂 野 销 瑰 。</a> </li> 
<li><a hre 伍 "#"> 《匆匆 那 年 》 热 映 欢乐 六 人 行 特辑 爆 主演 趣事 。 </a></li> 
<li><a hre 仁 "#'> 杜 德 伟 曝 关 之 琳 将 结婚 指 王菲 嘉 玲 生日 玩 快 闪 。</a> </li> 
<li><a hre 合 "#"> 李 晨 邓 超 Angelababy 细 数 《奔跑 吧 兄弟 》 嘉宾。</a></li> 
</ul> 
</div> 


此 时 的 显示 效果 如 图 4.15 所 示 ， 可 以 看 到 ， 网 页 的 基本 结构 已 经 措 建 好 了 ， 但 是 由 于 没有 进行 
CSS 样式 设置 ， 界 面 中 只 是 把 文字 内 容 罗 列 起 来 ， 没 有 任何 修饰 。 
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| 图 4.15 构建 网 页 的 基本 结构 
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第 企 章 在 网 页 中 设计 列表 样式 | 3 | 


< 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 


样式 ， 定 义 网 页 基本 属性 、 新 闻 栏 目的 样式 以 及 文字 “more.… 


body {/* 网 页 基本 属性 */ 
font-size: 13px: 
font-family: "黑体 "; 
margin: po 


padding: Opx: 
Dm) no-repeat: 


上 

h2 {/* 新 闻 栏目 的 文本 样式 */ 
margin: 24px 0 0 Spx: 
color: #006699: 
font-size: 16px: 

} 

D2 span { 
color: #999; 
float: right: 

} 


以 上 代码 中 , 设置 了 页 面 的 基本 属性 ，<h2> 标 签 的 内 容 是 新 闻 的 栏目 ,设置 了 其 字体 颜色 、 
等 属性 。<span> 标 签 的 内 容 是 文字 “more.… ”， 


1 由 因为 天 要因 加 人 二 全 下 是 。 


， 江 丝 ， 到 各 有 HH 于 史上 玉手 这 凋 培 内 
术 ETTTTFEIETSEEEEET 下 


i 
* 本 

娱乐 资讯 
人 


rpTEETEEDE 列 





”样式 。 


/* 字 体 大 小 术 

字体 样式 */ 

族 清 除 页 边 距 */ 

族 清 除 页 边 距 */ 

让 模拟 新 闻 栏目 页 面 效果 */ 


* 新 闻 栏 目 文字 上 下 补 白 */ 


收文 字 “more..….” 的 显示 样式 */ 


/# 右 对 齐 六 


此 时 的 显示 效果 如 图 4.16 所 示 。 


即时 新 闻 

可 下 至: 用 必 中 省 傅 本 广 /起 四 ) 
FG 
A 
“全 扫 吉 ”: 未 由 夺 四 ,本 向 公 拉 (3 
El 9 不 上 和 大 公克 划 


百 家 专 栏 


至 情 岁月 娱乐 图 二 大 好 到 
太 生 点 
De 
Pa 
弄 驳 吧 兄 弟 : kagsiatat 
业 


图 4.16 设置 网 页 基本 属性 
第 4 步 ， 定 义 网 页 <div> 块 ， 也 就 是 新 闻 栏 目 块 的 共有 属性 。 


第 5 步 ， 为 列表 <ul> 和 <ol> 添 加 CSS 样式 。 


Partl ul{ 
margin-left:40px: 


让 每 一 个 新 闻 栏目 块 的 样式 */ 
证 行 间距 */ 

片 块 的 宽度 */ 

族 各 个 新 闻 块 之 间距 离 */ 


证 第 一 个 新 闻 块 的 列表 样式 */ 
片 文字 左 侧 高 边框 的 距离 */ 
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| list-style-type-upper-alpha: 让 项 目 符号 是 大 写字 母 */ 
| 
| papal{ + 第 二 个 新 闻 块 的 列表 样式 */ 
全 | : list-style-type: upperroman: 必 项 目 符号 是 大 写 罗马 字母 */ 
A 
”Note | par3ul { 第 三 个 新 闻 块 的 列表 样式 */ 
| list-style-type: circle: /* 项 目 符号 是 空心 圆 
} 


以 上 代码 中 ， 分 别 设置 了 3 个 新 闻 栏目 的 列表 样式 。 此 时 的 显示 效果 如 图 4.17 所 示 ， 可 以 看 到 ， 
项 目 符号 和 编号 按 设 置 的 样式 进 得 了 显示 。 
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图 4.17 列表 的 CSS 设置 


第 6 步 ， 从 图 4.17 中 可 以 看 出 ， 网 页 已 初 见效 果 ， 最 后 定义 <Hi> 标 签 和 <a> 标 签 的 样式 。 
i{*<li> 标 签 样式 ， 也 就 是 新 闻 标题 样式 */ 


| 
margin:5px 0 Spx 0 每 条 新 闻 标题 之 间 间隔 */ 
| 
a {/* 链 接 样式 */ 
text-decoration:none: 人 # 不 显示 下 划 线 所 
color#000: 


| 

| 国 国 
| 此 时 新 闻 栏目 示例 设计 完成 ， 显 示 效 果 如 图 4.14 所 示 。 
4.3.2 ”设计 导航 列表 


在 网 页 中 ， 导 航 菜单 随处 可 见 ， 大 多 都 是 通过 设置 CSS 列表 样式 创建 的 ， 本 例 以 介绍 网 页 中 常 
见 的 导航 菜单 制作 方法 ， 来 说 明 列表 网 页 菜单 在 网 页 中 的 应 用 。 整 个 网 页 设计 效果 如 图 4.18 所 示 。 
| 【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 index.html。 
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图 4.18 网 站 导航 菜单 


第 2 步 ， 构 建 网 页 结构 ， 在 <body> 标 签 中 输入 以 下 内 容 : 


<d> 
<dt> <a hre 人 f="#a"> 娱 乐 健身 </a> <a hre 伍 "#"> 餐 饮 服务 </a> <a hre 仁 "#"> 购 物 指南 </a> </dt> 
<dd> 
<ulid="a"> 
<li><a hre 伍 "#"> 博 纳 悠 唐国 际 影 城 博 纳 悠 唐国 际 影 城 </a></li> 
<li><a hre 合 "#f"> 家 富 富 侨 足疗 〈 右 安 门店 ) 家 富 富 侨 足 疗 〈 右 安 门店 ) </a></li> 
<li><a hre 伍 "#"> 朱 国 凡 良子 (长 虹桥 店 》 朱 国 凡 良子 (长 虹桥 店 》</a></li> 
<li><a hre 仁 "#"> 昆 泰 大 酒店 游泳 馆 昆 泰 大 酒店 游泳 馆 </a></li> 
<li><a hre 伍 "#"> 奥 力 健身 俱乐部 〔 亚 运 村 旗舰 店 )</a></li> 
<li><a hre 伍 "#"> 炫 力 骄 阳 健 身 〈 簿 彰 丽 苑 店 〉 炫 力 骄阳 健身 ( 簿 萌 丽 苑 店 )</a></li> 
< 
<ulid="b"> 
<li><a hre 合 "#f"> 家 富 富 侨 足疗 〈 右 安 门店 ) 家 富 富 侨 足 疗 〈 右 安 门店 ) </a></li> 
<li><a hre 伍 "#"> 中 秋 宣 预定 火爆 食材 涨幅 异常 </a></li> 
<li><a hre 伍 "#"> 餐 饮 业 升级 转型 要 人 才 资 源 也 要 文化 </a></li> 
<li><a hre 仁 "#">79 元 的 “总 统 套餐 ” 火 了 79 元 的 “总 统 套 餐 ” 火 了 </a></li> 
<li><a hre 伍 "#"> 湖 南 餐 饮 大 佬 抢滩 快餐 业 湖南 餐饮 大 佬 抢滩 快餐 业 </a></li> 
<li><a hre 伍 "#"> 第 四 届 云 南 火锅 美食 节 开 幕 第 四 届 云 南 火 锅 美 食 节 开 幕 </a></li> 
<hP> 
<ul id="c"> 
<li><a hre 全 "#"> 网 上 购物 ， 凡 客 诚 品 促销 中 ! 优质 低 价 ， 超 值 网 购 !</a></li> 
<li><a hre 仁 "#"> 蓝 色 港 湾 购物 蓝 色 港湾 购物 </a></li> 
<li><a hre 伍 "#"> 走 秀 网 -全 球 品牌 网 络 旗舰 店 :正品 ， 支 持 货 到 付款 </a></li> 
<li><a hre 仁 "#"> 昆 泰 大 酒店 游泳 馆 昆 泰 大 酒店 游泳 馆 </a></li> 
<li><a hre 伍 "#"> 英 国 出 现 少女 购物 狂 掀 起 网 络 炫 富 潮 </a></li> 
<li><a hre 合 "六 "> 炫 力 骄阳 健身 〈 笨 萌 丽 苑 店 ) 炫 力 骄阳 健身 〈 笨 萌 丽 苑 店 ) </a></li> 
<mul> 
</dd> 
</dl> 


在 上 面 的 代码 中 ， 首 先 用 <dl> 标 签 创建 了 一 个 定义 列表 ， 在 <dt> 标 签 中 ， 定 义 3 个 项 目 ， 分 别 是 | 
“娱乐 健身 “和 餐饮 服务 ”和 “购物 指南 "， 在 <dd> 标 签 中 包含 了 3 个 <ul> 标 签 ， 用 于 创建 <ul> 无 序 
列表 ， 分 别 对 应 于 上 面 的 3 个 项 目 “ 娱 乐 健身 “餐饮 服务 ”和 “购物 指南 ”的 内 容 。 此 时 的 显示 没 
有 任何 CSS 样式 设置 ， 结 果 如 图 4.19 所 示 。 
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图 4.19 网 页 基本 结构 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 规 划 整 个 页 面 的 基本 显示 属性 : 字体 上 颜色、 背景 颜色 等 。 


df 必定 义 列表 样式 */ 
| Position:absolute: 族 定 义 元 素 的 绝对 定位 */ 
| width:460px: 
| height:170px: 
| border: 10px solid #eee: 让 定义 元 素 的 边框 样式 */ 
| 
| 上 /定义 <dt> 标 签 菜单 ) 的 样式 
| position:absolute; 收 定 义 元 素 的 绝对 定位 ， 以 父 元 素 的 原点 为 原点 */ 
| right:1px; /# 右 边框 离 父 标签 1px*/ 
| } 
| 
| dd{ /#* 定 义 <dd> 标 签 (菜单 内 容 ) 样式 */ 
| margin:0; 
| width:460px: 
| height:170px: 
| overflow:hidden: 几 滋 出 隐藏 */ 
| 
上 


| 在 以 上 代码 中 ,定义 了 <d> 列 表 的 样式 。 在 <dd> 样 式 中 ，overflow:hidden 语句 的 作用 是 将 超出 其 
| 设置 的 高 度 和 宽度 部 分 隐藏 起 来 ， 如 果 缺 少 这 句 ， 那 么 3 个 <ul> 标 签 中 的 内 容 将 全 部 显示 出 来 ， 此 时 
的 显示 效果 如 图 4.20 所 示 。 
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四 | 
第 4 步 ， 设 置 菜单 项 的 链接 样式 。 | 
dta { /*dt (菜单 项 ) 的 链接 样式 */ | 





display:block: 证 设置 为 块 级 元 素 */ | 
Imargin:1px: 证 四 周 补 白 为 1px， 这 样 设置 可 使 菜单 项 有 1px 间隔 */ | 会 内 
width:80px: 广 菜 单项 的 宽度 */ | 一 :一 
height:56px: 证 菜单 项 的 高 度 */ 
text-align:center; 
font:700 12px/55px "宋体 "; /#* 用 font 属性 综合 设置 字体 样式 */ | 
color-#fEE 证 字体 颜色 */ 
text-decoration:none; /#* 不 显示 项 目 符号 所 | 
background:#666: /# 背 景 颜 色 所 | 

} | 

dt a:hover { /# 鼠 标 悬 停 时 菜单 项 的 样式 #/ 

background:orange: /# 鼠 标 悬 停 时 背景 色 改 为 橙色 六 


| 
在 以 上 代码 中 ， 设 置 了 菜单 项 <dt> 中 的 链接 样式 ， 其 中 display:block 将 本 是 行内 元 素 的 <a> 标 签 | 
改 为 了 块 元 素 ， 通 过 该 语句 ， 当 鼠标 进入 到 该 块 的 任何 部 分 时 都 会 被 激活 ， 而 不 仅仅 是 在 文字 上 方 时 | 
才 被 激活 ， 也 就 是 如 图 4.21 所 示 ， 鼠 标 进入 菜单 区 域 时 ， 变 为 橙色 。 





4.21 设置 dt 中 <a> 标 签 的 样式 
第 5 步 ， 设 置 <ul> 列 表 和 <li> 标 签 的 样式 。 


记 {* 设 置 列表 忆 样 式 */ | 
margin:0; 让 使 列表 内 容 紧 靠 父 标签 */ | 
padding:0; | 
width:460px: | 
height:170px: | 
list-style-type:none: 证 不 显示 列表 项 目 */ | 
background:#f 让 背景 颜色 */ | 

} | 

Li{* <l 记 标签 的 样式 */ | 
width:405px: /#<f> 标 签 的 宽度 q | 
height:27px: | 
padding-left:20px: /# 文 字 左 侧 距离 边框 有 20px 距离 +4/ | 
font:12px/27px "宋体 ": /# 用 font 属性 综合 设置 字体 样式 */ 


} 


在 以 上 代码 中 , 定义 了 <ul> 和 <li> 标 签 的 样式 , 其 中 有 一 个 语句 读者 可 能 有 些 陌 生 : font:12px/27px 
"宋体 "， 在 这 里 12px/27px 表示 字体 大 小 为 12px， 行 间距 为 27px， 相 当 于 : font-size:12px:line-height: 
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一 一 于 绝 兴 入门 到 疹 适 
| 27px。 此 时 网 站 导航 完成 设置 。 
! 
4.3.3 设计 多 级 菜单 列表 
芽 网 多 级 下 拉 菜 单 在 一 些 企业 网 站 应 用 非常 广泛 ， 它 存在 使 用 方便 、 占 用 空间 小 等 特点 。 本 节 将 向 读 


| 者 介绍 横向 导航 菜单 的 二 级 菜单 的 制作 方法 ， 从 而 进一步 说 明 列 表 在 制作 导航 菜单 上 的 应 用 。 本 例 的 
Note | 演示 效果 如 图 4.22 所 示 。 








4.22 多 级 菜单 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 mndex.html。 
第 2 步 ， 构 建 网 页 的 基本 结构 。 本 例 中 由 两 层 嵌 套 的 <ul> 标 签 定义 了 二 级 菜单 。 


<div class="menu"> 
<Ul> 
<li><a hre 伍 "#"> 文 件 </a> 

<ul> 
<li><a hre 人 ="#"> 打 开 </a></li> 
<li><a hre 伍 "#> 保 存 </a></li> 
<li><a hre 合 "#f"> 新 建 </a></li> 

</ul> 


< 由 i> 
<li><a hre 仁 "#"> 查 看 </a> 
<ul> 


<li><a hre 伍 "#"> 工 具 栏 </a></li> 
<li><a hre 人 "#2> 标 尺 </a></li> 
<li><a hre 伍 "#"> 缩 放 </a></li> 
<mul> 
< 由 i> 
i><a hre 伍 "#"> 修 改 </a> 
<ul> 
<li><a hre 合 "#"> 属 性 </a></li> 
<li><a hre 合 "#i> 样 式 </a></li> 
! </ul> 
| < 人 > 
| <li><a hre 仁 "#"> 窗 口 </a> 
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<u> 
<li><a hre 全 "> 历史 记录 </a></li> 
<li><a hre 全 > 颜 色 </a></li> 
<li><a hre 仁 "#"> 时 间 轴 </a></li> | ， 
<hl> | 
Ezz 
<div class="clear"> </div> Note 
<Jdiv> 


此 时 的 网 页 显示 结果 如 图 4.23 所 示 。 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 定 义 网 页 的 menu 容器 样式 ， 并 定义 一 级 菜单 中 列表 样式 。 


.menu {/*+menu 样式 类 */ 

font-family:" 黑 体 "; 让 定义 整个 menu 容器 中 的 字体 为 黑体 */ 

width:440px:; /*menu 容器 宽度 */ | 

margin:0; 必定 义 四 周 补 白 为 0/ | 
} | 
-menu ul {/* 定 义 一 级 菜单 中 列表 样式 */ 

padding:0: 让 一 级 菜单 中 列表 的 内 边 距 为 0*/ 

list-style-type: none: 让 不 显示 项 目 符号 */ | 
menuulli{ | 

float:left: 让 使 菜单 项 横向 显示 */ 

position:relative: 刻 定 义 一 级 菜单 中 列表 的 定位 方式 为 相对 定位 */ 
罗 


在 以 上 代码 中 ， 定 义 了 一 级 菜单 的 样式 ， 其 中 <1li> 标 签 中 ， 通 过 float:left 语句 使 原来 坚 向 显示 的 列表 
项 横向 显示 ， 并 用 position:relative 语句 设置 其 position 属性 为 相对 定位 。 此 时 的 显示 效果 如 图 4.24 所 示 。 
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图 4.23 ”网 页 基本 结构 4.24 设置 一 级 菜单 样式 | 

第 4 步 ， 设 置 一 级 菜单 中 的 <a> 标 签 的 样式 和 <a> 标 签 在 已 访问 过 时 和 鼠标 悬 停 时 的 样式 。 
menu ul lia, menu ul li a:visited { 定义 一 级 菜单 中 a 对 象 样式 及 a 对 象 在 已 访问 过 时 的 样式 */ | 
display:block: 让 定义 为 块 级 元 素 */ | 
text-align:center: 族 居 中 对 齐 */ | 
text-decoration:none: 片 不 显示 下 划 线 */ | 
width:104px: 必定 义 菜单 的 宽度 */ | 
height 30px: 记 高 宽 */ L 


“As 
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color#TEF 证 字体 颜色 */ 
border: 1px solid #666: 让 定义 边框 */ 
background: #252525; 背景 颜色 */ 
line-height:30px: 上 : 行 间距 */ 
font-size:14px: 刻字 体 大 小 */ 
} 
-menu ul li:hover a {* 鼠 标 悬 停 时 <a> 标 签 样式 世 
colorffFF 人 # 鼠 标 悬 停 时 改变 字体 颜色 为 #fEFY/ 


在 以 上 代码 中 ， 首 先 定 义 了 a 为 块 级 元 素 ，border: 1px solid #HE 语句 虽然 定义 了 菜单 项 的 边框 样 
式 ， 但 是 由 于 border-width:1px 1px 00 的 作用 ， 所 以 在 这 里 只 显示 上 边框 和 右边 框 ， 下 边框 和 左边 框 
由 于 宽度 为 0, 所 以 不 显示 任何 效果 .在 这 里 值得 注意 的 是 ,既定 义 了 height30px, 又 定义 了 line-height: 
30px, 两 者 的 区 别 在 于 height 定义 的 是 整个 a 块 的 高 度 , 而 line-height 定义 的 是 文字 的 行 高 , 在 这 里 ， 


| line-height 还 有 一 个 作用 就 是 一 行 30 个 像素 ， 文 字 会 相对 于 这 30 个 像素 垂直 居中 显示 。 此 时 ， 网 页 


的 显示 效果 如 图 4.25 所 示 ， 如 果 在 这 里 不 设置 line-height:30px， 显 示 效 果 如 图 4.26 所 示 。 
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4.25 设置 a 对 象 的 链接 样式 和 鼠标 悬 停 、 已 访问 过 的 样式 。 图 4.26 不 设置 line-height:30px 时 的 效果 
第 5 步 ， 设 置 二 级 菜单 样式 。 
-menuulliul {/* 二 级 菜单 中 册 样 式 */ 


display: none: 证 将 二 级 菜单 设置 为 不 显示 */ 

了 

-menu ul li:hover ul {/* 鼠 标 划 过 一 级 菜单 的 由 时 ， 二 级 菜单 才 显 示 拟 
display:block: /# 定 义 为 块 级 元 素 */ 
Position:absolute: 上 # 绝 对 定位 8/ 
top:31px: 人 # 相 对 其 父 标签 的 位 置 #/ 
left:Opx: 刻 相 对 其 父 标签 的 位 置 */ 
width:105px: 证 宽 度 */ 

BE 


在 以 上 代码 中 ， 首 先 定义 了 二 级 菜单 的 <ul> 标 签 样式 ，display:none 语句 的 作用 是 将 其 所 有 内 容 
隐藏 ， 并 且 使 其 不 再 占用 文档 中 的 空间 ;然后 定义 了 一 级 菜单 中 <li> 标 签 的 伪 类 ， 当 鼠标 经 过 一 级 菜 
单 时 ， 二 级 菜单 开始 显示 ， 这 就 实现 了 我 们 想 要 的 效果 ， 目 前 下 6 只 支持 a 的 伪 类 ， 其 他 标签 的 伪 类 


| 不 支持 。 在 menu ul li:hover ul 中 设置 了 position:absolute 属性 ， 也 就 是 绝对 定位 ， 它 将 脱离 原来 文档 








流 ， 以 其 父 标签 的 原点 为 原点 定位 ， 其 定位 为 top:31px:left:0px， 为 什么 是 31px 呢 ， 因 为 其 父 级 标签 
的 height 属性 为 30px， 所 以 ， 如 果 想 要 在 一 级 菜单 下 显示 ， 就 应 该 是 31px 的 位 置 ; width:105px， 是 由 
于 一 级 菜单 的 width 是 104px， 加 上 右边 框 的 1px， 正 好 是 105px。 此 时 的 显示 效果 如 图 4.27 所 示 。 
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| 
第 6 步 ， 设 置 二 级 菜单 的 链接 样式 和 鼠标 悬 停 时 的 效果 。 | 
-menu ul li:hover ul li a {/* 二 级 菜单 链接 样式 */ | 





display:block: 
background:#fE4321: :二 级 菜单 背景 色 */ 
color#000: 人 # 二 级 菜单 字体 颜色 所 
} 
.menu ul li:hover ul li a:hover {/* 二 级 菜单 的 鼠标 悬 停 样式 */ 
background:#dfc184: /#* 一 级 菜单 的 鼠标 悬 停 时 背景 色 #/ 
color#000: /# 二 级 菜单 的 鼠标 悬 停 时 的 字体 颜色 所 
} 


在 以 上 代码 中 ， 设 置 了 二 级 菜单 的 背景 色 、 字 体 颜 色 和 鼠标 悬 停 时 的 背景 色 、 字 体 颜 色 。 此 时 的 
显示 效果 如 图 4.28 所 示 。 


CS ,wwecononurn po- ac 





图 427 设置 二 级 菜单 样式 图 4.28 设置 二 级 菜单 样式 
4.3.4 ”设计 列表 版 式 


前 面 的 示例 展示 了 用 列表 制作 新 闻 栏 目 、 菜 单 等 网 页 元 素 ， 实际 上 ,列表 还 能 在 网 页 中 进行 简单 
的 排版 ， 尤 其 是 对 图 文 的 排列 ， 是 网 络 中 经 常见 到 的 形式 ， 本 例 以 名 为 “世界 十 大 名 车 欣赏 ”的 网 页 
为 例 ， 介 绍 列表 排版 的 应 用 。 演 示 效 果 如 图 4.29 所 示 。 





世界 十 大 名 车 欣赏 








4.29 列表 排版 的 应 用 
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| Eee SS 网 ; 设计 与 网 站 建设 从 入 门 到 精通 
| 【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 index.html。 
| 第 2 步 ， 首 先 构建 网 页 结构 。 在 本 例 中 ， 应 用 <ul> 标 签 创 建 列表 ， 在 每 一 个 <1i> 标 签 中 添加 图 片 ， 
| 从 而 实现 本 例 效果 。 
ie 世界 十 大 名 车 欣赏 <a><hh3> 





Note | <U> 
| <li> <a href="#"><img src="images/1.jpg”alt="1"><span> 世 界 十 大 名 车 之 一 : 恩 佐 . 法 拉 利 </span> 

</a><lli> 

<li> <a href="#"> <img src="images/2.jpg" alt="2"> <span> 世 界 十 大 名 车 之 二 : 兰博基尼 </span></a></li> 

<li> <a href="#"> <img src="images/3.jpg" alt="3"> <span> 世 界 十 大 名 车 之 三 : 奔驰 SLR</span></a></li> 
| <li> <a href="#"> <img src="images/4.jpg”alt="4"> <span> 世 界 十 大 名 车 之 四 : 布加迪 . 威 龙 </span> 
| <a></li> 
| <li> <a href="#"> <img src="images/5.jpg" alt="5"> <span> 世 界 十 大 名 车 之 五 ,福特 GT</span></a></li> 
| <li> <a href="#"> <img src="images/6.jpg" alt="6"> <span> 世 界 十 大 名 车 之 六 : 克莱斯勒 ME-Four-Twelve 
| </span> </a></li> 
| <li> <a href="#"> <img src="images/7.jpg" alt="6"> <span> 世 界 十 大 名 车 之 七 : 阿 斯 顿 .马丁 DB9</span> 
| Ka><Ni> 
| <li> <a hte 人 ="#'> <img sre-"images/8jpg" alt="6"> <span> 世 界 十 大 名 车 之 八 : 保时捷 CarreraGT</span> 
| <a><li> 
| <li> <a href="#"> <img src="images/9jpg" alt="6"> <span> 世 界 十 大 名 车 之 九 :宾利 欧陆 GT</span> 
| <a><> 
| <li> <a href="#"> <img src="images/10.jpg" alt="6"> <span> 世 界 十 大 名 车 之 十 ， 帕 格 尼 一 风 之 子 </span> 
| <a></> 
| <div style="clear:both:"></div> 
</ul> 


此 时 ， 网 页 的 基本 结构 已 经 创建 完成 ， 由 于 没有 进行 CSS 控制 ， 所 以 界面 还 离 我 们 希望 的 样式 
相差 其 远 ， 显 示 结 果 如 图 4.30 所 示 。 














| 4.30 设置 网 页 基本 结构 
| 第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
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| 
样式 ， 定 义 网 页 的 基本 属性 和 标题 样式 。 | 
bodyh3.ul{ /* 设 置 页 面 、h3 标签 、<ul> 标 签 的 四 周 补 白 和 内 边 距 都 为 0*/ | 





margin:0; 
padding:0; 
} 
h3 {/*h3 标题 样式 */ 
width:800px: 六 宽度 所 
height:30px; 上 # 高 度 所 | 
margin:20px auto 0 auto: 人 # 设 置顶 部 补 白 为 20px， 左 右 距 离 为 auto， 实 现 h3 块 的 居中 显示 */ 
font-size:20px: 刻字 体 大 小 */ | 
text-indent:10px; * 首 行 缩 进 */ | 
line-height:30px: 上 行 间距 ， 可 实现 文字 的 垂直 居中 */ | 
background:#E4E1D3: 让 背景 颜色 */ | 
text-align:center; /*h3 标签 中 文字 的 居中 */ | 
F | 
haat /+ 标题 的 链接 样式 */ | 
color#c00: 上 字体 颜色 */ | 
text-decoration:none: 证 不 显示 下 划 线 */ | 
| 
h3 a:hover { 上 # 鼠 标 悬 停 时 标题 的 样式 #/ | 
color:#000; /字体 颜色 所 | 
) 
| 


在 以 上 代码 中 用 body,h3,ul{ margin:0;padding:0;} 语 句 设置 了 body、h3 和 <ul> 标 签 的 margin 和 | 
padding 属性 ; 在 a 样式 类 和 a:hover 样式 中 ， 分 别 定义 了 标题 的 链接 样式 和 鼠标 经 过 时 的 样式 。 此 时 | 
的 显示 效果 如 图 4.31 所 示 。 





世界 十 大 名 车 欣赏 








图 4.31 设置 网 页 属性 和 标题 样式 


从 图 4.31 中 可 以 看 到 ,由 于 没有 设置 <ul> <li> 的 样式 ， 使 得 图 片 的 位 置 错乱 ， 接 下 来 对 列表 样式 | 
进行 设置 。 | 


第 4 步 ， 设置 和 样式 类 和 <li> 标 签 的 样式 ， 从 而 实现 对 网 页 中 图 文 的 排版 。 


i 


一 一 一 一 一 2H 一 一 ~、 作 贡 统计 弓 风 站 建 役 从 入 门 到 将 迄 





Cr 
总 
So 
忆 {/*ul 列表 样式 */ 
width:774px: /*ul 列表 宽度 */ 
margin:0 auto: /*ul 中 所 有 内 容 居 中 显示 */ 
padding-left:20px: 人 # 左 侧 内 边 距 所 
border:3px solid #E4E1D3: /# 边 框 样式 所 
上 
ulli {/*<l 户 标签 样式 */ 
float:left: 让 <l 户 标签 中 的 内 容 横向 显示 */ 
margin:5px 10px 3px 0px: 刻 四 周 的 外 边 距 */ 
list-style-type:none; 证 不 显示 项 目标 签 */ 
} 
蕊 lia {/* 设 置 二 中 的 <a> 标 签 样式 */ 
display:block: 让 定义 为 块 级 元 素 ， 使 鼠标 进入 块 中 任何 位 置 链接 就 被 激活 */ 
width:370px: 刻 宽 度 */ 
height:175px: 让 高 度 */ 
text-decoration:none: 刻 不 显示 下 划 线 */ 


} 


以 上 代码 定义 了 ul 的 宽度 为 774px， 边 框 样式 为 宽 3px 的 实 线 ，774px 加 两 条 3px 的 边框 恰好 和 


前 面 定义 的 h3 宽度 800px 一 致 。 


第 5 步 ， 设 置 <li> 标 签 下 的 <img> 标 签 样式 和 <span> 标 签 样式 。 


ulliaimg { 户 设 置 二 中 图 片 样式 */ 
width:370px: 刻 图 片 宽 度 */ 
height:150px: 上 # 图 片 高 度 */ 
border:1px #000099 solid: /#1px 宽 的 边框 */ 

} 

ulliaspan { 证 每 个 图 片 标题 的 样式 */ 
display:block: 
width:370px: 上 # 宽 度 是 370px*/ 
height:23px: 话 高 宽 */ 
line-height:20px: 履行 间距 */ 
font-size: 14px: 启 字 体 大 小 */ 
text-align:center: 性 文字 居中 所 
color#333: /# 文 字 颜 色 #/ 

} 


以 上 代码 实现 的 列表 效果 如 图 4.32 所 示 。 








之 二 + 医 对 5LR 世 异 - 之 四 | 
图 4.32 实现 列表 排版 效果 
在 上 述 代码 中 ， 设 置 了 图 片 高 度 是 150px， 图 片 的 上 下 边框 各 lpx， 图 片 标题 高 宽 是 23px， 三 者 
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相 加 正好 是 前 面 讲 的 设置 下 的 高 度 175px。 
4.3.5 设计 图 文 混 排 列表 效果 


在 4.3.4 节 的 示例 中 ， 详 细 讲 述 了 用 列表 进行 排版 的 方法 ， 本 例 就 用 列表 实现 图 文 混 排 的 效果 进 | 和食 呈 
行进 一 步 的 说 明 ， 从 而 继续 学 习 列 表 的 相关 知识 。 本 例 的 演示 效果 如 图 4.33 所 示 。 | 














图 4.33 列表 实现 图 文 混 排 的 效果 


【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 index.html。 

第 2 步 ， 构 建 网 页 结构 。 本 例 中 首先 用 <div> 标 签 设置 container 容器 ， 然 后 通过 <div> 标 签 创建 网 
页 的 title 和 content 两 部 分 ， 又 通过 <ul> 标 签 分 别 创建 这 两 个 部 分 的 列表 。 


<div id="container"> 
<div class="title"> /*title 部 分 */ 
<h3> 财 经 资讯 <h3> /*title 部 分 的 标题 */ | 
<u> /*title 部 分 的 新 闻 栏目 */ | 
<li><a hre 仁 "#"> 最 新 资讯 </a></li> | 
<li><a hre 伍 "#"> 国 际 财经 </a></li> | 
<li><a hre 人 "> 汽车 房产 </a></i> | 
<hl> | 
</div> | 
<div class="content"> /*content 部 分 */ | 
/*content 部 分 的 标题 */ | 
<a href="#"><img strc="images/1 .jpe"/></a> | 
<span><a hre 仁 "#"> 最 新 资讯 </a></span> | 
<p> 
<ul> /*content 部 分 的 新 闻 内 容 */ 


| 
<li>，。<a hre 仁 "#> 诸 建 芳 :中 国 将 继续 加 强 “ 反 通缩 ”明年 或 降 准 2 次 </a></li> | 
<li>，<a hre 仁 "#"> 美 联储 出 台 系统 重要 性 银行 附加 资本 要 求 </a></li> | 
<li>。<a hre 合 "#"> 所 有 省 份 制定 大 病 保险 实施 方案 北京 等 全 面 推 开 </a></li> 
<li>。<a hre 合 "#"> 减 持 方正 证 券 获 利 3.18 亿 元 郑州 煤 电 有 望 扭亏 </a></li> 
<li>，<a hre 伍 "#"> 牛 市 “ 撞 腰 ”不 足 惧 </a></li> 
<hul> 
<div> 
<div class="list_unit" id="2"> 
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<p> <a hre="#"><img src="images/2.jpg"></a> <span><a hre 全 "#"> 国 际 财经 </a></span> </p> 
<u> 


<li>，<a hre 仁 "#"> 全 球 最 大 集装箱 船 “中 海 环球 ” 轮 首 航 宁波 港 </a></li> 
<li>，。<a hre 伍 "#"> 中 国 中 小 企业 全 球 发 展 论坛 迎 来 重量 级 嘉宾 </a></li> 


仿 站 | <li>，。<a hre 全 "#"> 建 行 龙卡 全 球 支付 卡 跨 境 支付 更 方便 </a></li> 
se <li>，<a hre 伍 "#"> 明 年 美国 经 济 增长 3.1%</a></li> 
Note | <li>。<a hre 人 ="#"> 汇 丰 : 2015 年 全 球 十 大 风险 </a></li> 
< 
| </div> 


<div class="list_unit" id="3"> 
<p> <a href="#"><img src="images/3.jpg"></a> <span><a href="#"> 汽 车 房产 </a></span> </p> 
<ul> 
<li>。<a href="#"> 上 海 : 奥迪 Q3 最 高 让 利 8.6 万 元 豪华 小 型 SUV</a></li> 
<li>。<a hre 合 "#"> 上 海 : 路 虎 发 现 4 最 高 降 13 万 全 国 销售 现 车 充足 </a></li> 
<li>。<a href="#">2015 年 投产 丰田 扩大 投资 提高 Mirai 产能 </a></li> 
<li>。<a hre 伍 "#"> 北 京 : 新 宝来 现金 优惠 8500 元 起 置换 另 享 补贴 </a></li> 
<li>。<a hre 人 ="#"> 首 套房 贷 利率 北京 外 资 银行 能 打折 </a></li> 
<hl> 
</div> 
<div class="di"></div> * 清 除 浮动 */ 
</div> 
</body> 


在 整个 container 框架 下 ,分别 由 tile 和 content 两 块 组 成 ， 在 tile 块 下 ， 又 包含 了 h3 和 ml 两 部 
分 。 在 content 块 下 ， 定 义 了 <p> 标 签 和 <ul> 标 签 。 此 时 的 显示 结果 如 图 4.34 所 示 。 

















| ~ 
| 图 4.34 ”网 页 基本 结构 
! 


| 从 图 4.34 中 可 以 看 出 ， 由 于 没有 进行 CSS 设置 ， 网 页 中 的 各 个 元 素 就 是 简单 地 罗列 到 一 起 ， 没 
| 有 任何 美观 可 言 。 

| 第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
| 样式， 定义 网 页 基本 属性 和 wrap 样式 。 
| 


| * {/* 网 页 中 所 有 标签 的 共同 样式 */ 

| margin:0: 证 外 边框 为 0*/ 
| padding:0: 刻 内 边框 为 0*/ 
| font-size:12px: 让 字体 大 小 */ 


| color:#000: 刻字 体 颜色 */ 
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list-style:none; 让 不 显示 项 目 符号 */ 
} 
a {/* 定 义 网 页 中 所 有 的 <a> 标 签 样式 */ 
color#03c: 
text-decoration:none; /# 不 显示 下 划 线 所 
ahover{ 
text-decoration:underline: 人 # 当 鼠标 经 过 时 显示 下 划 线 六 
} 
#wrap{/*wrap 容器 样式 */ 
width:418px: 让 宽度 */ 
margin:30px auto; 让 上 下 补 白 是 30px， 左 右 为 auto， 显 示 为 居中 的 效果 */ 
border: 1px solid #999: 让 边 框 样式 */ 
有 
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在 以 上 代码 中 ， 首 先 定义 了 网 页 基本 属性 ，wrap 容器 样式 类 中 定义 了 容器 宽度 和 居中 对 齐 等 属 | 


。 此 时 的 显示 结果 如 图 4.35 所 示 。 














第 4 步 ， 设 置 title 部 分 样式 。 
-title { /# 定 义 title 样式 */ 
width:418px: 
height:32px: 
border-bottom: 1px solid #999: 
background:#f2f9fd: 


} 

title h3 { /+ 定义 title 部 分 */ 
float:left: 
ine-height:32px: 
padding-left:20px; 

} 

-title ul { /*title 中 列表 样式 */ 
float:right: 

} 

-title ul i { /*<l 记 标签 样式 */ 
float:left: 
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图 4.35 设置 网 首 container 部 分 和 <a> 标 签 样式 


/*title 块 的 宽度 */ 
/*title 块 的 高 宽 */ 
/# 添 加 底部 边框 类 
让 背景 颜色 */ 


片 左 浮动 */ 
片 行 间距 ， 实 现 文字 垂直 居中 */ 
片 左 侧 内 间距 */ 


片 右 浮动 */ 
人 # 列 表 宽度 3 


| dashed #00f;} 样 式 类 中 定义 了 <p> 标 签 下 所 有 的 <a> 标 签 





line-height:32px:; 
padding:0 Spx: 
} 
-title ul i a { /*<a> 标 签 样式 */ 
Color:#333; 
} 


以 上 代码 完成 如 图 4.36 所 示 的 样式 设置 。 


第 5 步 ， 设置 warp 样式 。 


.Warp { /*warp 块 样式 */ 
height:100px:; 
margin-left:15px:; 
padding:15px 0 8px 0: 
border-bottom: 1px dotted #9AC4E9: 
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产 行 间距 
刻 左 右 补 自 5px*/ 


证 字体 颜色 */ 


让 块 高 宽 */ 

片 左 侧 补 白 */ 

/# 顶 部 内 边 距 15px， 底 部 内 边 距 8px*/ 
证 底部 边框 */ 


第 6 步 , 完成 warp 块 中 <p> 标 签 样式 的 设置 , 在 <p> 标 签 中 , 包含 了 <a> 标 签 、<img> 标 签 和 <span> 


标签 ， 分 别 定义 了 新 闻 栏 目的 图 片 和 栏目 标题 。 


| 最 新 最 快 的 财经 资讯 


| 国际 财经 汽车 房产 


图 4.36 title 部 分 样式 


完成 效果 如 图 4.37 所 示 。 


| a 
于 
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图 4.37 warp 中 <p> 标 签 样式 


.Warp p { /*warp 块 中 <p> 标 签 样式 */ 
float:left: 片 左 浮动 ， 使 <p> 标 签 下 的 图 片 和 标题 靠 左 */ 
width:156px: 让 <p> 标 签 的 宽度 */ 
b 
warppat{ /*<a> 标 签 样式 */ 
display:block: 族 定义 <a> 标 签 为 块 级 元 素 */ 
} 
.Warp p a:hover { 
border:1px dashed #00f: 作 当 鼠标 经 过 时 显示 边框 */ 
} 
.Wap span a { /*warp 块 下 的 <span> 标 签 样式 也 就 是 标题 样式 */ 
height:22px: 话 高 宽 */ 
line-height:22px: A* 文 字 实现 垂直 居中 */ 
text-align:center: 证 水 平 居中 */ 
} 
.warp span a:hover { 诺 鼠 标 经 过 时 的 <span> 标 签 样式 */ 
border:0: 人 # 清 除 边 框 入 
color:#c00: 人 # 字 体 颜色 #/ 
} 


在 以 上 代码 中 ， 定 义 了 warp 中 的 <p> 标 签 样式 ， 在 <p> 标 签 中 分 别 包 含 了 一 幅 图 片 和 一 个 标题 ， 
在 这 里 关键 是 <a> 标 签 和 <span> 标 签 的 样式 设置 。 其 中 a 和 a:hover 的 样式 是 针对 图 片 的 设置 ，span a 
| 和 span ahover 是 针对 标题 的 样式 ， 其 中 border:0 是 清除 边框 ， 因 为 在 语句 warp p ahove{ border:1px 





页 的 显示 效果 如 图 4.38 所 示 。 


显示 边框 ， 所 以 在 这 里 需要 清除 边框 。 此 时 网 
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图 4.38 对 <p> 标 签 样式 的 设置 
第 7 步 ， 从 图 4.38 中 可 以 看 到 ， 网 页 基本 已 经 完成 ， 最 后 再 给 warp 中 的 <ul> 标 签 进行 设置 。 


.Warp ul { /*warp 中 忆 样 式 */ 
float:right: 刻 右 浮动 */ 
width:216px: /*ul 宽度 */ 
margin:Spx Opx; * 设 置 上 下 补 白 */ 

} 

.warp ul li a:hover{ 店 鼠 标 经 过 时 的 五 效 果 */ 
color:red: 

clear { /* 清 除 左右 浮动 所 
clear:both: 

由 


以 上 代码 设置 了 warp 中 串 列表 样式 ， 此 时 网 页 完全 创建 完成 。 
4.3.6 设计 图 文 展 示 栏 目 


4.3.5 节 通 过 示例 分 析 过 图 文 排版 的 处 理 技巧 ， 那 么 对 于 图 文 列 表 信息 的 处 理 其 实 大同 小 异 , 不 | 
同 的 是 图 文 列表 信息 的 表现 方式 是 将 列表 内 容 以 图 片 的 形式 在 页 面 中 体现 , 简单 理解 就 是 图 片 列 表 信 
息 附 带 简 短 的 文字 说 明 。 在 图 中 展示 的 内 容 主要 有 列表 标题 、 图 片 和 图 片 相 关 说 明 的 文字 。 本 例 的 演 
示 效 果 如 图 4.39 所 示 。 
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【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 index.html。 
第 2 步 , 构建 网 页 结构 。 假设 当 我 们 在 页 面 制 作 时 拿 到 了 由 设计 师 提供 的 设计 稿 中 出 现 了 这 样 的 
一 个 图 文 列表 信息 结构 ， 能 一 目 了 然 地 看 到 该 效果 主 次 分 明 ， 结 构 清晰 。 
<div class="pic list"> 
<h3> 爱 秀 </h3> 
<div class="content"> 
<u> 
<li><a hre 伍 "#"><img src="images/1245043772194_7521.jpg" alt=" 美 女 个 性 搞怪 自拍 " /> 美女 个 
性 搞怪 自拍 </a></li> 
<li><a hre 人 f="#"><img src="images/1245043843485 8207.jpg" alt=" 绝 对 阳光 的 清纯 小 妹 " 亡 绝 对 
阳光 的 清纯 小 妹 </a></li> 
<li><a hre 伍 "#"><img src="images/1245134073454 9288.jpg" alt=" 漂 亮 美女 的 可 爱 外 拍 " 放 漂 亮 


| 美女 的 可 爱 外 拍 </a></i> 


<li><a hre 全 "#p"><img src="images/1245134177473_9822.jpg" alt=" 可 爱 美 女 的 艺术 照 " /> 可 爱 美 
女 的 艺术 照 </a></li> 

<li><a href="#"><img src="images/1245200548148_5487.jpe" alt=" 漂 亮 美 女 娇 美 自拍 " /> 漂亮 美 
女 娇 美 自拍 </a></li> 

<li><a hre 伍 "#"><img src="images/1245201554383_4640.jpe" alt=" 清 纯 迷 人 的 黄 毛 丫头 " 亡 清纯 
迷人 的 黄 毛 丫头 </a></li> 


列表 整体 容器 
<div class="list_box'>....</div> 


列表 内 容 容器 
<div class="content">....</div> 


列表 区 域 





4.40 ”列表 结构 的 分 析 示 意图 


这 样 的 结构 不 仅 在 HTML 代码 中 能 很 好 地 将 页 面 结构 层次 体现 ， 更 可 以 方便 后 期 通过 CSS 样式 
对 其 的 利用 。 
图 文 列表 的 排列 方式 最 讲究 的 一 个 知识 点 就 是 宽度 属性 值 的 计算 。 横 向 排列 的 列表 ， 当 整体 的 列 


| 表 (有 序列 表 ol 或 者 无 序列 表 世 ) 横向 空间 不 足以 将 所 有 列表 横向 显示 时 ， 浏 览 器 会 将 列表 换行 显 


示 。 这 样 的 情况 只 有 在 宽度 计算 正确 时 ， 才 足够 将 所 有 列表 横向 排列 显示 并 且 不 会 产生 空间 的 浪费 ， 
如 图 4.41 所 示 。 

这 种 情况 是 必须 要 避免 的 ， 因 此 准确 计算 列表 内 容 区 域 所 需要 的 空间 是 有 必要 的 。 

我 们 将 要 分 析 例子 中 ， 每 张 图 片 的 宽度 属性 值 为 134px， 左 右 内 补丁 分 别 为 3px， 左 右边 框 分 别 
为 1px 宽度 的 线条 ， 并 且 图 片 列表 与 图 片 列表 之 间 的 间距 为 13px ( 即 右 外 补丁 为 13px)， 根 据 盒 模型 
的 计算 方式 ， 最 终 列表 二 标签 的 盒 模 型 宽度 值 为 1px+3px+134px+3px+1px+15px=157px， 因 此 图 文 列 


“158. 
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表 区 域 总 宽度 值 为 157pxx6=942px。 


局 .i 












naa En 
宽度 计算 不 正确 导致 空 
| 因为 列表 空间 不 够 导致 其 自动 换行 | 间 的 浪费 





图 4.41 列表 宽度 计算 不 正确 导致 的 结果 


第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 ， 定 义 图 文 列表 区 域 的 相关 区 域 样式 。 


.pic_list .content { 
width:942px; 
height:150px: 
overflow:hidden; /* 设 置 图 文 列表 内 容 区 域 的 宽度 和 高 度 ， 超 过 部 分 隐藏 */ 
padding:22px 0 0 15px: /* 利 用 内 补丁 增加 图 文 列表 内 容 区 域 与 其 他 元 素 之 间 的 间距 */ 
} 
.pic_list .content li { 
float:left: 
width:142px:; 


现 
) 俯 





margin-right:15px; /* 列 表 上 夺标 签 设置 浮动 后 ， 所 有 列表 将 根据 盒 模型 的 计算 方式 计算 列表 宽度 ， 并 且 并 | 


排 显 示 */ 
display:inline; /* 设 置 浮动 后 并 且 增 加 了 左右 外 补丁 ，IE6 会 产生 双 倍 间距 的 Bug， 利 用 该 属性 解决 */ 
} 


.pic_list .content 作为 图 文 列表 内 容 区 域 ,增加 相应 的 内 补丁 使 其 与 整体 之 间 有 空间 感 ， 这 个 是 视 
觉 效果 中 必然 会 处 理 的 一 个 问题 。 
.Pic_list .content li 因为 具有 浮动 属性 ， 并 且 有 左右 外 补丁 中 其 中 一 个 外 补丁 属性 ， 在 IE6 浏览 器 
中 会 产生 双 倍 间距 的 Bug 问题 。 而 神奇 的 是 添加 display:inline 可 以 解决 该 问题 , 并 且 不 会 对 其 他 浏览 
器 产生 任何 影响 。 
第 4 步 ， 主 要 内 容 设 置 成 功 之 后 ， 就 可 以 对 图 文 列 表 的 整体 效果 做 CSS 样式 的 修饰 ， 例 如 图 文 
列表 的 背景 和 边框 以 及 图 文 列 表 标 题 的 高 度 、 文 字样 式 和 背景 等 。 
pic list { 
width:960px: /* 设 置 图 文 列表 整体 的 宽度 */ 
border:1px solid #D9E5F5; /#* 添 加 图 文 列表 的 边框 #/ 
background:url(images/wrap.jpg) repeat-x 0 0: /* 添 加 图 文 列 表 整 体 的 背景 图 片 %/ 


bp 
.pic_list * .从重 置 图 文 列表 内 部 所 有 基本 样式 */ 
list-style:none: 
font:normal 12px/1.5em "宋体 ". Verdana.Lucida. Arial. Helvetica, sans-serif: 


} 
.pic_list h3 { /* 设 置 图 文 列表 的 标题 的 高 度 、 行 高 、 文 字样 式 和 背景 图 片 */ 
height:34px: 


“150% 


0 


line-height:34px:; 
font-size:14px: 

text-indent: 12px: 
font-weight:bold: 
全 站 color:#223A6D: 


| backeround:url(images/h3bg.jpg) no-repeat 0 0: 
“Xote 鼎 呈 


| 第 5 步 , 需要 调整 内 容 则 是 对 图 文 列表 信息 细节 以 及 用 户 体验 的 把 握 ,例如 图 片 的 边框 、 背 景 
| 文字 的 颜色 等 ， 并 且 还 要 考虑 当 用 户 在 鼠标 经 过 图 片 时 ， 为 了 能 更 好 地 体现 视觉 效果 ， 给 用 户 一 个 全 
| 新 的 体验 ， 我 们 还 要 添加 当 鼠 标 经 过 图 片 列 表 信息 时 图 片 以 及 文字 的 样式 变化 。 


.pic_list .content ia { 


display:block: 人 # 将 内 联 元素 a 标签 转换 为 块 元 素 使 其 具备 宽 高 属性 */ 
width:142px: 人 #* 设 置 转换 为 块 元 素 后 的 a 标签 的 宽度 */ 
text-align:center: 收文 本 居中 显示 */ 

text-decoration:none: 上 文本 下 划 线 */ 

color:#333333; /文本 的 颜色 */ 


| 
| 
| 国 国 
| .pic_list .content li a img { 
display:block: /* 当 图 片 设置 为 块 元 素 时 ， 可 以 解决 正 6 中 图 片 底部 几 个 空白 像素 的 bug*/ 
width:134px: 
| height:101px: 
| padding:3px; /* 设 置 图 片 的 宽 高 属性 以 及 内 补丁 属性 */ 
| margin-bottom:8px; /* 将 图 片 的 底部 外 补丁 设置 为 8px， 使 其 与 文字 之 间 产 生 一 定 间距 */ 
border: 1px solid #CCCCCC: 
background-color:#FFFFFF: /* 背 景 颜色 将 通过 内 补丁 的 空间 显示 */ 
| } 
| .pic list .content li a:hover { 
| text-decoration:underline; 
color#CC0000: /* 当 鼠标 经 过 图 文 列表 时 ， 文 字 有 下 划 线 并 且 改 变 颜 色 */ 
} 
.pic list .content li a:hover img { 
background-color:#22407E: /* 当 鼠标 经 过 图 文 列表 时 ， 图 片 的 背景 颜色 改变 */ 
} 


第 6 步 , 设计 完成 , 漂亮 的 图 文 列表 信息 经 过 简单 的 CSS 样式 处 理 后 就 会 完美 地 呈现 出 来 , 如 图 4.42 
| 所 示 。 
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| 4.42 图 文 信息 列表 的 最 终 页 面 效果 
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在 网 页 中 插入 图 像 


( 怨 视频 讲解 : 49 分 钟 ) 


在 网 页 中 ， 图 像 的 作用 越 来 越 重 要 。 在 一 个 页 面 中 加 入 适当 的 图 像 ， 可 以 使 页 面 显得 更 生 
动 活泼 、 美 现 大 方 ， 尤 其 是 在 一 些 展示 、 宣 传 、 艺 术 页 面 中 ， 图 像 是 必 不 可 少 的 。 此 外 ， 图 形 
给 人 的 视觉 印象 总 要 比 文字 强烈 得 多 ， 善 用 图 像 可 为 网 页 增色 不 少 。 如 何 合理 有 效 地 插入 图 像 
就 是 本 章 要 讨论 的 问题 。 同 时 ， 本 章 还 将 介绍 使 用 CSS 设置 图 像样 式 的 方法 ， 包 括 边框 、 对 齐 
方式 和 图 文 混 排 等 ， 并 通过 具体 的 实例 阐述 文字 和 图 片 的 综合 应 用 


【 学 习 重 点 】 

WI 网 页 图 像 概述 

WI 搜集 网 页 图 像素 材 

WI 在 网 页 中 插入 图 像 

WI CSS 设置 图 片 样式 的 方法 

MH CSS 控制 图 片 的 对 齐 方式 

WI 灵活 使 用 CSS 文字 和 图 片 属性 进行 图 文 混 排 


~ 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


5.1 网 页 图 像 概述 


在 设计 和 制作 网 页 之 前 ， 首 先 要 制作 网 页 图 像 ， 这 是 不 可 缺少 的 前 期 工作 。 制 作 一 个 网 页 大 部 分 
时 间 都 花 在 版 面 安排 和 图 像 设 计 上 。 如 果 一 个 网 页 版 面 安排 合理 、 整 洁 、 图 形 设计 精美 ， 一 定 能 让 人 
喜爱 。 制 作 网 页 使 用 的 图 像 不 仅 要 简单 ， 还 需要 与 整个 页 面 设计 风格 、 结 构 特点 、 图 像 要 表达 的 内 容 
相 协调 ， 否 则 很 难 与 页 面 匹配 。 


5.1.1 网 页 图 像 格式 


网 页 中 对 所 使 用 的 图 像 格式 是 有 限制 的 , 不 是 任何 一 种 图 像 格式 的 文件 都 能 应 用 到 网 页 中 ,所 以 
在 制作 之 前 就 要 考虑 到 这 一 点 ， 以 免 制作 出 来 的 图 像 无 法 在 网 页 中 使 用 。 
目前 ， 网 络 支持 的 图 形 格式 主要 有 JPEG/JPG、GIF 和 PNG 3 种 。 由 于 这 3 种 格式 各 有 利 次 ， 在 
设计 网 页 时 ， 要 根据 实际 情况 来 选择 使 用 何 种 图 像 格式 。 
回 “JPEGJPG: 这 是 一 种 失真 压缩 的 图 像 文 件 格式 ， 其 压缩 效果 非常 明显 ， 并 支持 真 彩色 24 位 
和 渐进 格式 。 虽 然 此 格式 支持 真 彩色 24 位 ， 但 压缩 后 的 文件 相对 网 络 图 像 而 言 仍然 显得 很 
大 ， 仅 适用 于 对 于 质量 要 求 高 的 图 像 ， 如 颜色 丰富 的 风景 画 和 照相 作品 等 ， 可 以 考虑 使 用 
这 一 格式 。JPEG 格式 在 压缩 保存 的 过 程 中 会 以 失真 最 小 的 方式 丢掉 一 些 人 眼 不 易 察 觉 的 数 
据 ， 因 而 以 此 格式 保存 后 的 图 像 没 有 原 图 像 的 质量 好 。 
回 GIF: 这 是 网 页 中 使 用 最 多 的 图 像 格式 ， 它 最 大 的 优点 就 是 所 生成 的 文件 比较 小 ， 非 常 适合 
网 络 传输 ， 并 且 支 持 透明 背景 和 动画 功能 。 因此， 此 格式 在 网 页 中 应 用 非常 广泛 。GIF 格式 
的 图 像 与 JPEG 格式 不 同 ， 它 为 非 失真 压缩 ， 存 储 格 式 为 1 位 ~8 位 。 只 支持 256 色 ， 而 不 
支持 真 彩色 24 位 ， 这 是 GIF 格式 的 主要 缺点 。 
PNG: 此 格式 是 Fireworks 的 默认 格式 ， 它 是 一 种 非 失真 压缩 格式 ， 具 有 JPEG 和 GIF 格式 
的 全 部 优点 ， 如 支持 透明 背景 、 动 画 和 真 彩色 24 位 。 
除了 上 面 介绍 的 3 种 图 像 格式 之 外 ， 还 有 许多 种 图 像 格 式 ， 如 BMP、TIF、PSD、EPS 等 格式 ， 
但 这 些 格式 都 无 法 直接 使 用 到 网 页 中 。 因 此 ， 在 设计 网 页 过 程 中 ， 必 须 将 这 些 图 像 格 式 的 文件 先 转 换 
成 GIF、JPEG 或 PNG 格式 的 文件 。 转 换 方法 很 多 ， 只 要 用 Photoshop 等 图 像 处 理 软件 打开 要 转换 的 
图 像 文件 ， 另 存 为 在 网 页 中 使 用 的 JPEG、GIF 或 PNG 格式 文件 即 可 。 


5.1.2 图像 下 载 速度 


从 图 像 显 示 效果 而 言 ， 当 然 是 图 像 颜色 越 丰富 越 好 ， 这 样 可 以 很 清晰 地 欣赏 图 像 。 但 对 浏览 者 而 

言 ， 就 需要 等 待 更 多 的 时 间 才 能 浏览 到 此 图 像 。 因 为 颜色 越 丰富 ， 图 像 文件 就 越 大 ， 其 在 网 络 上 的 传 
输 也 就 越 慢 。 因 此 ， 在 设计 网 页 时 ， 万 不 得 已 不 要 放 入 过 大 的 图 像 文件 ， 也 不 要 用 过 多 的 多 媒体 文件 
造成 浏览 者 观看 页 面 时 的 麻烦 。 
其 实 ， 制 作 网 络 图 像 与 制作 普通 图 像 没 什么 两 样 ， 不 同 点 在 于 网 络 图 像 要 在 网 络 上 传输 ， 因 此 除 
了 要 考虑 图 像 品 质 之 外 ,更 多 的 则 要 考虑 图 像 文件 的 大 小 ， 以 便 图 像 能 够 更 快 地 在 网 络 上 传输 。 控 制 
图 像 文件 大 小 ， 以 便于 在 网 络 上 传输 时 ， 应 注意 以 下 几 项 。 

回 ”图像 格式 : 不 同 的 图 像 格 式 ， 其 压缩 率 不 同 ， 所 存储 的 文件 大 小 也 不 同 。 

回 ”图像 尺寸 : 图 像 尺寸 越 大 ， 图 像 文 件 就 越 大 。 反之， 图像 尺 寸 越 小 ， 文 件 就 越 小 。 
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回 ”颜色 数目 ， 在 一 个 图 像 中 ， 颜 色 越 丰富 ， 所 记录 的 数据 就 越 多 ， 因 而 保存 后 的 文件 也 就 越 大 。 | 

回 ”分辩 率 分辩 率 是 指 在 单位 长 度 内 所 含有 的 点 (或 像素 ) 的 多 少 。 因 此 ， 分 辩 率 越 大 , 所 | 

记录 的 数据 也 就 越 多 ， 文 件 也 就 越 大 。 

根据 以 上 几 点 ， 用 户 就 可 以 在 制作 图 像 时 ， 合 理 有 效 地 控制 图 像 文件 的 大 小 了 。 但 要 注意 , 不 要 | 

一 味 地 追求 文件 大 小 ， 而 忽略 了 图 像 质量 。 若 如 此 ， 即 使 图 像 文件 再 小 也 失去 了 意义 。 有 时 ， 不 得 不 | 
在 网 页 中 放 入 一 些 大 图 , 但 应 为 浏览 者 多 考虑 , 尽量 让 这 个 图 像 文件 最 小 。 例如 ,可 以 使 用 Photoshop 
中 的 图 像 分 割 功能 ， 将 图 像 分 割 成 多 个 小 区 域 。 这样， 在 网 络 上 下 载 时 就 不 会 因 图 像 太 大 而 造成 漫长 | 
的 等 待 了 。 | 


5.1.3 ”网 页 图 像 制作 技巧 


无 论 用 户 是 初学 者 还 是 图 像 制作 高 手 ， 在 制作 网 页 图 像 时 ， 都 应 掌握 下 面 几 个 要 点 。 

1. 网 络 图 像 制作 要 小 而 精 ， 忌 大 而 洲 

网 络 图 像 不 是 在 个 人 电脑 上 ， 在 网 络 上 浏览 网 页 ， 速 度 非常 重要 ， 所 以 首先 要 考虑 图 像 文件 的 大 
小 ， 尽 量 不 使 用 500KB 以 上 的 图 像 。 此 外 ， 网 页 中 的 图 像 不 在 于 多 ， 而 在 于 能 否 衬托 出 主题 、 演 染 
内 容 ， 即 图 像 一 定 要 与 内 容 有 关 ， 不 要 只 追求 漂亮 ， 而 加 入 没有 意义 的 图 像 ， 如 图 5.1 所 示 是 腾讯 公 
司 的 首页 。 
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a 、 [Ne— 
图 5.1 图 像 小 巧 以 服务 内 容 为 目的 的 页 面 效果 
图 5.1 页 面 以 蓝 色 为 主 色调 ， 各 个 栏目 的 标题 颜色 为 浅 蓝 色 ， 与 白色 背景 相 协 调 ， 文 字 链 接 的 背 
景 也 用 淡 蓝 色 ， 虽然 网 页 信息 量 大 ,但 这 种 以 冷色 调 为 主 的 网 页 颜色 规划 会 给 人 以 清 新 的 感觉 不 会 
因为 网 页 的 内 容 多 而 感到 烦躁。 该 网 页 所 用 的 图 形 大 多 是 卡通 或 简 笔画 ,气氛 轻松 活泼 ， 图 像 的 色彩 | 
也 采用 单一 的 较 纯 的 颜色 ,让 人 耳目 一 新 。 更 为 主要 的 是 这 些 图 像 文 件 都 非常 小 ， 不 过 几 KB。 整 个 
图 像 设计 小 巧 简约 却 不 幼稚 ， 色 调 明晰 却 不 妖艳 ， 让 人 感到 轻松 愉悦 。 
2. 图 像 要 分 主 次 ， 尽 喧 宾 村主 
同一 页 面 中 的 图 像 ， 要 有 主 次 之 分 ， 在 大 小 、 颜 色 、 位 置 上 辅助 图 不 要 超过 主 图 。 一 般 来 说 , 一 | 
个 页 面 上 只 有 一 幅 主 图 , 应 放 在 较 醒 目的 位 置 , 其 余 放 在 次 一 些 的 位 置 。 而 且 图 像 大 小 也 应 有 所 不 同 ， 
除非 是 介绍 性 的 图 像 ， 如 产品 图 像 、 风 光照 片 等 可 以 同等 大 小 。 
如 图 5.2 所 示 是 苹果 中 国 官网 页 面 ， 整 个 页 面 就 插入 了 一 幅 图 片 ， 占 据 整 体 页 面 ， 图 片 虽然 有 点 
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| 大 ， 但 不 喧 宾 夺 主 ， 其 主要 原因 就 在 于 色调 和 内 容 的 协调 统一 。 








| 
| 图 5.2 图 像 与 页 面 融 为 一 体 的 页 面 效 果 
| 3， 用 色 讲究 主 色调 ， 忆 杂乱 无 章 


| 一 个 优美 的 网 页 , 都 有 一 种 主 色调 来 烘托 内 容 。 页 面 的 大 部 分 应 该 用 同一 种 颜色 或 者 相近 的 颜色 ， 
| 而 图 形 可 以 用 与 主 色调 反差 大 一 些 的 颜色 , 起 到 画龙点睛 的 作用 。 如 图 5.3 所 示 , 页 面 插入 多 幅 小 图 ， 
| 这 些小 图 重 在 泻 染 气氛 ,烘托 主题 使 不 明白 本 页 功能 的 浏览 者 一 看 见 该 图 就 知道 网 页 的 内 容 ， 即 使 
| 图像 的 颜色 与 网 页 主 色调 反差 比较 大 ， 但 作用 不 可 小 视 ， 也 很 引 人 注 目 。 





5.3 ”图 像 烘托 主题 的 页 面 效 果 


4. 选择 合适 的 软件 会 事半功倍 
图 像 制 作 软件 有 很 多 ， 如 Photoshop、Fireworks、Illustrator 等 。 随 着 这 些 软件 的 不 断 升 级 和 功能 
的 不 断 改善 ， 均 可 以 用 来 制作 网 页 图 像 。 它 们 制作 出 来 的 图 像 最 终 效果 都 差不多 。 如 何在 众多 软件 中 
| 选择 一 种 适合 制作 网 页 图 像 的 软件 呢 ? 
| 最 主要 的 是 看 自己 用 起 来 能 否 得 心 应 手 ， 此 外 ， 使 用 起 来 是 否 方便 。 如 果 用 户 熟 悉 Photoshop， 
| | 那么 Photoshop 肯定 是 首选 ， 毕 竟 Photoshop 是 一 个 比较 专业 的 图 像 处 理 软 件 。 如 果 要 为 后 期 网 页 设 
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计 工 作 多 考虑 一 些 ， 则 可 能 会 选择 Fireworks， 因 为 Fireworks 是 专业 的 网 页 图 像 设 计 工 具 ， 与 | 
Dreamweaver 也 能 够 很 好 地 协作 。 例 如 ， 在 Fireworks 中 保存 的 网 页 或 是 分 割 区 域 ， 可 以 直接 插入 到 | 
Dreamweaver 中 使 用 ， 而 不 会 改变 原 有 位 置 ， 并 且 在 Fireworks 中 所 做 的 一 切 设置 (如 图 像 位 置 、 链 | 


接地 址 等 ) 都 不 会 改变 。 | 
5.1.4 “搜集 图 像素 材 





只 有 拥有 了 丰富 的 网 页 素材 ， 才 能 制作 出 优质 的 网 页 。 一 般 来 说 ， 图 像 文 件 均 可 作为 网 页 的 图 像 | 
素材 使 用 ， 但 是 由 于 网 页 图 像 受 格式 和 文件 大 小 的 限制 ， 因 此 并 不 是 所 有 图 像 都 可 直接 用 于 网 页 中 ， | 
而 需要 经 过 处 理 〈 如 缩小 文件 等 ) 和 格式 转换 后 才能 使 用 。 | 

网 页 图 像 不 同 于 普通 图 像 ， 它 包含 了 各 种 专门 用 于 网 页 的 图 像 元 素 ， 如 LOGO〔 网 站 图 标 )、 | 
Banner (广告 条 ， 或 网 页 横幅 ) 、 按 钮 背景、 项 目 符号 、 小 图 标 和 分 隔 线 等 ， 如 图 5.4 所 示 。 因 此 ， 
搜集 网 页 图 像素 材 ， 不 只 是 搜集 一 些 漂亮 的 风景 图 像 ， 还 要 搜集 一 些 专门 用 于 网 页 的 图 像素 材 。 





懒 人 图 库 网 提供 的 各 种 按钮 大 图 网 提供 的 网 页 纹理 背景 
加 5.4 ”各 种 网 页 使 用 的 图 像素 材 


如 何 获得 图 像素 材 呢 ? 

购买 网 页 素材 光盘 。 

回 ”通过 百度 搜索 网 页 素材 。 

下 面 列 出 一 些 比较 专业 的 网 页 资源 站 点 仅 供 参考 : 
回 “http:/www.sucaiw.com 〈 素 材 精 品 屋 ) 。 

回 “http:/www:jzzy.com/〈 建 站 资源 网 ) 。 

回 “http://www.dabaoku.com/《〈 网 页 制作 大 宝库 ) 。 
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http://www.68design.net/( 网 页 设计 师 联 盟 )。 

http://www.mbsky.com/ (模板 天 下 》 。 

回 ”http://www.citk.net/ (丁丁 家 园 ) 。 

会 内 | 利用 搜索 引擎 可 以 快速 找到 需要 的 网 页 素材 。 例 如 ， 利 用 百度 搜索 网 页 LOGO。 
S| 【操作 步骤 】 


ee 第 1 步 ， 先 拨号 上 网 ， 并 启动 正 浏览 器 。 
第 2 步 ， 在 正 地 址 栏 中 输入 “http:/www.baidu.com/”， 打 开 百 度 搜 索引 擎 ， 如 图 5.5 所 示 。 百 
| 度 是 全 球 最 大 的 中 文 搜索 引擎， 能 够 提供 专业 快速 的 搜索 功能 ， 特 别 在 搜索 音乐 、 图 片 等 多 媒体 信息 
| 方面 功能 强大 。 
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图 5.5 打开 百度 搜索 引擎 


第 3 步 ， 在 菜单 栏 中 选择 “图 片 ”， 切 换 到 图 片 搜索 页 面 ， 如 图 5.6 所 示 。 百 度 能 够 从 亿 万 中 文 
网 页 中 提取 各 类 图 片 ， 建 立 了 世界 第 一 的 中 文 图 片 库 。 
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| 5.6 选择 搜索 图 片 
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7 | 

第 4 步 ， 在 【图 片 搜索 】 文 本 框 中 输入 要 搜索 的 关键 字 ， 例 如 “LOGO 网 页 ”， 然 后 在 下 面 选 | 

项 组 中 选择 搜索 图 片 的 大 小 、 颜 色 、 类 型 和 格式 ， 如 图 5.7 所 示 。 在 搜索 时 ， 默 认 的 选择 是 搜索 所 有 | 
格式 的 图 片 。 
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图 5.7 设置 搜索 条 件 
第 5 步 ， 单 击 【百度 一 下 】 按 钮 ， 即 可 搜索 出 相关 的 全 部 图 片 ， 如 图 5.8 所 示 。 
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5.8 搜索 图 片 列表 


第 6 步 ， 在 搜索 结果 页 面 中 ， 单 击 合适 的 缩 略 图 ， 可 将 图 片 放大 观看 ， 如 图 5.9 所 示 。 有 时 当 单 
击 缩 略图 后 会 出 现 “ 找 不 到 图 片 ” 等 情况 时 ， 这 是 由 于 图 片 所 在 的 源 网 页 已 经 删除 、 改 动 或 暂时 无 法 | 
访问 等 问题 所 导致 的 。 对 于 这 种 情况 ， 只 能 以 翻 页 查看 更 多 图 片 来 进行 选择 。 

第 7 步 ， 如 果 想 看 到 更 多 的 图 片 ， 可 以 滚动 鼠标 ， 向 下 翻 页 查看 ， 最 后 单 击 页 面 底部 的 【加 载 更 
多 图 片 】 按 钮 查看 更 多 搜索 结果 ， 如 图 5.10 所 示 。 
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图 5.10 在 图 片 列 表 中 查找 需要 的 图 片 


| 如 果 要 在 网 页 中 展示 公司 产品 ， 或 者 是 个 人 照片 等 图 像 ， 则 还 需要 配备 一 台 扫描 仪 或 数码 相机 ， 
| 这 样 可 以 随时 将 各 种 风景 、 人 物 、 艺 术 作品 或 公司 产品 的 图 像 输入 到 计算 机 中 ， 加 以 处 理 后 应 用 到 网 
页 中 。 由 于 使 用 扫描 仪 和 数码 相机 所 涉及 的 内 容 较 多 ， 这 里 就 不 做 介绍 了 。 

以 上 获取 图 像素 材 的 方法 方便 快捷 ， 但 是 ， 要 很 快 找到 能 够 真正 应 用 于 网 页 中 的 图 像 ， 却 并 不 容 
| 易 。 所 以 ， 最 有 效 的 方法 还 是 用 户 自己 制作 网 页 图 像 ， 这 样 更 具有 针对 性 ， 并 且 可 以 结合 网 页 内 容 来 
| 制作 图 像 。 当 然 ， 也 可 以 找 一 些 图 像素 材 作为 底稿 ， 在 其 基础 上 进行 修改 。 


5.2 案例 实战 : 在 网 页 中 插入 图 像 





有 了 丰富 的 图 像素 材 , 就 可 以 利用 Dreamweaver 把 这 些 图 像 组 织 在 一 起 , 设计 出 具有 一 定 审美 效 
| 果 的 网 页 页 面 。 下 面 设计 一 个 简单 的 网 页 演示 在 网 页 中 如 何 插入 图 像 的 一 般 方法 。 本 网 页 的 效果 如 
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图 5.11 所 示 。 











图 5.11 在 网 页 中 插入 图 像 的 效果 


该 页 面 由 LOGO 图 标 、Banner 广告 条 、 按 钮 、 背 景 和 修饰 图 案 组 成 ， 制 作 并 整理 的 图 像素 材 如 | 
图 5.12 所 示 。 


必 旨 之 完 


LOGO 图 标 Banner 广告 条 


按钮 


修饰 图 案 (GIF 格式 透明 背景 ) 








背景 
图 5.12 本 页 所 需要 的 图 像素 材 

5.2.1 插入 背景 和 标题 头 

面 对 图 5.12 所 列 图 像素 材 ， 如 何 把 它们 有 机 地 组 织 在 一 起 ， 在 具体 上 机 之 前 用 户 应 心中 有 数 ， | 
最 好 在 纸 上 随 意 打 个 草稿 ， 避 免 言 目 操作 。 本 页 布局 简明 ， 结 构 也 不 是 太 复杂 ， 但 对 于 初学 者 来 说 仍 | 
然 会 存在 不 小 的 困难 ， 下 面 就 逐步 介绍 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 文件 ， 保 存 为 main html。 
容 提示 : 把 上 面 制作 的 所 有 图 像素 材 都 汇集 到 images 文件 夫 中 ， 并 保证 该 文件 夫 和 main html 文件 | 

同 处 在 一 个 目录 下 。 
第 2 步 ， 在 Dreamweaver 文档 编辑 窗口 中 , 单 击 窗口 底部 的 【属性 】 面板 中 的 【页 面 属性 】 按钮 ， 
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| 如 图 5.13 所 示 。 如 果 没 有 显示 【属性 】 面 板 ， 可 以 选择 【窗口 】|【 属 性】 命令 。 
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图 5.13 单 击 【 页 面 属性 】 按 钮 


第 3 步 ， 打 开 【 页 面 属性 】 对 话 框 ， 在 【分 类 】 列 表 框 中 选择 【常规 】 选 项 ， 然 后 在 右 侧 设置 区 
域 设置 网 页 的 背景 图 像 ， 如 图 5.14 所 示 。 
第 4 步 ， 设 置 完毕 ， 单 击 【 确 定 】 按 钮 关闭 【页 面 属性 】 对 话 框 ， 则 编辑 窗口 如 图 5.15 所 示 。 
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图 5.14 设置 网 页 背景 图 像 图 5.15 设置 背景 图 像 的 网 页 效果 
第 5 步 ， 在 编辑 窗口 中 插入 一 个 表格 。 选 择 【 插 入 】| 【表格 】 命 令 ， 打 开 【 表 格 】 对 话 框 ， 设 


| 
| 置 : 1 行 2 列 ， 宽 度 800 像素 ， 边 框 、 单 元 格 边 距 和 单元 格 间距 都 为 0， 如 图 5.16 所 示 。 
| 第 6 步 ， 揪 入 表格 之 后 ， 在 【属性 】 面 板 中 设置 表格 居中 显示 ， 如 图 5.17 所 示 。 
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| 图 5.16 设置 【表格 】 对 话 框 5.17 插入 表格 并 使 其 居中 显示 
| 第 7 步 ， 把 光标 置 于 插入 表格 的 第 1 个 单元 格 中 ， 在 【属性 】 面 板 中 设置 第 1 个 单元 格 宽 为 200 
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像素 ， 如 图 5.18 所 示 。 
































图 5.18 设置 单元 格 宽度 效果 
第 8 步 ， 选 择 【 插 入 】| 【图 像 】| 【图 像 】 命 令 ， 在 打开 的 【选择 图 像 源 文 件 】 对 话 框 中 选择 要 
插入 的 LOGO 图 标 。 然 后 ， 把 光标 置 于 第 2 个 单元 格 中 ， 以 同样 的 方法 插入 Banner 广告 条 ， 并 设置 
该 图 像 在 单元 格 中 居中 显示 ， 如 图 5.19 所 示 。 
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可 二 











5.19 插入 LOGO 和 Banner 效果 


5.2.2 ”插入 按钮 和 修饰 图 案 


5.2.1 节 完 成 了 网 页 页 面 的 标题 设计 ， 本 节 利 用 表格 插入 导航 按钮 和 制作 圆 角 的 修饰 图 案 。 | 

【操作 步 又】 | 

第 1 步 ， 把 光标 置 于 第 1 个 表格 的 后 面 ， 选 择 【 插 入 】| 【表格 】 命 令 ， 插 入 一 个 表格 ， 设 置 : 1 | 
行 2 列 ， 宽 度 800 像素 ， 边 框 粗细 、 单 元 格 间距 和 单元 格 边 距 都 为 0， 与 5.2.1 节 中 【表格 】 对 话 框 
设置 相同 。 

第 2 步 , 插入 表格 之 后 , 在 【属性 】 面板 中 设置 表格 居中 显示 ,同时 设置 第 1 个 表格 也 居中 显示 ， 
并 设置 第 2 个 表格 的 第 1 个 单元 格 宽度 为 00， 效果 如 图 5.20 所 示 。 

第 3 步 ， 在 第 1 个 单元 格 中 插入 一 个 8 行 1 列 的 表格 ， 设 置 宽度 为 100%， 同 时 设置 边框 粗细 、 
单元 格 间距 和 单元 格 边 距 都 为 0 的 表格 ， 对 话 框 设 置 如 图 5.21 所 示 。 

第 4 步 ， 在 表格 中 按 顺 序 从 上 到 下 分 别 插入 圆 角 图 案 (borderl.gif) 、6 个 按钮 (about.jpg、 
services.jpg、gallery.jpg、freebies.jpg、portfoliojpg、contactjpg) 和 圆 角 图 案 (border2.gif) ， 插 入 效 
果 如 图 5.22 所 示 。 
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图 5.22 插入 图 像 后 的 效果 


第 5 步 , 以 同样 的 方式 在 右边 单元 格 中 插入 一 个 3 行 3 列 的 表格 , 设置 表格 宽度 为 98%, 并 在 【 属 
性 】 面 板 中 设置 居中 显示 。 

第 6 步 ， 在 4 个 项 角 的 单元 格 中 插入 圆 角 修饰 图 案 ， 并 设置 单元 格 宽 、 高 为 图 案 大 小 ， 如 图 5.23 
所 示 。 
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| 图 523 插入 表格 和 贺 角 图 案 后 的 效果 
| 第 7 步 ,设置 没有 插入 贺 角 图 案 的 单元 格 背景 半 色 为 图 案 的 颜色 , 即 保持 表格 背景 颜色 的 一 臻 性 ， 
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最 后 效果 如 图 5.24 所 示 。 
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图 5.24 设置 单元 格 背景 颜色 一 致 性 


5.3 设置 图 片 样式 


| 
图 片 的 效果 很 大 程度 上 影响 到 网 页 效果 ,要 使 网 页 图 文 并 茂 并 且 布局 结构 合理 ， 就 要 注意 图 片 的 | 
设置 。 通 过 CSS 统一 管理 ， 不 但 可 以 更 加 精确 地 调整 图 片 的 各 种 属性 ， 还 可 以 实现 很 多 特殊 效果 。 | 
本 节 将 对 图 片 的 边框 、 图 片 的 大 小 与 缩放 、 图 片 对 齐 等 属性 进行 介绍 。 
5.3.1 ”定义 图 片 边框 


在 HIML 语法 中 ， 可 以 直接 通过 <.img> 标 签 的 border 属性 来 为 图 片 添加 边框 ， 语 法 如 下 : 
<img src=" 图 片 路 径 " border=" 数 值 "> 
【示例 1】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 以 下 代码 ; 


<img src="images/11.jpe" border="0"> 
<img src="images/11.jpg" border="1"> 
<img src="images/11.jpg" border="2"> 
<img src="images/11.jpe" border="3"> 


按 F12 键 ， 在 浏览 器 中 预览 ， 其 显示 效果 如 图 5.25 所 示 。 























图 5.25 HTML 控制 图 片 边框 
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| 通过 图 5.25 可 以 看 到 ， 用 HTML 控制 图 片 边框 是 无 法 设计 出 丰富 多 彩 的 图 片 效 果 的 ， 需 要 使 用 
| CSS 中 的 border-style、border-color 和 border-width 3 个 属性 来 定义 边框 。 其 语法 如 下 : 
| border-style :参数 : 
全国 | border-color: 参 数 : 
二 内 | border-width: 数 值 ; 
border-style 属性 用 于 设置 边框 的 样式 ， 用 的 最 多 的 两 个 参数 是 dotted 表示 点 划 线 ， 用 dashed 表 
| 示 虚 线 ， 其 他 的 一 些 值 会 在 后 面 的 章节 中 详细 说 明 。border-color 属性 用 于 设置 边框 的 颜色 。 
| border-width 属性 用 于 设置 边框 的 宽度 。 
| 【示例 2】 启动 Dreamweaver, 新 建 一 个 网 页 , 保存 为 test1.html, 在 <body> 标 签 内 输入 以 下 代码 : 
| 
| <img src="images/22.jpg" class="pic1"/> 
| <img stc="images/22.jpgr class="pic2"/> 
| 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
| 来 定义 图 片 边框 样式 。 





| 

| picl { 

| border-style: dotted; 人 # 点 划 线 所 
border-color: #000066: /# 边 框 颜色 #/ 
border-width: 2px: 请 边 框 粗细 */ 

| } 

上 

| Pic2 { 

| border-style: dashed: 人 # 点 划 线 所 
border-color: #FF0000: 记 边 框 颜色 */ 
border-width: 10px: 上 # 边 框 粗细 所 


其 显示 效果 如 图 5.26 所 示 ， 第 1 幅 图 片 设置 的 是 蓝 色 、2 像素 的 点 划 线 ， 第 2 幅 图 片 设置 的 是 红 
色 、10 像素 宽 的 虚线 。 

【示例 3】 下 面 示例 为 图 像 四 边 设计 不 同 的 边框 样式 。 
| 在 CSS 中 ,还 可 以 分 别 设置 4 个 边框 的 不 同样 式 , 即 分 别 设置 border-left、 border-right、 border-top、 
| borderbottom 的 样式 。 
| 启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test2.html， 在 <body> 标 签 内 输入 以 下 代码 : 
<img src="images/33.jpg"/> 


在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 


border-right-style: dashed: 
border-right-color: #33CC33: 


| 

| 来 定义 图 片 边框 样式 。 

| 

| border-left-style: dotted: 人 # 在 点 划 线 机 

| border-left-color: #FF9900: 上 * 左 边框 颜色 */ 
| border-left-width: Spx: 人 # 左 边框 粗细 所 
| 

| 


border-right-width: 2px: 


| border-top-style: solid: 记 上 实 线 */ 
| border-top-color: #CCOOFF: 人 # 上 边框 颜色 所 
| border-top-width: 10px: 片上 边框 粗细 */ 


| border-bottom-style: groove: 
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border-bottom-color: #666666: 
border-bottom-width: 15px: 
B 


其 显示 效果 如 图 5.27 所 示 ， 图 片 的 4 个 边框 被 分 别 设置 了 不 同 的 样式 。 





图 5.26 设置 各 种 图 片 边框 图 5.27 分 别 设置 4 个 边框 


【示例 4】 在 示例 3 中 介绍 了 分 别 设置 4 个 边框 的 方法 ，border 属性 还 可 以 将 各 个 值 写 到 同一 语 
句 ， 用 空格 分 隔 ， 这 样 可 以 大 大 缩短 代码 长 度 。 

启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test3.html， 在 <body> 标 签 内 输入 以 下 代码 : 

<img src="images/44.jpe" class="pic1"/> 
<img src="images/44.jpg" class="pic2"/> 

在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
来 定义 图 片 边框 样式 。 

.picl { border: Spx double #FFOOFF: 证 将 各 个 值 合并 */ 
} 
-pic2 { 
border-right: Spx double #000: 
border-left: 8px solid #45673A: 
} 

其 显示 效果 如 图 5.28 所 示 ， 可 以 看 到 代码 的 长 度 明显 减少 ， 这 样 不 但 清晰 易 读 ， 而 且 大 大 加 快 
了 网 页 下 载 速度 。 

【拓展 示例 4 是 将 border 的 各 个 属性 值 写 到 一 起 , 有 的 时 候 还 会 出 现 这 样 的 语句 : border-style: 
dotted solid dashed doubel、border-width:5px 10px， 这 种 设置 方法 也 是 正确 的 , 但 是 上 面 这 种 语句 如 果 
写成 这 样 : border:dotted solid dashed doubel、borderh:5px 10px， 就 不 对 了 。 在 设置 边框 样式 时 ， 如 果 
border-style、border-width、border-color 只 设置 一 个 参数 ， 则 该 参数 将 作用 于 4 个 边 ， 即 4 个 边 的 样 
式 风 格 一 样 ， 如果 设置 两 个 参数 ， 则 第 一 个 参数 作用 于 上 、 下 边框 ， 第 二 个 参数 作用 于 左 、 右 边框 ; 
如 果 设 置 3 个 参数 ， 则 第 一 个 参数 作用 于 上 边框 ， 第 二 个 参数 作用 于 左 、 右 边框 ， 第 三 个 参数 作用 于 
下 边框 ， 如 果 设 置 4 个 参数 ， 则 按照 上 - 右 - 下 - 左 的 顺序 作用 于 各 个 边框 。 例 如 示例 4 中 的 CSS 改 为 


= 和 Se 
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a 拉 页 纳 计 弓 网 站 建 役 以 入 门 到 将 通 
| 这 样 ， 显 示 效果 如 图 5.29 所 示 。 
| 
! 


border-style: dotted solid: 片上 、 下 边框 为 dotted， 左 、 右 边框 为 solid*/ 
border-width: 5px 10px 8px Ts 让 上 边框 为 5px， 右 边框 为 0px， 下 右边 框 为 8px， 左 边框 为 3px*/ 
border-color: #009966 #000: /# 分 别 设置 上 、 下 和 左 、 右 边框 颜色 #/ 


| } 
Note | .pic2 { border: Spx double #000: 人 # 合 并 border 的 各 个 属性 */ 








图 5.28 合并 CSS 代码 图 5.29 另 一 种 合并 代码 的 方法 
CSS 中 很 多 其 他 的 属性 也 可 以 进行 类 似 的 操作 ， 例 如 margin 和 padding:padding:0px Spx、 
| margin:0px 10px 3px 20px。 


交 提示 : 在 设置 border-style、border-color 和 border-width 时 ,设置 的 顺序 是 有 讲究 的 ， 在 设置 border- 
color 和 border-width 之 前 必须 先 设 置 border-style， 和 否则 border-color 和 border-width 的 效 
果 将 不 会 显示 。 


5.3.2 ”定义 图 片 大 小 
Css 设置 图 片 大 小 只 需 设置 图 片 的 宽度 属性 width 和 高 度 属性 height 即 可 ， 设 置 方法 如 下 ; 


img { 
width: 数 值 ; 
| height: 数 值 : 
| } 
! 














其 中 ， 宽 度 属性 width 和 高 度 属性 height 的 值 既 可 以 是 绝对 数值 ， 如 200px， 也 可 以 是 相对 数值 ， 
如 50%， 当 width 设置 为 50% 时 ， 图 片 的 宽度 将 调整 为 父 元 素 宽度 的 一 半 。 
【示例 1】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 中 输入 以 下 内 容 : 


<img sre="images/1 .jpe”> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 


| 二 
| width:50%: 让 相对 宽度 */ 
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| 
其 显示 效果 如 图 5.30 所 示 。 因 为 设置 的 是 相对 大 小 ， 这 里 是 相对 于 body 元 素 的 宽度 ， 因 此 图 片 | 
的 大 小 总 是 保持 相对 于 body 的 50%， 当 改变 浏览 器 大 小 时 ， 图 片 的 大 小 也 相对 变化 ， 但 总 是 保持 在 | 
50% 的 水 平 。 


现 
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图 5.30 图 片 的 宽度 相对 变化 


这 里 需要 指出 的 是 ， 在 此 例 中 仅仅 设置 了 图 片 的 width 属性 ， 而 没有 设置 height 属性 ， 但 是 图 片 
的 大 小 会 等 纵横 比例 缩放 ， 如 果 只 设 定 了 height 属性 而 没有 设置 width 属性 道理 也 是 一 样 的 。 
【示例 2】 在 设置 图 片 大 小 时 ， 当 同时 设 定 了 width 和 height 属性 时 ， 图 片 将 不 等 比 缩放 。 启 动 | 
Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 结构 : 
<img src="images/2.jpe"> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
img { 
width: 60%:; * 相 对 宽度 */ 
height: 200px: 上 绝 对 宽度 











其 显示 结果 如 图 5.31 所 示 。 可 以 看 到 图 片 的 高 度 固定 为 280px， 当 浏览 器 窗口 变化 时 ， 高 度 并 没 
有 随 着 图 片 宽 度 的 变化 而 变化 ， 图 片 发 生 了 不 等 比 的 缩放 。 











5.31 不 等 比 缩放 


【拓展 】 在 图 片 缩放 中 ， 等 比例 地 修改 图 片 的 宽度 值 和 高 度 值 ， 可 以 保证 图 片 不 变形 。 其 实在 
CSS 中 还 有 一 个 参数 max-width， 通 过 设置 它 可 以 保证 图 片 不 变形 。 这 个 参数 就 是 用 来 设置 图 片 的 最 
大 值 ， 如 果 图 片 的 尺寸 超过 这 个 图 片 的 最 大 值 (max-width), 那么 就 按 设 置 的 max-width 值 显示 宽度 ， 
而 图 片 的 高 度 将 做 同比 例 变化 。 但 是 , 如 果 图 片 的 尺寸 小 于 最 大 宽度 值 , 那么 图 片 是 按 原 尺寸 来 显示 ， 
不 做 缩放 。 这 个 参数 的 用 法 如 下 : 


img{ 
max-width: 最 大 宽度 值 : 
} 


» 
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其 中 ，max-width 属性 的 值 一 般 为 数值 类 型 ， 只 要 将 其 定义 为 一 个 固定 的 数值 就 可 以 控制 图 片 的 
最 大 宽度 。 例如 定义 max-width:400px, 那么 就 定义 了 图 片 的 最 大 宽度 为 400px, 就 算 超 出 这 个 宽度 值 ， 
也 只 会 显示 400px 大 小 ; 如 果 图 片 的 宽度 值 小 于 这 个 值 ， 则 会 按 图 片 的 原 大 小 显示 。 


一。 5 .3.3 ”定义 图 片 的 横向 对 齐 


Note | 图 片 的 横向 对 齐 和 文字 的 横向 对 齐 方法 基本 相同 ， 分 为 左 、 中 、 右 3 种 。 不 同 的 是 图 片 的 对 齐 不 
| 能 直接 通过 设置 图 片 的 text-align 属性 来 定义 ， 而 是 需要 通过 设置 其 父 元 素 的 该 属性 ， 使 其 继承 
| text-align 属性 来 实现 。 
【示例 】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 中 输入 以 下 代码 ， 并 分 别 设置 align 属 
性 调整 对 齐 方 式 。 
<table width="100%" border="1"> 
<t> 
<td style="text-align:left:"><img Src="images/1.jpg"></td> 


<td style="text-align:center;"><img src="images/1 .jpe"></td> 


<td style="text-align:right:"><img src="images/1.jpg"></td> 
<t> 
</table> 


显示 效果 如 图 5.32 所 示 。 



































图 532 设置 图 片 的 水 平 对 齐 
5.3.4 定义 图 片 的 纵向 对 齐 


图 片 的 纵向 对 齐 主要 体现 在 和 文字 的 搭配 使 用 中 ， 当 图 片 的 高 度 和 宽度 与 文字 部 分 不 一 致 时 ,可 
以 通过 CSS 中 的 vertical-align 属性 来 设置 纵向 对 齐 。 
| {vertical-align: 参 数 } 
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| 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 | 
义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : | 


img { | 
border 1px #990000 solid: 人 # 设 置 图 片 边框 : 全 fF 
height: S50px; 让 设置 图 片 高 度 */ | 窒 一 





然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 上 面 的 类 样式 。 


<p class="baseline"> 纵 向 对 齐 baseline<img src="images/1 jpg" style="vertical-align:baseline" /></p> 
<p class="sub"> 纵 向 对 齐 sub: <img src="images/1.jpg" style="vertical-align:sub" /></p> | 
<p class="super"> 纵 向 对 齐 super: <img src="images/1.jpg" style="vertical-align:super" /></p> | 
<p class="top"> 纵 向 对 齐 top: <img src="images/1.jpg" style="vertical-align:top" /></p> | 

<p class="middle"> 纵 向 对 齐 middle: <img src="images/1.jpg" style="vertical-align:middle" /></p> 

<p class="bottom"> 纵 向 对 齐 bottom: <img src="images/1.jpe" style="vertical-align:bottom" /></p>> | 
! 
在 浏览 器 中 预览 ， 则 显示 效果 如 图 5.33 所 示 。 | 
! 
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5.33 图 片 的 纵向 对 齐 效果 
【示例 2】 与 文字 的 纵向 对 齐 相似 ， 图 片 的 纵向 对 齐 也 可 以 设置 具体 的 数值 。 启 动 Dreamweaver， 
新 建 一 个 网 页 ， 保 存 为 test1.html， 在 <body> 标 签 内 输入 如 下 结构 : 

<p> 纵 向 对 齐 <img src="images/1.jpg" style="vertical-align:5px:"> 方 式 : 5px</p> 
<p> 纵 向 对 齐 <img src="images/1.jpg" style="vertical-align:-20px:"> 方 式 : -20px</p> 
<p> 纵 向 对 齐 <img src="images/1.jpg" style="vertical-align:15px;"> 方 式 : 15px</p> 
在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定义 一 个 内 部 样式 表 ， 然后 定义 如 下 两 个 样式 : 
Pp { font-size: 20px: } 
img { 


在 浏览 器 中 预览 测试 ， 显 示 结果 如 图 5.34 所 示 。 可 以 看 出 ， 图 片 在 垂直 方向 上 发 生 了 位 移 ， 当 
设置 的 值 为 正 数 时 ， 图 片 向 上 移动 相应 的 数值 ， 当 设置 为 负数 时 ， 图 片 向 下 移动 相应 的 数值 。 


“10. 
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图 5.34 用 数值 调整 纵向 对 齐 


| 5.3.5 ”设置 文字 环绕 


| CSS 使 用 float 属性 来 实现 图 片 的 文字 环绕 ， 另 外 ， 除 了 float 属性 以 外 ， 再 配合 使 用 padding 属性 
| 和 margin 属性 ， 使 图 片 和 文字 达到 一 种 最 佳 的 效果 。float 属性 的 作用 是 使 对 象 产生 浮动 ， 其 语法 如 下 : 
| {float:leftlrightlnone;} 

float 属性 共有 3 个 值 ， 其 作用 分 别 如 下 。 

none: 默认 值 ， 对 象 不 浮动 。 

left， 左 浮动 ， 对 象 向 其 父 元 素 的 左 侧 仅 靠 。 

Tight， 右 浮动 ， 对 象 向 其 父 元 素 的 右 侧 仅 靠 。 

【示例 1】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 
义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 两 个 类 样式 。 


font-family: "宋体 " 
! font-size: 14px: 
| text-align: center: 
| color: #000066: 
| } 
| .container { 
| width: 600px: /# 容 器 container 的 宽度 */ 
| margin: 20px auto 0 auto: /*container 四 周边 界 ， 左 右 值 为 auto， 实 现 居中 显示 */ 
| padding: 20px 10px: /# 容 器 container 的 内 边 距 */ 
| border: #990000 1px solid: 片 容器 container 的 边框 */ 
| 
| img{ 
| border: 2px #009966 solid: 上/# 图 片 的 边框 所 
| float: left: 证 图 片 的 左 浮动 */ 
| width: 150px: 上 图 片 的 宽度 所 
| line-height: 2em: 刻 行 间距 */ 
| text-align: le 人 人 # 左 对 齐 反 
| text-indent: 2em: 证 首 行 缩 进 */ 
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| 
然后 在 <body> 标 签 中 输入 代码 ， 并 应 用 上 面 的 类 样式 。 | 
<div class="container"> | 
<hl> 北 湖 诗韵 <hl> | 
<p> 可 是 杜 风 吹 来 的 季节 ? 秋 是 蓝 色 的 。 昔 的 苍穹 ， 蓝 的 泥土 ， 蓝 的 微风 …'…。 静 说 、 清 闵 的 早晨 , 是 ， 
你 最 姚 如 的 时 刻 ， 清 丽 世 界 ， 蓝 的 柔情 ， 轻 轻 能 拥 着 你 ， 像 流 滋 着 蓝 色 秋思 的 明眸 深邃 、 沉 静 。 什 么 时 候 , 燃 | 
烧 的 云霞 进 现 了 。<img stc-"images/1 jpg" alt="” 广 你 郑 涩 的 面庞 ， 透 出 淡淡 的 红学 ， 而 后 来 又 隐 去 了 。 你 不 喜 
欢 浓 妆 艳 抹 ， 你 不 钟爱 际 涉 的 烟云 ? 尽管 它 一 度 那么 诱 人 ， 你 却 重新 找 回 了 宁静 ， 像 一 幅 泌 墨 如 云 的 画卷 ， 天 与 
湖 的 组 合 ， 风 与 情 的 融 汇 ， 蓝 色 太 浓 ， 太 多 。 远 处 ， 一 群 下 童 在 船上 嬉戏 ， 还 撑 起 了 荷 叶 的 小 伞 ， 博大 的 蓝 色 锦 
绣 ， 瞬 间 级 上 几 点 绿色 的 希 费 ， 于 是 ， 你 心底 流出 一 首 诗 ， 很 长 很 长 ， 关 于 童年 ， 关 于 绚丽 的 梦幻 …… 
阿波 罗 一 一 不 是 你 爱恋 许久 的 太阳 神 么 ? 你 却 等 它 逢 到 了 极点 , 才 坦 露出 那 环抱 你 的 、 著 郁 的 绿 树 
那 篇 人 或 杨 栏 似 的 苇 从 ， 那 依稀 点 弘 的 苦 江 草 。 南面 导 襄 族 的 影子 , 是 黄山 、 白 山 ……。 四 周 淡淡 的 委 气 竹 章 着， 
或 银灰 、 米 黄 ， 或 淡 青 、 浅 蓝 。 在 映 日 荷花 安 拜 的 地 方 ， 亭 亭 的 荷 叶 依然 位 立 着 ， 几 多 深情 ， 几 多 着 念 。 那 荷 叶 
编织 的 屏障 后 面 ， 却 传 来 喝 虽 私语， 萧萧 琴瑟， 触动 了 你 多 情 的 心弦 ， 于 是 ， 你 心底 袁 来 一 首 歌 ， 很 美 很 美 : 关 
于 初恋 ， 关 于 大 自然 ……</p> 
</div> 
在 浏览 器 中 预览 ， 则 显示 效果 如 图 5.35 所 示 。 本 例 中 运用 了 float:left 使 图 片 移 至 页 面 左边 ， 从 
而 文字 在 右边 环绕 。 








北湖 诗韵 


可 是 重 风 吹 玉 的 其 节 ? 秋 是 再 色 的 。 划 的 共 夸 ， 黄 的 党 士 ， 醒 的 向 风 …… , 静 诊 、 清 六 的 时 
旦 ,是 你 最 钙 圳 4 时刻 ， 清 而 世界 ， 重 的 : 流溢 着 草 色 秋思 的 腔 


霹 戏 ， 还 择 把 了 得 叶 

首 诗 ， 很 长 很 长 ! 关于 宣 年 ， 关 于 绝 而 的 梦幻 ~…” 阿 流 罗 一 一 不 是 你 爱 节 计 

等 它 升 到 了 根 点 ， 才 坦 吉 出 理 环 抱 你 的 、 孔 邦 的 绎 村， 著 篇 包 或 痢 们 所 的 革 丛 ， 对 镶 稀 点 绢 的 苦 
江 草 。 南 百 著 靳 巴 的 彩 子 ， 是 黄山 、 白 山 ~… 漠 的 答 气 乱 重 着， 或 要 区 、 六 黄 ， 惑 滩 
青 、 污 基 。 在 耽 已 币 社 安 幕 的 邮 方 ， 享 事 的 | 字 几 和 艰深 清 , 几 允 痊 之 那 千 纺织 
的 屏障 后 画 ， 却 传 末 十 喝 私 天 ,项 芝 正牌 ,能动 了 你 多 清 的 心 注 ,于 星 ,你 心 库 鞭 未 一 首 胆 ,入 
半 很 关 } 关于 初 变 ， 关 于 大 自然 














图 5.35 文字 环绕 


【示例 2】 在 示例 1 中 ， 可 以 看 到 文字 紧 紧 环绕 在 图 片 周围 ， 如 果 希 望 图片 本 身 与 文字 有 一 定 的 
距离 ， 只 需要 给 img 元 素 添加 padding 和 margin 属性 即 可 ， 将 示例 1 中 的 img 元 素 做 如 下 修改 : 


img { | 
border 2px #009966 solid: /# 图 片 的 边框 所 | 
float: left: 刻 图 片 的 左 浮动 */ | 
width: 150px: /# 图 片 的 宽度 #/ | 
padding: 10px: | 
margin: 10px: 


在 浏览 器 中 预览 ， 则 显示 效果 如 图 5.36 所 示 。 可 以 看 到 图 片 的 边框 离 文 字 有 10px 的 距离 ， 这 是 
由 于 添加 了 margin:10px 语句 ,而 图 片 的 边框 离 图 片 也 有 10px 的 内 边 距 , 这 是 由 于 添加 了 padding:10px | 
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| 北湖 诗韵 
可 是 章 Pltr 厅 的 六艺? 和 是 下 外 的 。 区 符 写 ， 到 的 昌 士 ， 基 的 车 风 一 … - 和 着 、 污 让 拉 拉 


到 介 页 设计 与 网 站 于 设 愉 入 门 到 精通 


| 语句。 这样 设置 使 文字 与 图 片 的 距离 明显 变 远 ， 显 示 效果 更 佳 。 至 于 margin 和 padding 属性 的 详细 用 
| 法 ， 在 后 面 的 章节 中 会 陆续 提 到 。 








| 后， 是 作曲 全 W041 到: 逢 而 世界 ， 反 的 于 党， 有 科 基 所 委 你 ， 价 济 法 硬 曾 名 和 加 06， 这 





至 、 涡 区 。 什么 时 地 ,党 烧 的 二 济 现 了 。 你 半 认 的 而 这， 光 出 次 


全 活 8 MT 暴 ， 而 后 来 又 光志 了 。 你 不 吉 帮 证 怕 想 评 ， 你 不 织 绢 双 的 
pm 直 二 了 屋 入 一 度 于 么 讲 人 ， 爷 重 条 找 回 了 于 闻 ! 借 一 本 法 生 如 
云 8 夯 音 ， 天 与 莉 的 组 合 ， 风 与 清 的 碟 ， 共 名 厅 站 ， 太 多 。 运 

处 ， 一 群落 训 在 组 上 篇 戏 ， 丈 排 忆 了 社 叶 的 全; 博大 的 基色 和 义 


质量 上 5 秤 名 的 基 售 于 足 ， 你 人 六 斋 出 一 首 尘 ， 神 长 和 
长 ; 关于 宣 年 ,关于 搞 而 的 梦 4]…-” 同 罗 一 一 不 是 你 棕 太 于 久 的 ypE 午 之 ? 你 部 等 安 开 到 了 朴 
点 ， 才 昌吉 出 时 下 哲 作 的 ， 基 的 音 权 ， 基于 束 相 入 从 的 基 幅 ， 孝 作 信 点 红 的 等 林 草 ， 南 本 
拓展 子 ， 眉 黄山， 白山 一。 四 轩 沁 的 于 所 沈 至 竺 ， 鸡 急 灰 、 太 黄 ， 束 坷 ， 法 蔡 。 在 映 
日 科 实 藉 的 直方， 闻 的 评估 昨 信 立 荐 ,几率 将 ， 几 多 短信 。 必 和 上 给 加 的 屏 入 后 而 却 
坊 击 册 私 亚 ， 钙 苹 区 到， 奶 动 了 你 杀 情 80 花 ， 于 是 ， 你 心 区 时 未 一 百 大 ， 很 关 很 关 1 关于 和 
恋 , 关于 大 自考 ~ 

















图 5.36 文字 环绕 与 图 文 间距 


5.4 案例 实战 


| 图 片 属性 的 应 用 。 
| 5.4.1 设计 图 文 混 排 


本 实例 进一步 巩固 图 文 混 排 方 法 的 使 用 , 并 把 该 方法 运用 到 实际 的 网 站 制作 中 。 示例 介绍 中 国 的 
传统 节日 为 题材 ， 利 用 图 文 混 排 的 方法 ， 实 现 页 面 的 图 文 效果 。 整 个 网 页 设计 效果 如 图 5.37 所 示 。 


| 
| 
| 本 节 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 图 片 样式 ， 以 提高 实战 技法 和 技巧 ， 快 速 理解 CSS 
! 
| 
| 
| 
| 





| 图 5.37 图 文 混 排 
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【操作 步骤 】 | 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 | 
第 2 步 ， 构 建 网 页 的 整体 结构 。 第 一 个 <p> 标 签 的 内 容 是 网 页 的 首 段 ， 在 首 段 中 用 <span> 标 签 设 | 
置 了 首 字 下 沉 效果 。 然 后 是 各 个 分 标题 ， 每 个 分 标题 都 由 两 个 <p> 标 签 、 一 个 <img> 标 签 组 成 ， 分 别 | 
是 分 标题 中 的 标题 、 图 片 和 段落 内 容 。 有 具体 代码 如 下 : | 


<body> 
<p><span class="first"> 中 </span> 国 的 传统 节日 形式 多 样 ， 内 容 丰 富 ， 是 我 们 中 华 民族 悠久 的 历史 文化 的 一 | 
个 组 成 部 分 。.……- </p> | 
<p class="title1"> 春 节 </p> | 
<img src="images/chunjie.jpg" class="picl"> | 
<p class="content"> 春 节 是 我 国 一 个 古老 的 节日 ， 也 是 全 年 最 重要 的 一 个 节日 ， 如 何 庆贺 这 个 节日 ， 在 千 百 ， 
年 的 历史 发 展 中 ， 形 成 了 一 些 较 为 固定 的 风俗 习惯 ， 有 许多 还 相传 至 今 。….… </p> | 
<p class="title2"> 清 明 节 </p> ! 
<img src="images/qingming.jpe" class="pic2"> | 
<p class="content"> 清 明 是 我 国 的 二 十 四 节气 之 一 。 由 于 二 十 四 节气 比较 客观 地 反映 了 一 年 四 季 气 温 、 降 雨 、 | 
物候 等 方面 的 变化 ， 所 以 古代 劳动 人 民用 它 安排 农事 活动 。《 淮 南 子 ?天 文 训 》 云 :“ 春 分 后 十 五 日 ， 斗 指 乙 ， 则 | 
清明 风 至 。” .……: </p> | 
<p class="titlel"> 中 秋 节 </p> | 
<img src="images/zhongqiu.jpg" class="pic1"> | 
<p class="content"> 每 年 农历 八 月 十 五 日 , 是 传统 的 中 秋 佳 节 。 这 时 是 一 年 秋季 的 中 期 , 所 以 被 称 为 中 秋 。.….… | 
<p> | 
</body> | 
第 3 步 ， 规 划 整个 页 面 的 基本 显示 属性 : 为 网 页 选择 一 个 合适 的 背景 颜色 ， 设 置 <p> 标 签 的 字体 | 
大 小 ， 也 就 是 所 有 段落 的 字体 大 小 ， 并 设置 首 字 下 沉 效果 。 
<style type="text/css"> 
body { background-color: #d8c7b4: 让 页 面 背景 色 */ } 
Pp { font-size: 12px: 让 段落 文字 大 小 */ } 
span.first { # 首 字 放 大 所 
font-size: 60px: 
font-family: 黑体 ; 
float: left: 
font-weight: bold: 
color: #59340a: 族 首 字 颜 色 */ 


} 
</style> 


此 时 的 显示 效果 如 图 5.38 所 示 。 
第 4 步 ， 考 虑 到 整体 的 图 文 排版 ， 采 用 一 左 一 右 的 形式 ， 所 以 图 文 混 排 的 CSS 分 为 左右 两 段 ， 
分 别 定义 为 img.picl 和 img.pic2， 不 同 的 是 一 个 在 左边 一 个 在 右边 。 


img.picl { 





float: left: /# 左 侧 图 片 混 排 六 | 

margin-right: 10px: /# 图 片 右 端 与 文字 的 距离 #/ | 

margin-bottom: Spx: 片 图 片 底 端 与 文字 的 距离 *#/ | 
} | 
imgpic2 { 

float: right: 记 右 侧 图 片 混 排 */ i 
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/# 图 片 左 端 与 文字 的 距离 所 






图 5.38 首 字 下 沉 


5.39 图 片 处 于 左右 两 边 


第 5 步 ， 设 置 正文 的 文字 ,文字 本 身 不 需要 做 太 多 调整 ， 但 是 每 一 个 段落 的 标题 同样 是 分 为 左右 
两 侧 的 , 要 根据 图 片 的 位 置 做 出 变化 。 所 以 小 标题 也 和 图 片 一 样 进行 左右 两 个 CSS 设置 , 分 别 为 titlel 


和 title2。 
-titlel {/* 左 侧 标题 */ 
| text-decoration: underline: 翌 下 划 线 所 
| font-size: 18px: 
| font-weight: bold: 所 粗 体 */ 
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text-align: left: 请 天 对 齐 1 | 
color: #59340a: 让 标题 颜色 */ | 

} 

-title2 {/* 右 侧 标题 */ 
text-decoration: underline; 
font-size: 18px: 
font-weight: bold:; 
text-align: right: 
color: #59340a; 





a | 
line-height: 1.2em:; 让 正文 行 间距 */ | 
} | 
从 代码 中 可 以 看 出 , 两 段 标题 的 代码 不 同 就 在 于 文字 的 对 齐 方 式 ， 当 图 片 应 用 img.picl 而 位 于 左 | 
侧 时 ， 标 题 则 使 用 titlel， 也 相应 地 在 左 侧 。 当 图 片 应 用 img.pic2 而 位 于 右 侧 时 ， 标 题 则 使 用 title2， 
也 相应 地 在 右 侧 。p.content 设置 了 段落 正文 的 样式 。 
本 例 主要 是 通过 图 文 混 排 的 技巧 ,使 文字 和 图 片 一 左 一 右 应 用 两 种 不 同 的 对 齐 方 式 , 采用 两 组 不 
同 的 CSS 类 样式 标记 ， 合 理 地 将 图 片 和 文字 融 为 一 体 。 


5.4.2 设计 图 片 布局 


本 例 模仿 淘宝 网 上 的 图 片 布局 ,进一步 展示 了 图 片 与 文字 之 间 混 排 和 用 图 片 布局 的 方法 , 演示 效 
果 如 图 5.40 所 示 。 
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性 后 远视 衫 席 着 9 月 街头 

“明星 来 示范 早 科 秆 捞 有 新 招 

时尚 妇 生 2011 早 灾 的 所 避 撕 
秋风 起 基 莉 手 党 陶 和 业 旋 关 忆 
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5.40 ”设置 标题 样式 的 演示 效果 


【操作 步骤 】 

第 1 步 ， 启动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html.。 

第 2 步 ， 构 建 网 页 结构 。 在 本 例 中 ， 首 先 用 <div> 标 签 设置 container 容器 ， 在 此 页 面 中 ， 所 有 内 
容 分 为 4 个 部 分 ， 每 个 部 分 用 one 和 two 分 为 两 块 ，one 中 又 分 为 left 和 right 两 部 分 ， 分 别 定义 图 片 
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| Fw, 在 two 中 也 分 为 left 和 right 两 部 分 ， 分 别 定义 了 图 片 和 文字 列表 ， 如 图 5.41 所 示 。 


海滩 度假 造型 pti CE 
”9% 款 网 友 口 碑 起 梦 的 滋润 面霜 
“艺术 家 眼 妆 演 经 迪斯尼 经 典 - 
“6 大 恶习 让 你 白 不 回来 ! ig 
图 5.41 网 页 内 容 部 分 截图 
以 下 为 部 分 代码 ， 其 余 代码 请 浏览 本 节 案 例 示例 源 代码 。 
<div class="container"> 
<div class="one"> 
<div class="left"> <img src="images/001.jpg"/> </div> 
<div class="right"> </div> 
</div> 
<div class="two"> 
<div class="left"> <img src="images/002.jpg"/> </div> 
<div class="right"> 
<h3> 性 感 透视 衫 席卷 8 月 街头 </h3> 
<u> 
<li> 明 星 来 示范 早秋 穿 拱 有 新 招 </li> 
<li> 时 尚 女生 2011 早秋 的 色调 搭 </li> 
<li> 秋 风 起 最 潮 手 袋 购 入 必 读 美容 </li> 
<hl> 
</div> 
</div> 
</div> 


此 时 的 显示 效果 如 图 5.42 所 示 ， 可 以 看 到 ， 网 页 的 基本 结构 已 经 搭建 好 了 ， 但 是 由 于 没有 进行 








CSS 样式 设置 ， 界 面 并 不 美观 。 
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海滩 度假 造型 成 就 假期 摩登 女 归 


“5 缴 网 友 口 磋 超 贰 的 法 初 直 条 
。 艺 术 案 职 要 演绎 迪斯尼 经 此 
，6 太 恶习 让 你 白 不 区 来 ! 





5.42 ”构建 网 页 的 基本 结构 
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| 
第 3 步 ， 定 义 网 页 基本 属性 以 及 container 容器 的 宽度 和 左 侧 内 边 距 。 | 
! 





* { | 
} padding: Opx: | 食 斤 | 
| 
A 
padding-left: 30px: | 
} 


以 上 代码 中 ,*{margin:0px:padding:0px} 表 示 将 网 页 中 所 有 标签 的 padding 和 margin 都 设 定 为 Opx， 
* 可 以 理解 为 一 个 通配符 ， 指 的 是 所 有 标签 。 
第 4 步 ， 定 义 第 一 部 分 内 容 中 的 one 部 分 ， 这 一 部 分 为 one.left 和 one.right。 


.One .left { 
float: left /# 在 浮动 所 | 
width: 85px: 让 宽度 */ | 
height: 30px: 刻 高 度 */ | 
margin-top: 10px; 记 顶 部 补 白 */ | 
} | 
-one Tight { | 
float: right: | 
width: 345px: | 
border-bottom: #CCCCCC 1px dashed: 让 底 部 边框 */ | 
height: 35px; 
margin-bottom: 15px: 
} 


left 中 的 内 容 包 含 了 一 个 <img> 标 签 ，left 类 样式 定义 了 其 浮动 为 左 浮动 。.right 中 没有 实际 的 内 
容 ， 只 是 在 right 类 样式 中 定义 了 底部 边框 ， 此 时 显示 效果 如 图 5.43 所 示 。 
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图 5.43 one 部 分 的 CSS 设置 
第 5 步 ， 第 4 步 实现 了 one 部 分 的 设置 ， 接 下 来 进行 two.left 和 two.right 部 分 的 设置 。 


‘two Jeft { 
float: left: 


“rs 
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border: 许 F3300 1px solid; 。“/* 图 片 边框 */ 


two.left 与 one.left 一 样 ， 都 包含 了 一 个 <img> 标 签 ， 同 样 将 图 片 设置 为 左 浮动 。two.right 标签 中 
包含 了 一 个 <h3> 标 签 和 一 个 <ul> 标 签 ， 分 别 定义 了 标题 和 文字 列表 。 另 外 ， 在 left.img 中 定义 了 图 片 
样式 。 此 时 的 显示 效果 如 图 5.44 所 示 。 
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5.44 two 部 分 的 CSS 设置 


从 图 5.44 中 可 以 看 出 ， 页 面 的 基本 样子 已 经 建 好 ， 最 后 完成 标题 和 文字 部 分 的 样式 设置 。 
第 6 步 ， 定 义 <h3> 标 签 的 标题 样式 和 <ul> 标 签 的 列表 样式 。 








tf 


| 在 <h3> 标 签 中 定义 了 标题 的 字体 大 小 和 颜色 ， 并 设置 了 底部 补 白 。<ul> 标 签 定义 了 文字 列表 , 关 
| 于 对 <ul> 标 签 的 样式 定义 会 在 后 面 的 章节 中 详细 介绍 。 最 终 的 显示 效果 如 图 5.45 所 示 。 
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图 5.45 最终 效果 


5.4.3 设计 多 图 水 平 排列 


在 网 页 中 ， 经 常 能 见 到 多 张 图 片 排列 的 情况 ， 在 本 例 中 ， 将 介绍 对 于 多 图 排列 的 设置 ， 并 进一步 
了 解 CSS 设置 图 片 的 方法 。 本 例 的 演示 效果 如 图 5.46 所 示 。 


Ble eee mi Psc| FE 

















图 5.46 多 图 排列 效果 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html.。 
第 2 步 ， 构 建 网 页 的 基本 结构 。 本 例 中 首先 用 <div> 标 签 设置 container 容器 ， 然 后 分 别 用 <div> 
标签 将 页 面 分 为 4 块 ， 每 一 块 中 包含 一 个 <img> 标 签 、 一 个 <a> 标 签 和 一 个 <p> 标 签 。 
<div class="container"> 
<div class="one"><a href="#"><img src="images/1.jpg"> 
<p> 老 虎 </p> 
</a></div> 
<div class="one"><a hre="#"><img src="images/2.jpe"> 
<p> 大 熊猫 </p> 
</a></div> 
<div class="one"><a href="#"><img src="images/3.jpg"> 
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<p> 大 象 <p> 
</a></div> 
<div class="one"><a href="#"><img src="images/4.jpg"> 








5.47 网 页 基本 结构 ， 未 加 入 CSS 语句 
第 3 步 ， 定 义 网 页 基本 属性 及 container 容器 的 样式 。 


昌 
: 


} 

首先 在 body 中 定义 了 四 周 补 白 以 及 内 边 距 为 0。 在 container 中 定义 了 container 下 所 有 元 素 的 水 
平 对 齐 方式 为 居中 对 齐 ， 定 义 了 container 的 宽度 、 高 度 以 及 边框 样式 。background-image:url(bg.jpg) 
语句 的 作用 是 为 container 标签 添加 名 为 bgjpg 的 背景 图 片 ， 此 时 页 面 的 显示 效果 如 图 5.48 所 示 。 

第 4 步 ， 设 置 container 容器 下 的 <div> 标 签 ， 以 及 在 <div> 下 的 <p> 标 签 的 样式 。 


| container div { 
| float: left: 
| margin-top: 30pX: 
! margin-left: 35px: 


| 
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图 5.48 ”定义 网 页 基本 属性 

<div> 标 签 中 包含 一 个 <img> 标 签 、 一 个 <a> 标 签 和 一 个 <p> 标 签 ， 首 先 将 <div> 块 设置 为 左 浮动 ， 
并 设置 其 顶部 补 白 与 左 侧 补 白 。<p> 标 签 中 显示 的 是 标题 ， 设置 其 样式 为 字体 大 小 20px、 字体 为 黑体 。 
此 时 显示 效果 如 图 5.49 所 示 。 


ae 3 me/ ocahos mo 




















5.49 ”设置 container 容器 下 的 <div> 标 签 
第 5 步 ， 设置 <a> 标 签 样式 。 


af ! 
text-decoration: none: 不 显示 超 链接 的 下 划 线 */ | 
color: #204402: 让 字体 颜色 */ | 
} | 
ahover { | 
text-decoration: underline: 全 鼠标 悬 停 时 显示 下 划 线 所 | 
color red: 人 # 鼠 标 悬 停 时 字体 颜色 六 | 
} | 
a:hover img { border: 4px #0b35ce solid: /* 鼠 标 悬 停 时 图 片 的 边框 样式 六 | 
} 8 
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~ 提 页 设计 与 网 站 建设 以 入 门 到 将 通 
| <a> 标 签 的 样式 设置 了 下 划 线 ，a:hover 定义 了 当 鼠 标 悬 停 时 链接 的 样式 。a:hover img 定义 了 图 片 


| 
| 在 鼠标 悬 停 时 的 样式 。 关 于 <a> 标 签 的 CSS 样式 将 在 后 面 章节 详细 介绍 。 鼠 标 悬 停 时 的 效果 如 图 5.50 
| 所 示 。 

















图 5.50 ”鼠标 悬 停 时 的 效果 


5.4.4 设计 阴影 图 片 


| 在 网 页 中 插入 图 片 是 再 平常 不 过 的 事情 了 ， 有 时 为 了 美观 的 需要 ， 可 以 给 图 片 加 上 阴影 ， 让 图 片 
| 有 一 种 特殊 的 效果 ，CSS 可 以 为 图 片 加 上 阴影 吗 ? 答案 是 肯定 的 , 在 本 例 中 将 给 读者 介绍 为 图 片 加 阴 
| 影 的 方法 ， 演 示 效 果 如 图 5.51 所 示 。 








5.51 图 片 阴影 


【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 

第 2 步 ， 构 建 网 页 基本 结构 。 页 面 的 结构 很 简单 ， 只 有 两 个 <div> 标 签 ， 在 每 个 <div> 标 签 中 都 包 
含 了 一 个 <div> 标 签 和 一 个 <img> 标 签 ， 分 别 定义 了 一 左 一 右 两 幅 图 片 。 

<div class="pic"><div class="left"><img stc="images/2.jpg" border=0 alt="pic" /></div></div> 
| div class="pic"><div class="right"><img sre="images/1 jpg” border=0 alt="pic" /></div></div> 
| 此 时 的 页 面 极 其 简单 ， 只 有 两 张 图 片 ， 没 有 任何 样式 的 设置 ， 如 图 5.52 所 示 。 
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| 
图 5.52 构建 网 页 基本 结构 | 
| 


第 3 步 ， 定 义 图 片 的 阴影 。 其 实 给 图 片 加 阴影 的 原理 很 简单 ， 就 是 运用 两 个 <div> 块 的 相对 位 置 
偏 移 而 实现 ， 阴 影 的 宽度 和 颜色 深浅 由 用 户 决 定 ， 也 就 是 CSS 中 的 相对 定位 属性 position:relative;。 

Pic{ 

position: relative; 

background: #CCC: 

margin: 10px; 

margin-right: 50px: 

float: left: 


} 

.pic div { 
position: Telative: 
border: 1px solid #333; 
background: #FFF: 


Pe 


top: 6p /# 阴 影 在 右边 时 村 


号 


top: -6pX: 让 阴影 在 左边 时 */ 


给 外 层 的 <div> 定 义 一 个 类 样式 为 pic, 设置 其 position 属性 为 relative， 也 就 是 相对 定位 。 设置 它 
的 背景 色 为 #CCC， 设 置 四 周 补 白 10px， 并 使 两 图 之 间距 离 为 50px。 最 后 ， 定 义 其 为 左 浮动 。 

对 内 层 <div> 进 行 设置 ;首先 仍然 是 设置 其 position 属性 为 relative， 这 也 是 本 例 最 关键 的 一 步 ， | 
之 后 设置 内 层 div 的 背景 色 为 定 FF， 并 设置 边框 样式 和 内 边 距 padding。left 和 right 类 样式 分 别 定义 | 
了 左 侧 图 片 的 内 侧 <div> 的 偏 移 量 和 右 侧 图 片 的 内 侧 <div> 的 偏 移 量 ， 这 句 话 可 能 有 些 饶 舌 ， 请 读者 仔 
细 理 解 ， 也 就 是 说 我 们 必须 让 内 侧 的 <div> 进 行 位 移 ， 而 左 侧 图 片 的 位 移 方 向 与 右 侧 图 片 是 不 同 的 ， 
所 以 分 别 用 left 和 right 来 进行 设置 。 
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| 545 设计 圆 角 图 片 


页 面 中 圆 角 的 实现 一 直 是 个 很 难 解决 的 问题 ， 虽 然 现 在 有 很 多 种 实现 方法 ， 但 都 是 比较 麻烦 的 ， 
| 这 里 想 通 过 此 例 介绍 一 种 CSS 新 技术 ， 即 CSS 新 的 属性 border-radius 来 实现 图 片 的 圆 角 化 。 本 例 的 
演示 效果 如 图 5.53 所 示 。 
Wl 【操作 步 双 】 
| 第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 
| 第 2 步 ， 首 先 构建 网 页 结构 ， 网 页 结构 非常 简单 ， 就 是 在 网 页 添加 了 4 张 图 片 。 
| <img class="a" src="images/1.jpg"/> 
| <img class="a" sTc="images/2.jpg"/> 
| <img class="a" src="images/3.jpg" 人 > 
<img class="a" Src="images/4.jpg"/> 
第 3 步 ， 定 义 网 页 的 基本 属性 。 


| 在 以 上 的 代码 中 设置 了 网 页 四 周 的 补 白 为 20px， 用 padding 了 网 页 的 内 边 距 为 20px， 设 置 为 居 
| 中 。 显 示 效 果 如 图 5.54 所 示 。 





图 5.53 圆 角 图 片 5.54 设置 网 页 属性 

第 4 步 ， 运 用 border-radius 属性 设置 圆 角 图 片 。 
| af 
| width: 150px: 
| height: 150px: 
| border: 1px solid gray: 
| -moz-border-radius: 10px: /# 仅 Firefox 支持 ， 实 现 圆 角 效果 #/ 
| -webkit-border-radius: 10px: 上 # 仅 Safari，Chrome 支持 ， 实 现 圆 角 效果 */ 
| -khtml-border-radius: 10px: 诊 仅 Safari，Chrome 支持 ， 实 现 圆 角 效果 */ 
| border-radius: 10px: /*Firefox，Opera，Safari，Chrome 支持 ， 实 现 圆 角 效果 */ 
| } 
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在 以 上 代码 中 , 首先 定义 了 图 片 的 宽度 和 高 度 , 接着 设置 了 图 片 的 边框 样式 , 然后 用 border-radius 
定义 了 图 片 的 圆 角 。 


安 提示 : border-radius 属性 的 作用 分 别 如 下 。 | 

回 最 多 可 以 设置 4 个 值 ， 分别 是 矩形 4 个 圆 角 的 半径 ， 如 border-radius:10px， 表 示 4 个 角 都 为 | 

贺 角 ， 且 每 个 圆 角 的 半径 都 为 10px。 

加 也 可 以 设置 两 个 值 ， 如 border-radius:10px 5px， 第 1 个 值 代表 左上 圆 角 和 右 下 圆 角 ， 第 2 个 | 

值 代表 右上 国 角 和 左下 贺 角 。 | 

如 果 设 置 3 个 值 ， 如 border-radius:10px 5px lpx， 第 1 个 值 代表 左上 圆 角 ， 第 2 个 值 代表 右 | 

上 国 角 和 左下 加 角 ， 第 3 个 值 代表 右 下 国 角 。 | 

回 如果 设置 了 4 个 值 ， 如 border-radius:10px 9px 8px 7px, 4 个 值 分 别 代表 左上 圆 角 、 右 上 圆 角 、 | 
右 下 圆 角 和 左下 圆 角 。 

回 也 可 以 将 4 个 角 拆 分 成 4 个 单独 的 属性 来 设置 : 左上 圆 角 : border-top-left-radius、 右 上 圆 角 : 

border-top-right-radius, 右 下 圆 角 : border-bottom-right-radius, 左下 国 角 : border-bottom-left-radius。 


如 IE8 及 其 以 下 版 本 浏览 器 就 不 能 支持 这 种 技术 , 所 以 在 使 用 它 的 时 候 还 要 考虑 到 浏览 器 的 兼容 
问题 。 
5.4.6 ”设计 圆 角 栏目 


栏目 圆 角 化 是 网 上 常见 的 一 种 美化 网 页 的 方法 ， 本 例 运用 5.4.5 节 中 介绍 的 图 片 圆 角 化 方法 ， 通 过 
设置 一 个 名 为 《精品 文摘 》 的 网 页 ， 从 而 进一步 讲述 CSS 设置 图 片 的 方法 。 本 例 的 演示 效果 如 图 5.55 
所 示 。 








二 
7 让 
对 人 一生 中 全 元 








-人 


图 5.55 设置 圆 角 栏目 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 
第 2 步 , 构建 网 页 结构 。 本 例 首先 用 <div> 标 签 设置 container 容器 ,然后 分 别 用 <div> 标 签 将 页 面 
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<div class="container"> 


<div class= "header"> <img class="bgimg" src= "images/bgjpg"> </div> 


<div class= "main"> 
<div class="lanmubl"> 


<div class="headline"><img class="c" src="images/bgl1.gif"></div> 


<div class="contentl"> 


<h3> 散 文 随笔 <h3> 


<ul class="topic"> 
<1i>[ 生 活 感悟] 
<1i>[ 生 活 感悟] 
<li>[ 生 活 感悟 ] 
<1i>[ 生 活 感悟] 
<li>[ 生 活 感悟 ] 
<1i>[ 生 活 感悟 ] 

</ul> 


晴 ，- 一 -简单 生活 ， 感 受 美好 ， 期 待 明 天 </li> 
多 年 后 ， 我 们 或 许 会 嫁 给 这 样 的 他 </li> 

从 今 以 后 ， 试 着 做 个 这 样 的 人 </li> 

人 最 大 的 不 幸 ， 就 是 不 知道 自己 是 幸福 的 </li> 
人 生 至 境 是 不 争 恬静 出 尘 心 自 宁 </li> 
没有 如 意 的 生活 ， 只 有 看 开 的 人 生 </li> 


<p class="more"><a href="#"> 更 多 内 容 </a></p> 


</div> 


在 整体 的 container 框架 下 ， 页 面 分 为 header 和 main 两 部 分 。 在 header 下 ， 定 义 了 <img> 标 签 ， 
用 于 设置 banner 图 片 。 在 main 下 ， 又 分 为 4 部 分 ， 分 别 定义 了 4 个 栏目 。 在 lanmnu 标签 中 定义 了 每 
个 栏目 的 具体 内 容 。 每 个 栏目 的 显示 效果 截图 如 图 5.56 所 示 。 


1 博 ， 一 尘 单 生活， 司 妥 关 好 ， 期 和 明天 


里 活 万 二 | 人 生 至 境 量 不 争 情 乔 出 上 心 后 宁 
“ 疆 活 世 全 | 没有 如 意 的 生活 ， 只 有 看 开 的 人 生 








图 5.56 栏目 截图 


如 图 5.56 如 示 , 每 一 个 栏目 是 一 个 <div> 块 , 在 此 块 下 又 分 为 两 部 分 , 分 别 是 headline 和 content， 


也 就 是 圆 角 图 片 和 栏目 的 文字 信息 。 
第 3 步 ， 定 义 网 页 基本 属性 。 


* {/* 定 义 页 面 中 所 有 标签 的 统一 样式 */ 


margin: 0: 
padding: 0: 
font-size: 12px: 
text-align: center: 


: 
body { background: #d3d3d3: 
.Container { 


/# 页 面 背 景色 扩 } 
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width: 844pX: | 
margin: 0 auto: 片 居中 显示 */ | 
} | 


border 2px #ffF solid: As 给 header 部 分 图 片 定义 2px 宽 的 边框 所 | 


width: 422px: 
height33px: 
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} 


在 以 上 代码 中 ，* 外 表示 将 页 面 中 所 有 的 标签 都 设置 为 此 样式 。body 标签 定义 了 背景 色 。 在 
container 中 定义 了 container 容器 的 宽度 为 844px， 另 外 在 container 中 定义 了 margin:0px auto， 目 的 是 | 
使 container 容器 水 平 居中 。bgimg {border:2px #HEF solid} 设 置 了 header 部 分 图 片 的 边框 ， 在 这 里 可 以 | 
很 容易 地 理解 为 什么 把 container 容器 的 宽度 设置 为 844px 了 , 因为 header 部 分 的 图 片 宽 是 840px, 而 
其 边框 宽 为 2px， 所 以 border-left+border-right=4px， 所 以 相 加 为 844px。 此 时 的 显示 效果 如 图 5.57 
所 示 。 





5.57 设置 网 页 的 基本 属性 


第 4 步 ， 以 上 的 效果 离 我 们 想 要 的 网 页 似乎 距离 很 远 ， 请 读者 不 要 着 急 ， 网 页 结构 搭建 好 以 后 ， 
可 以 逐步 设置 每 个 部 分 的 样式 ， 以 实现 最 终 的 效果 ， 接 下 来 设置 栏目 的 样式 。 


.lanmu { 
width: 412px: 
float: left: 
-moz-border-radius: 10px: /# 仅 Firefox 支持 ， 实 现 圆 角 效 果 */ 
-webkit-border-radius: 10px: /# 仅 Safari，Chrome 支持 ， 实 现 圆 角 效果 */ 
-khtml-border-radius: 10px: 上 # 仅 Safari，Chrome 支持 ， 实 现 圆 角 效 果 */ 
border-radius: 12px: /*Firefox，Opera，Safari，Chrome 支持 ， 实 现 圆 角 效果 */ 
overflow:hidden: 


“rs 


一 一 于 绝 浴 入 站 到 持 遂 





.bl {border:solid 1px #C2188D:} 
.b2 {border:solid 1px #DF290F:;} 
2 .b3 {border:solid 1px #7C63C:} 
全 站 .b4 {border:solid 1px #3E71AS:;} 
| 在 上 方 代码 中 ， 首 先 定义 了 lanmu 容器 的 样式 ， 设 置 了 容器 的 宽度 为 412px， 也 就 是 container 
Note | 宽度 的 一 半 。 同 时 定义 圆 角 显示 ， 考 虑 到 外 包含 框 被 定义 圆 角 ， 其 内 部 内 容 可 能 会 覆盖 圆 角 效果 ， 使 
| 用 overflow:hidden; 可 以 把 超出 的 区 域 隐藏 起 来 ， 以 便 显示 圆 角 。 设 置 margin:4px;， 调 整 每 个 栏目 之 
间 的 距离 ， 定 义 4 个 边框 样式 类 ， 分 别 为 不 同 栏目 定义 不 同 颜色 的 边框 ， 显 示 结 果 如 网 5.58 所 示 。 




















图 5.58 设置 header 部 分 样式 
| 


| 从 图 5.58 可 以 看 出 ， 由 于 在 lanmu 样式 中 设置 了 float:left， 使 得 各 个 栏目 可 以 水 平 显 示 ， 又 由 于 
| container 宽度 为 844px, 而 lanmu 宽度 为 412px, 所 以 宽度 决定 了 每 行 只 可 以 显示 两 个 栏目 , 关于 float 
| 的 知识 在 后 面 内 容 还 会 有 所 涉及 。 

| 第 5 步 , 设置 contentl 和 content2 容器 的 样式 。 此 容器 中 包含 了 <h3> 标 签 和 <ul> 标 签 ， 分 别 是 标 
| 题 和 栏目 内 容 。 


在 以 上 代码 中 ， 分 别 设置 了 contentl 和 content2 标签 的 样式 ， 这 里 为 什么 还 要 分 为 contentl 和 
content2 呢 ? 由 于 本 例 中 的 栏目 分 为 左右 两 边 ， 为 了 让 左右 两 边 的 栏目 有 一 个 2px 宽 的 间隙 ， 在 这 里 
设置 了 左边 栏目 也 就 是 contentl 的 右 侧 补 白 为 2px。 而 右边 栏目 也 就 是 content2 并 没有 如 此 设置 。 显 
示 效 果 如 图 5.59 所 示 。 
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图 5.59 设置 contentl 和 content2 容器 
第 6 步 ， 定 义 栏目 中 的 标题 样式 。 





在 以 上 代码 中 ，padding:20px 30px 定义 了 上 、 下 内 边 距 为 20px， 左 、 右 内 边 距 为 30px。 定 义 了 
对 齐 方式 为 左 对 齐 。 完 成 此 步骤 后 ， 显 示 效 果 如 图 5.60 所 示 。 





图 5.60 设置 栏目 标题 
第 7 步 , 设置 栏目 中 的 文本 样式 , 其 中 包括 一 个 <ul> 标 签 的 样式 、 一 个 <li> 标 签 的 样式 和 一 个 <p> | 

标签 的 样式 ， 代 码 如 下 : 
ul {padding-left: 40px: } 
lf{ 
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| 在 上 方 代码 中 ， 首 先 定义 了 列表 <ul> 的 样式 padding-left:40px， 即 左 侧 内 边 距 为 40px。<l> 标 签 
| 中 定义 了 list-style:disc 样式 ， 也 就 是 列表 前 的 项 目 符号 为 实 4 在 more 类 样式 中 ， 定 义 了 栏目 右 
| 下 角 的 “更 多 内 容 ” 文 字 的 样式 ， 最 终 显示 结果 如 图 5.61 所 示 。 
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第 外 章 


操作 表格 
( 名: 视频 讲解 : 62 分 钟 ) 


将 一 定 的 内 容 按 将 定 的 行 、 列 规则 进行 排列 就 构成 了 表格 ， 表 格 可 以 将 各 种 数据 ( 包括 文 
本 、 预 格式 化 文本 、 图 像 、 链 接 、 表 单 、Flash 动画 以 及 其 他 表格 等 网 页 元 素 ) 排 成 行 和 列 ， 从 
而 获得 将 定 的 表格 效果 。 无 论 在 日 党 生活、 工作 中 ， 还 是 在 网 页 设计 中 ， 表 格 都 可 以 使 信息 排 
列 得 有 秩序 、 更 容易 理解 。Dreamweaver 具有 强大 的 表格 功能 ， 可 以 很 方便 地 创建 出 各 种 规格 
不 同样 式 的 表格 ， 并 能 对 表格 进行 特定 的 修饰 ， 从 而 使 网 页 更 加 生动 活 小。 


【 学 习 重 点 】 

WI 插入 表格 

WI 设置 表格 属性 

MI 设置 单元 格 的 属性 

HM 使 用 CSS 定义 表格 样式 
MH 在 实战 中 用 表格 设计 页 面 


砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 
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6.1 表格 基本 操作 


浏览 下 联网 上 绝 大 部 分 网 页 ， 痢 会 发 现 表 格 控制 页 面 的 影子 。 表 格 能 使 各 种 元 素 在 页 面 中 布局 得 
于 时 3 统一、 并 外 有 序 .Dreamweaver 为 网 页 设计 提供 了 强大 的 表格 功能 。 在 Dreamweaver 中 可 以 很 轻 
| 松 地 插入 表格 、 设 置 表格 属性 ， 以 及 改变 表格 的 结构 和 大 小 等 


6.1.1 插入 表格 


在 网 页 中 插入 表格 的 方法 非常 简单 。 例 如 ， 插 入 一 个 3 行 3 列 的 表格 ， 可 以 按照 下 列 步 又 进行 操作 。 
【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 HTML 文档 ， 保 存 为 testhtml。 

第 2 步 ， 将 光标 置 于 文档 中 要 插入 表格 的 位 置 。 

第 3 步 ， 选 择 【 插 入 】|【 表 格 】 命 令 ， 打 开 【 表 格 】 对 话 框 ， 如 图 6.1 所 示 。 

第 4 步 ， 在 【表格 】 对 话 框 中 设置 主要 属性 。 

行 数 ， 在 该 文本 框 中 输入 表格 的 行 数 为 3。 

回 ” 列 : 在 该 文本 框 中 输入 表格 的 列 数 为 3。 

| 表格 宽度 : 在 该 文本 框 中 设置 表格 的 宽度 值 为 200， 单 位 为 像素 ， 也 可 以 用 百分比 来 设置 。 
| 第 5 步 ， 其 他 选项 暂时 保留 默认 值 。 输 入 完毕 后 ， 单 击 【 确 定 】 按 钮 ， 关 闭 对 话 框 ， 这 时 页 面 中 
| 将 显示 插入 的 表格 ， 如 图 6.2 所 示 。 
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图 6.1 【表格 】 对 话 框 图 6.2 在 页 面 中 插入 表格 


| 容 提示 : 在 【表格 】 对 话 框 中 ， 还 涉及 其 他 的 参数 设置 。 
| 回 边框 粗细 : 该 文本 框 用 于 设置 表格 的 边框 宽度 ， 以 像素 为 单位 。 如 果 表 格 边框 设置 为 0， 则 
| 不 显示 表格 边框 。 
回 单元 格 边 距 : 该 文本 框 用 于 设置 单元 格 中 的 内 容 和 边框 之 间 的 距离 ， 以 像素 为 单位 。 它 的 默 
| 认 值 为 1。 
| ”加 单元 格 间距 : 该 文本 框 用 于 设置 各 单元 格 之 间 的 距离 ， 以 像素 为 单位 。 它 的 默认 值 为 2。 
| “在 【标题 】 选 项 组 中 可 以 为 表格 设置 拥有 标题 的 行 或 列 。 
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无 : 不 使 用 行 或 列 标题 。 | 
左 : 将 表格 的 第 1 列 作为 标题 列 ， 以 便 为 表格 中 的 每 一 行 输入 一 个 标题 。 | 
顶部 : 将 表格 的 第 1 行 作为 标题 列 ， 以 便 为 表格 中 的 每 一 列 输入 一 个 标题 。 
两 者 : 可 以 在 表格 中 输入 行 标题 和 列 标题 。 | 全 内 
【辅助 功能 】 选 项 组 中 可 以 设置 表格 辅助 功能 。 | 
标题 :提供 了 一 个 显示 在 表格 外 的 表格 标题 
摘要 : 可 以 输入 表格 的 说 明文 本 。 屏幕 阅读 器 可 以 读 取 摘要 文本 ， 但 是 该 文本 不 会 显示 在 用 
户 的 浏览 器 中 。 

第 6 步 ， 插 入 表格 以 后 ， 如 果 在 单元 格 中 再 插入 一 个 表格 ， 这 时 插入 的 表格 即 为 嵌 套 表格 。 插 入 
嵌 套 表格 的 方法 与 插入 表格 的 方法 基本 一 致 ,只 要 将 插入 点 置 于 要 翌 套 的 单元 格 中 , 然后 按照 插入 表 
格 的 方法 插入 嵌 套 表格 即 可 ， 如 图 6.3 所 示 。 


6.1.2 编辑 表格 


插入 表格 以 后 , 如 果 该 表格 不 符合 要 求 , 可 以 改变 表格 的 结构 和 大 小 。 例如, 合并 和 拆 分 单元 格 、 
插入 行 或 列 ， 以 及 删除 行 或 列 。 

1. 改变 表格 的 大 小 

在 页 面 中 插入 表格 以 后 ， 可 以 通过 拖 动 表格 框 线 来 改变 表格 的 大 小 。 

【操作 步骤 】 

第 1 步 ， 选 中 整个 表格 。 | 

第 2 步 ， 将 鼠标 指针 置 于 边框 的 控制 点 上 ， 当 鼠标 指针 变 为 双向 箭头 形状 时 ， 单 击 并 拖 动 鼠 标 ， | 
即 可 改变 表格 的 大 小 ， 如 图 6.4 所 示 。 | 
| 
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图 6.3” 嵌 套 表格 图 6.4” 拖 动 改变 表格 大 小 


沪 提示 : 要 选 定 整个 表格 ， 可 采用 以 下 几 种 方法 之 一 。 | 
回 将 筷 标 指针 置 于 表格 的 边框 或 者 4 个 顶 角 上 ， 当 鼠标 指针 变 为 让 形状 时 ， 单 击 选中 表格 ， 这 | 
时 表格 的 外 边框 显示 3 个 黑色 控制 点 。 
回 将 饼 标 指针 置 于 表格 中 ， 选 择 【 修 改 】|【 表 格 】| 【选择 表格 】 命令。 
回 将 饼 标 指针 置 于 表格 中 ， 在 状态 栏 左下 角 的 标签 选择 器 内 会 显示 <table> 标 记 ， 单 击 该 标记 ， 
即 可 选中 整个 表格 。 
2 增加 行 或 者 列 
要 为 插入 的 表格 增加 行 或 者 列 , 首先 要 将 插入 点 置 于 要 插入 行 或 列 的 单元 格 中 ,然后 任 选 以 下 几 
种 方法 之 一 : 
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回 ”选择 【修改 】 | 表格 】|【 插 入 行 】 命 令 ， 插 入 一 行 ， 选 择 【 修 改 】|【 表 格 】|【 插 入 列 】 命 
令 ， 插 入 一 列 。 

回 “ 右 击 表格 ， 在 打开 的 快捷 菜单 中 选择 【表格 】|【 插 入 行 】 命 令 ， 插 入 一 行 ， 选择 【表格 】| 
【插入 列 】 命 令 ， 插 入 一 列 。 

回 ”直接 按 Cul+M 快捷 键 ， 插 入 一 行 ， 按 ShiftrCtrl+A 组 合 键 ， 插 入 一 列 。 

要 插入 多 行 或 者 多 列 ， 可 采用 下 面 的 步骤 。 

【操作 步骤 】 

第 1 步 ， 选择 【修改 】| 【表格 】|【 插 入 行 或 列 】 命令, 或 者 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【 表 


格 】|【 插 入 行 或 列 】 命 令 ， 打 开 【 插 入 行 或 列 】 对 话 框 ， 如 图 6.5 所 示 。 


第 2 步 ， 在 图 6.5 所 示 的 对 话 框 中 ， 输 入 相应 的 参数 值 。 

回 ”插入 : 在 该 选项 组 中 选中 【 行 】 单 选 按钮 ， 插 入 行 。 

回 “ 行 数 : 在 该 微调 框 中 设置 要 插入 的 行 数 。 

回 位置; 选择 插入 的 位 置 ， 选 中 【所 选 之 上 】 单 选 按钮 ， 表 示 在 当前 行 之 前 插入 。 

回 。” 如 果 选 中 【所 选 之 下 】 单 选 按钮 ， 则 在 当前 行 之 后 插入 。 

第 3 步 ， 单 击 【确定 】 按 钮 ， 关 闭 对 话 框 。 如 图 6.4 所 示 的 3 行 3 列 的 表格 将 变 为 5 行 3 列 的 表 
， 如 图 6.6 所 示 。 
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有 有 数 m: 世 | 
位 装 : 吕 所 生 之 上 
人 lps i 
6.5 【插入 行 或 列 】 对 话 框 6.6 在 表格 中 插入 2 行 
3， 删 除 行 或 者 列 
删除 行 的 步骤 如 下 。 
【操作 步骤 】 


第 1 步 ， 选 中 要 删除 的 行 。 
第 2 步 ， 选 择 【修改 】 代 表格 】 代 删除 行 】 命 令 ， 或 者 右 击 该 行 ， 在 弹出 的 快捷 菜单 中 选择 【 表 


| 格 】| 【删除 行 】 命 令 。 
| 党 提示 : 选中 行 的 方法 有 以 下 几 种 . 


回 将 鼠标 指针 置 于 行 首 ， 当 鼠标 指针 变 为 向 右 的 箭头 PI 时 ， 拖 动 到 要 选中 的 最 后 一 行 ， 可 以 选 
中 多 和 有 

回 将 鼠标 指针 置 于 单元 格 中 ， 在 状态 栏 中 左下 角 标签 选择 器 中 会 显示 <tr> 标 记 ， 单 击 该 标记 ， 
可 选中 鼠标 指针 所 在 的 一 行 。 


删除 列 的 步骤 如 下 。 

【操作 步骤 】 

第 1 步 ， 选 定 要 删除 的 列 。 

第 2 步 ， 选 择 【 修 改 】| 【表格 】| 【删除 列 】 命令, 或 者 右 击 该 列 ， 在 弹出 的 快捷 菜单 中 选择 【 表 


」 格 】| 【删除 列 】 命令 。 
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窑 提示 : 选中 列 的 方法 是 ， 将 鼠标 指针 置 于 列 首 ， 当 变 为 向 下 的 箭头 二 时 ， 单 击 可 选中 一 列 ， 这 
时 拖 动 鼠标 可 以 选中 多 列 。 


在 表格 底部 添加 行 ， 或 者 在 表格 最 右边 添加 列 的 操作 步骤 如 下 。 

【操作 步骤 】 

第 1 步 ， 选 中 表格 以 后 ， 选 择 【 窗 口 】|【 属 性 】 命 令 ， 打 开 【 属 性 】 面 板 。 

第 2 步 ， 如 图 6.7 所 示 ， 在 【属性 】 面 板 的 【 行 】 文 本 杠 或 者 Cols 文本 框 中 输入 要 添加 后 的 行 数 | 
或 者 列 数 。 例 如 ， 在 图 6.6 所 示 的 5 行 3 列 的 表格 底部 和 右边 分 别 添加 1 行 和 2 列 ， 使 图 6.6 所 示 的 | 
表格 变 为 6 行 5 列 。 | 


| 
i i | 
| 
| 





| 揭 | 折 小 [| 天 开间 蜀 。 人 是 元 于 村 二 
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图 6.7 在 表格 底部 和 右边 添加 多 行 和 多 列 

4. 合并 单元 格 

合并 列 或 者 行 中 相 邻 的 单元 格 的 步骤 如 下 。 

【操作 步骤 】 

第 1 步 ， 将 鼠标 指针 置 于 第 1 个 单元 格 中 。 | 

第 2 步 ， 选 择 【 修 改 】| 【表格 】| 【增加 行 宽 】 命 令 ， 合 并 一 列 中 相 邻 的 两 个 单元 格 ， 或 者 选择 | 
【修改 】| 【表格 】|【 增 加 列 宽 】 命令 ,合并 一 行 中 相 邻 的 两 个 单元 格 。 | 
| 


从 提示 : 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】|【 增 加 行 宽 了】 命令， 合并 一 列 中 相 邻 的 两 个 单 
元 格 ， 或 者 在 快捷 菜单 中 选择 【表格 〗| 【增加 列 宽 】 命 令 ， 合并 一 行 中 相 邻 的 两 个 单 
元 格 。 
合并 多 个 单元 格 的 具体 步骤 如 下 。 
【操作 步骤 】 
第 1 步 ， 将 鼠标 指针 置 于 第 1 个 单元 格 中 , 单 击 并 拖 动 鼠 标 至 要 合并 的 最 后 一 个 单元 格 ,选中 多 
个 单元 格 ， 如 图 6.8 所 示 。 
第 2 步 ， 选 择 【 修 改 】|【 表 格 】|【 合 并 单元 格 】 命 令 ， 则 合并 单元 格 ， 效 果 如 图 6.9 所 示 。 


容 提示 : 合并 单元 格 ， 还 可 以 采用 以 下 几 种 方法 。 
选中 要 合并 的 单元 格 后 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【表格 】〗| 【合并 单元 格 】 命 令 。 
回 打开 【属性 】 面板 ， 单 击 【合并 单元 格 】 按 钮 口 。 
回 按 Ctrl+AltHM 组 合 键 。 
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5S、 折 分 单元 格 
拆 分 单元 格 的 步骤 如 下 
| 【操作 步 又 】 
全 ”第 1 步 ,将 光标 置 于 要 拆 分 的 单元 格 中 。 
| 第 》 步 ， 选 择 [修改 】| 【表格 】| 【 拆 分 单元 格 】 命令， 或 者 右 击 先 中 的 多 个 单元 格 ， 在 弹出 的 
1【 折 分 单元 格 】 命令 或 者 打开 【属性 ] 面 权 ， 音 击 【 拆 分 单元 格 ] 按 包 才 ， 
| 或 者 按 Chl+AIttS 组 合 键 ， 打 开 【 抓 分 单元 格 】 对 话 框 ， 如 图 6.10 所 示 。 
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图 6.8 选中 多 个 单元 格 图 6.9 合并 多 个 单元 格 图 6.10 【 拆 分 单元 格 】 对 话 框 


第 3 步 ， 在 【 拆 分 单元 格 】 对 话 框 中 进行 相应 的 设置 。 

把 单元 格 拆 分 ， 在 该 选项 组 中 选中 【 行 】 单 选 按钮 ， 表 示 将 单元 格 拆 分 为 多 行 ， 选 中 【 列 】 
单 选 按 钮 ， 表 示 将 单元 格 拆 分 为 多 列 。 

行 数 : 在 该 文本 框 中 输入 要 拆 分 的 行 数 或 列 数 ， 或 者 单 击 右边 的 微调 按钮 设置 行 数 或 列 数 。 

第 4 步 ， 设 置 完毕 ， 单 击 【 确 定 】 按 钮 即 可 。 


6.2 设置 表格 属性 


| 在 Dreamweaver 中 设置 表格 的 属性 ， 可 以 通过 【属性 】 面板 完 成 。 设 置 表格 属性 的 具体 操作 步 又 
| 如 下 。 

| 【操作 步骤 】 

| 第 1 步 ， 启 动 Dreamweaver， 新 建 HTML 文档 ， 保 存 为 testhtml。 

第 2 步 ， 在 页 面 中 插入 一 个 3 行 3 列 的 表格 ， 选 中 整个 表格 。 

第 3 步 ， 选 择 【 窗 口 】|【 属 性 】 命 令 ， 打 开 【 属 性 】 面 板 ， 如 图 6.11 所 示 。 















































| 图 6.11 表格 【属性 】 面 板 
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| 
如 果 没 有 看 到 整个 表格 【属性 】 面板, 可 以 单 击 【属性 】 面板 右 下 角 的 扩大 第 头 图 标 > ,展开 【 属 | 
性 】 面 板 ， 显 示 表 格 的 所 有 属性 。 | 

第 4 步 ， 在 【属性 】 面 板 中 设置 表格 的 属性 。 | 

加 ”表格 14: 在 该 文本 框 中 输入 表格 的 名 称 ， 如 table 1， 一 般 在 脚本 控制 中 便于 引用 该 表格 。 | 全 

回 ” 行 ; 在 该 文本 框 中 设置 表格 的 行 数 ， 利 用 该 文本 框 可 以 重新 设置 已 插入 表格 的 行 数 ， 从 最 | 全 一 
底部 行 开始 可 以 增加 或 减少 行 数 ， 减 少 行 数 时 ， 会 一 并 删除 行 中 的 数据 。 

回 ”Cols ( 列 ) : 在 该 文本 框 中 设置 表格 的 列 数 , 利用 该 文本 框 可 以 重新 设置 已 插入 表格 的 列 数 ， 
从 最 右 侧 列 开始 可 以 增加 或 减少 列 数 ， 减 少 列 数 时 ， 会 一 并 删除 列 中 的 数据 。 

回 ” 宽 : 在 该 文本 框 中 设置 表格 的 宽度 ， 以 像素 或 百分比 作为 单位 ， 如 输入 “600”， 然 后 在 后 
面 的 列表 框 中 选择 单位 。 如 果 要 设置 百分比 时 , 要 在 后 面 的 下 拉 菜 单 中 选择 百分比 符号 “%” 
选项 。 也 可 以 直接 在 第 1 个 文本 框 中 输入 数值 和 百分比 符号 ， 系 统 会 自动 把 第 2 个 列表 框 | 
设置 为 %， 但 对 于 以 像素 为 单位 时 ， 就 不 能 在 第 1 个 文本 框 中 同时 输入 。 

回 ”CellPad (填充) : 在 该 文本 框 中 设置 单元 格 内 容 与 单元 格 边 距 之 间 的 距离 ， 默 认 单位 为 像 
素 ， 一 般 可 以 不 考虑 单位 ， 如 输入 数值 10。 填 充 的 初始 化 默认 值 为 1， 如 果 插 入 过 表格 ， 
该 默认 值 会 保存 最 新 设置 。 

回 ”CellSpace (间距 ) : 在 该 文本 框 中 设置 单元 格 之 间 的 距离 ， 单 位 默认 为 像素 ， 一 般 可 以 不 | 
考虑 单位 ， 如 输入 数值 20。 间 距 的 初始 化 默认 值 为 2， 如 果 插入 过 表格 ， 该 默认 值 会 保存 | 
最 新 设置 。 

回 Align〈 对 齐 ) : 在 该 下 拉 列表 框 中 选择 表格 在 容器 中 的 对 齐 方式 ， 包 括 “ 默 认 ”、“ 左 对 
齐 ”、“ 右 对 齐 ” 和 “居中 对 齐 ”。 所 谓 容器 就 是 装载 表格 的 元 素 对 象 ， 如 果 在 网 页 中 直 
接 插入 表格 ， 则 容器 为 浏览 器 窗口 ; 如 果 是 嵌 套 表格 ， 则 容器 为 单元 格 ; 如 果 在 层 中 插入 
表格 ， 则 容器 为 层 。 如 在 页 面 中 直接 插入 表格 ， 并 设置 居中 显示 。 

回 ”Border (边框 ) : 在 该 文本 框 中 设置 表格 边框 的 厚度 ， 单 位 默认 为 像素 ， 一 般 可 以 不 考虑 单位 ， 
如 输入 数值 10。 边 框 的 初始 化 默认 值 为 1， 如 果 插 入 过 表格 ， 该 默认 值 会 保存 最 新 设置 。 如 果 
输入 0， 表 示 不 显示 表格 边框 ， 同 时 也 会 自动 隐藏 单元 格 之 间 的 分 割 线 ， 在 浏览 器 中 不 显示 | 
表格 边框 ， 在 编辑 窗口 中 以 虚线 显示 。 

回 ” 边框 颜色 : 单 击 颜色 框 ， 可 以 设置 边框 线 的 颜色 ， 如 输入 “十 F0000”， 设 置 表格 边 框 为 红色 。 

关于 填充 、 间 距 、 边 框 等 概念 示意 图 如 图 6.12 所 示 。 设 置 表格 属性 以 后 ， 该 表格 显示 效果 如 图 6.13 

所 示 。 






























































图 6.12 表格 相关 概念 示意 图 
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图 6.13 利用 【属性 】 面 板 修改 的 表格 效果 


在 【属性 】 面 板 中 还 涉及 其 他 属性 和 功能 设置 ， 分 别 介绍 如 下 。 
总 和 到 按钮 : 清除 表格 中 行 的 高 度 值 和 列 的 宽度 值 ， 如 图 6.14 所 示 。 
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图 6.14 清除 表格 的 行 高 和 列 高 
名 和 瑟 按 钮 : 将 表格 的 宽度 和 高 度 由 百分比 单位 的 形式 转换 为 像素 的 形式 。 变 换 单位 后 ， 输 
入 的 数值 也 随 之 变化 。 
< 注意 : 这 个 转化 是 以 当前 编辑 窗口 的 大 小 为 参考 进行 的 ， 例 如 ， 编 辑 窗口 宽 为 300 像素 ， 表 格 宽 
度 为 100%， 如 图 6.15 (a) 所 示 ， 然 后 将 表格 宽度 转换 为 像素 ， 则 表格 宽度 为 286 像素 ， 
如 图 6.15 (b ) 所 示 ， 如 果 把 编辑 窗口 抑 长 为 400 像素 ， 则 表格 效果 如 图 6.15 (ec) 所 示 。 
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Soar CunLe His Re aris Bais 
(a) 百分比 宽度 (b) 转换 为 像素 (c) 像素 宽度 


图 6.15 表格 宽度 的 单位 转换 
| 名和 型 按 钮 : 将 表格 的 宽度 和 高 度 由 像素 的 形式 转换 为 以 百分比 为 单位 的 形式 。 
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6.3 设置 单元 格 属性 


设置 好 表格 的 整体 属性 后 ， 还 可 以 根据 不 同 的 要 求 ， 设 置 相应 单元 格 的 属性 。 设 置 单 元 格 属性 的 ， 
操作 步骤 如 下 。 

【操作 步骤 】 | 

第 1 步 ， 选 中 要 设置 属性 的 单元 格 。 例 如 ， 选 中 表格 的 第 1 行 ， 并 按 Ctrl+F3 快捷 键 ， 打 开 【 属 | 
性 】 面 板 ， 如 图 6.16 所 示 。 
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图 6.16 选中 并 设置 单元 格 
容 提示 : 把 光标 置 于 单元 格 内 ， 也 可 以 设置 该 单元 格 属性 ， 如 图 6.17 所 示 。 这 种 方法 比较 方便 快 
捷 ， 也 是 最 常用 的 设置 单元 格 方法 。 
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图 6.17 不 选中 并 设置 单元 格 
让、 技巧: 任 选 以 下 方法 都 可 以 选中 单元 格 。 
回 单 击 表格 单元 格 ， 并 拖 动 鼠标 选中 多 个 单元 格 。 
回 按 住 Ctrl 键 ， 并 单 击 要 选中 的 单元 格 ， 可 以 选中 多 个 不 相连 的 单元 格 。 
回 单 击 要 选中 的 矩形 区 域 的 第 1 个 单元 格 ， 按 住 Shift 键 ， 并 单 击 该 区 域 的 最 后 一 个 单元 格 ， 
可 以 选中 连续 的 多 个 单元 格 。 
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第 2 步 ， 在 【属性 】 面 板 中 进行 如 下 设置 。 


【合并 单元 格 】 按 钮 加 : 可 以 把 多 个 单元 格 合并 为 一 个 单元 格 ， 如 图 6.18 所 示 。 
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图 6.18 细 线 表格 效果 


<4 注意 ; 选中 的 单元 格 必须 是 连续 的 矩形 区 域内 ， 如 图 6.19 所 示 的 被 选中 多 个 单元 格 是 不 能 够 被 


合并 的 。 
































己 三 己 世 三 三 


不 连续 非 矩形 连续 非 矩形 和 矩形 非 连续 
图 6.19 不 能 合并 的 选中 多 个 单元 格 区 域 形状 


【 拆 分 单元 格 】 按 钮 共 : 可 以 把 选中 的 单元 格 拆 分 为 多 个 单元 格 。 单 击 该 按钮 时 , 会 打开 【 拆 
分 单元 格 】 对 话 框 ， 如 图 6.20 所 示 。 在 该 对 话 框 中 设置 要 拆 分 为 行 或 列 ， 并 设置 拆 分 的 行 
数 或 列 数 。 注 意 ， 不 能 同时 拆 分 多 行 和 多 列 。 

水 平 对 齐 方式 : 在 【水 平 】 下 拉 列 表 框 中 选择 单元 eR FE 
格 内 元 素 的 水 平 对 齐 方式 ， 包 括 左 默认 、 对 齐 、 右 Oe) 本 | 
对 齐 和 居中 对 齐 。 其 中 “默认 ”选项 会 根据 浏览 器 

内 部 设置 而 定 ， 一 般 默认 都 为 左 对 齐 。 [| 
垂直 对 齐 方式 : 在 【垂直 】 下 拉 列 表 框 中 选择 单元 
格 内 元 素 的 垂直 对 齐 方式 , 包括 默认 、 顶 端 、 居 中 、 
底部 和 基线 5 种 。 这 些 对 齐 方式 变化 比较 微妙 ， 下 面 逐 一 进行 举例 说 明 。 





图 6.20 【 拆 分 单元 格 】 对 话 框 


< 注意 : 这 些 对 齐 方式 最 初 都 是 根据 英文 字母 的 基本 结构 来 设置 的 ， 所 以 ， 参 照 汉字 对 齐 方式 可 能 


就 不 是 那么 精确 。 


顶端 : 插入 元 素 文字、 图像 等 有 形 元 素 ) 顶端 以 单元 格 内 顶端 为 线 进行 对 齐 ， 如 
图 6.21 所 示 。 

底部 : 插入 元 素 (文字 、 图 像 等 有 形 元 素 ) 底部 以 单元 格 内 底部 为 线 进行 对 齐 ， 如 
图 6.22 所 示 。 

居中 : 插入 元 素 ( 文 字 、 图 像 等 有 形 元 素 〉 的 中 线 以 单元 格 内 中 线 为 参考 线 进行 对 齐 ， 
如 图 6.23 所 示 。 

默认 : 插入 元 素 文字、 图像 等 有 形 元 素 ) 会 根据 各 个 浏览 器 的 设置 决定 对 齐 方式 ， 
一 般 为 居中 对 齐 。 

基线 : 插入 元 素 文字、 图像 等 有 形 元 素 ) 的 基线 以 行内 最 低 基线 为 参照 线 进行 对 齐 。 
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de da lad ed a ddd de sai 如 图 6.24 所 示 。 
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图 6.22 底部 对 齐 
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图 6.23 居中 对 齐 


图 6.24 英文 字母 结构 


回 ” 宽 和 高 : 用 于 设置 单元 格 的 宽度 和 高 度 ， 以 像素 为 单位 。 


回 不 换行 : 设置 单元 格 中 的 内 容 是 否 自动 换行 。 选 中 该 复 选 框 ， 则 在 单元 格 中 输入 文本 时 不 
会 自动 换行 ， 而 是 扩展 单元 格 的 宽度 ， 如 图 6.25 所 示 。 
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图 6.25 换行 和 不 换行 效果 比较 
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医 网 


加 ”标题 可 以 将 所 选 的 单元 格 设置 为 标题 单元 格 。 而 单元 格 里 的 文本 内 容 将 会 居中 加 粗 显 示 ， 
如 图 6.26 所 示 。 这 和 在 【表格 】 对 话 框 中 设置 【页 书 】 选 项 效果 是 一 致 的 。 
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图 6.26 设置 标题 单元 格 
回 ”背景 颜色 : 在 【背景 颜色 】 文 本 框 中 可 以 设置 单元 格 的 背景 颜色 。 


6.4 案例 实战 : 应 用 表格 


表格 素 有 网 页 设计 “灵魂 ”之 称 ， 当 然 在 标准 设计 过 程 中 ， 很 多 效果 可 以 直接 使 用 CSS 快速 实 
现 , 但 即便 如 此 ， 其 作用 不 可 小 视 。 下 面 结合 实例 介绍 如 何 巧妙 运用 表格 、 单 元 格 属性 设计 富有 创意 
的 网 页 布局 效果 。 


6.4.1 制作 圆 角 表格 


圆 角 表格 在 网 页 布局 中 使 用 频率 最 高 。 由 于 表格 没有 提供 直接 设置 圆 角 的 属性 , 制作 圆 角 表格 需 
要 间接 方法 来 完成 ， 实 现 圆 角 表格 的 方法 有 很 多 种 ， 如 图 像 法 、 像 素 法 、 编 程 法 ， 其 中 图 像 法 使 用 范 
围 最 广 。 用 图 像 制作 圆 角 表格 的 步骤 如 下 。 

【操作 步骤 】 

第 1 步 ， 使 用 Photoshop 设计 左右 对 称 的 圆 角 图 标 ， 设 计 宽 度 为 8 像素 ， 高 度 为 60 像素 ， 使 用 
红色 (#DA2129) 进行 填充 ， 如 图 6.27 所 示 。 

第 2 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 在 页 面 中 插入 一 个 表格 ， 主 要 设置 : 
1 行 3 列 ， 大 小 为 800x60 像素 ， 居 中 显示 ， 如 图 6.28 所 示 。 


窑 提示: 使 用 表格 进行 网 页 布局 时 ， 一 般 要 设置 【表格 】 对 话 框 中 的 【边框 粗细 了】 文本 框 、【 单 元 
格 边 距 】 文 本 框 和 【单元 格 间距 〗】 文 本 框 都 为 0。 也 可 以 在 插入 表格 之 后 ， 在 【属性 】 面 
板 中 设置 【填充 〗、【 间 距 〗 和 【边框 〗 文 本 框 为 0。 
第 3 步 ， 在 表格 两 端的 单元 格 中 分 别 插入 圆 角 图 标 ， 并 设置 单元 格 宽度 和 图 标 宽度 相同 ， 如 图 6.29 
所 示 。 在 制作 圆 角 图 标 时 应 先 设置 好 图 像 大 小 和 表格 尺寸 的 配套 。 
第 4 步 ， 设 置 中 间 单 元 格 的 背景 颜色 为 深 红色 ， 使 其 与 和 圆 角 图 标 颜色 保持 一 致 ， 如 图 6.29 
所 示 。 
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第 5 步 ， 在 中 间 单 元 格 内 插入 一 个 3 行 3 列 的 表格 。 用 该 表格 来 布局 标题 栏 ， 第 1 列 用 来 控制 标题 


图 6.29 插入 圆 角 图 标 和 设置 中 间 单 元 格 背 景色 


与 左 侧 距离 ， 中 间 列 用 来 绘制 白色 竖 线 ， 第 3 列 分 别 用 来 输入 标题 和 导航 栏目 ， 设 置 效 果 如 图 6.30 所 示 。 
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第 6 步 ， 以 同样 的 方式 在 下 面 再 插入 一 个 表格 ， 背 景 颜 色 设置 为 浅 灰 色 ， 然 后 输入 深 灰色 的 导航 


图 6.30 插入 布局 表格 
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文本 ， 如 图 6.31 所 示 。 
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图 6.31 制作 灰色 圆 角 表格 
6.4.2 ” 巧 做 表格 细 线 
制作 网 页 线条 方法 多 样 ， 简 单 总 结 如 下 。 


使 用 图 像 法 : 用 Photoshop 制作 直线 ， 然 后 插入 网 页 。 
在 Dreamweaver 中 选择 【插入 】|【 水 平 线 】 命 令 插 入 ， 


1 像素 宽 的 实 线 。 
通过 设置 表格 边框 。 


即使 用 <hr> 标 签 绘制 水 平 直线 。 


用 CSS 定义 元 素 边 框 来 制作 直线 ， 例 如 ，div {border:solid 1px 手 F0000;} 代 码 可 以 绘制 红色 


上 述 方法 各 有 利弊 ， 可 根据 个 人 需要 进行 选择 。 在 CSS 之 前 ， 用 表格 制作 细 线 比较 常用 。 下 面 
介绍 一 种 独特 方法 ， 通 过 设置 单元 格 背景 色 来 显示 直线 ， 这 种 方法 方便 简单 ， 又 具有 非常 大 的 灵活 性 


和 实用 性 。 
【操作 步骤 】 


第 1 步 ， 打 开 6.4.1 节操 作 网 页 文档 index.html。 在 标题 栏 下 面 插入 一 个 1 行 3 列 的 表格 ， 宽 800 


像素 ， 居 中 显示 ， 实 现 网 页 主体 的 布局 ， 即 一 栏 三 列 的 设计 格局 ， 





TESTETCIICRZ 


如 图 6.32 所 示 。 
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图 6.32 插入 主体 表格 


第 2 步 ， 设 置 第 1 个 单元 格 宽度 为 180 像素 ， 在 该 单元 格 中 插入 一 个 14 行 1 列 的 表格 ， 宽 度 为 
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| 
94%， 居 中 显示 ， 如 图 6.33 所 示 。 | 
| 
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图 6.33 插入 左 侧 栏目 表格 | 

1 制作 坚 线 

第 1 步 ， 在 第 一 个 单元 格 中 插入 一 个 1 行 3 列 的 表格 ， 宽 为 100%， 高 为 20 像素。 设置 插入 表格 | 

的 第 1 个 单元 格 宽 为 5 像素 。 | 
第 2 步 , 由 于 Dreamweaver 在 插入 表格 时 自动 在 每 个 单元 格 中 嵌入 一 个 空格 符号 &nbsp;， 用 来 撑 | 

大 单元 格 ， 当 插入 元 素 时 ， 空 格 消失 。 所 以 在 没有 输入 任何 元 素 时 ， 单 元 格 最 小 宽度 为 10 像素 最 | 
小 高 度 为 13 像素 ， 如 图 6.34 所 示 〈 放 大 为 400% 后 效果 )。 | 
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图 6.34 插入 单元 格 最 小 宽 和 高 
第 3 步 ， 当 要 设置 单元 格 高 或 宽 为 最 小 值 时 ， 就 应 该 把 这 些 空格 符号 &nbsp:; 清 除 掉 ， 方 法 是 把 光 
标 置 于 该 单元 格 内 或 选中 该 单元 格 ， 再 切换 到 【代码 】 视 图 ， 把 <td width="5">&nbsp;</td> 代 码 中 的 
&nbsp: 删 除 即 可 ， 如 图 6.35 所 示 。 


table 





dthe"800” bacd: 








tknbsp: /0 


图 6.35 插入 单元 格 最 小 宽 和 高 
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| 第 4 步 ， 删除 空格 符号 &nbsp; 之 后 ,设置 的 小 单元 格 效果 就 可 以 立即 显示 出 来 。 然 后 设置 第 2 个 

| 单元 格 宽度 为 1 像素 ， 背 景 颜色 为 浅 灰 色 #DDDDDD， 同 样 也 需要 把 代码 中 的 空格 符号 &nbsp; 删 除 。 
| 这 样 就 可 以 制作 一 个 短 竖 线 效果 。 

全 站 | 第 5 步 ， 通 过 设置 第 1 个 单元 格 的 宽度 来 调整 竖 线 的 横向 位 置 ， 通 过 设置 表格 的 高 度 来 调整 竖 线 

“YY ”| 的 长 短 ; 通过 设置 该 单元 格 的 宽度 来 调整 紧 线 的 宽度 ; 通过 设置 该 单元 格 的 背景 颜色 来 设置 竖 线 的 颜色 。 


2， 制 作 横 线 
| 第 1 步 ， 横 线 的 制作 方法 要 简单 点 。 选 中 第 2 行 的 单元 格 ， 如 图 6.45 所 示 。 然 后 在 【属性 】 面 
| 板 中 设置 单元 格 高 度 为 2 像素 ， 背 景 颜色 为 浅 灰色 #CCCCCC。 
| 第 2 步 ， 切 换 到 【代码 】 视 图 ， 删 除 单元 格 中 的 空格 符号 &nbsp;。 
| 第 3 步 ， 以 同样 的 方式 制作 竖 线 和 模 线 ， 注 意 灰 度 和 宽度 的 变化 ， 效 果 如 图 6.36 所 示 。 
! 
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图 6.36 制作 富有 变化 的 直线 组 合 


第 4 步 ， 在 这 些 直线 单元 格 中 输入 导航 文本 和 图 像 ， 效 果 如 图 6.37 所 示 。 











eac see: 关 





6.37 左 侧 导 航 栏目 制作 效果 


6.4.3 ”艺术 化 处 理 图 像 
| 通过 设置 表格 背景 图 像 属性 可 以 制作 一 些 图 像 特效 ,例如 ,给 图 像 镶 边 、 迹 扼 部 分 图 像 实现 图 像 
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| 
的 虚 化 显示 等 效果 。 本 例 就 是 利用 这 一 方法 实现 制作 图 像 残缺 效果 ， 效 果 如 图 6.38 所 示 。 | 
网 de | 
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图 6.38 表格 制作 的 图 像 特效 
【操作 步骤 】 
第 1 步 ， 在 主体 表格 的 第 2 个 单元 格 中 插入 一 个 20 行 20 列 的 表格 ， 设 置 大 小 为 300x300 像素 。 
然后 设置 背景 图 像 ， 效 果 如 图 6.39 所 示 。 设 置 表格 属性 的 代码 如 下 : 
<table width="300" height="300" border="0" align="center” celipadding="0" cellspacing="0"” background= 
"image/33.jpg"> 






































图 6.39 插入 多 行 多 列表 格 


第 2 步 ， 拖 选 所 有 单元 格 , 设置 所 有 单元 格 大 小 为 15x15 像素 ， 背 景 为 白色 ， 则 把 表格 的 背景 图 | 
像 遮盖 住 ， 如 图 6.40 所 示 。 | 
第 3 步 ， 在 上 面 雕 刻 ， 按 住 Ctrl 键 单 击 选中 要 镁 空 的 单元 格 ， 然 后 在 【背景 】 文 本 框 中 删除 设置 | 
的 白色 即 可 ， 如 图 6.41 所 示 。 利 用 这 种 方式 可 以 创意 设计 出 各 种 图 案 和 变形 ， 犹 如 绘制 像素 画 。 
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图 6.40 设置 单元 格 属性 
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6.41 匀 空 单元 格 


| 6.4.4 制作 立体 表格 
立体 表格 主要 通过 颜色 的 设置 来 实现 。 本 例 的 立体 表格 效果 如 图 6.42 所 示 。 实 现 的 具体 步骤 如 下 。 


HLOO 


EB 





1! 图 6.42 立体 表格 效果 
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【操作 步骤 】 
第 1 步 ， 继 续 以 6.4.3 节 示 例 为 基础 ， 打 开 index.html。 选 中 6.4.3 节 插入 的 表格 ， 设 置 主体 表格 
的 第 3 个 单元 格 背景 颜色 为 蓝 色 (#667BD8) ， 设 置 垂直 对 齐 方式 为 顶端 。 





所 示 。 
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图 6.43 插入 表格 


第 2 步 ， 在 该 单元 格 中 插入 一 个 4 行 2 列 的 表格 ， 设 置 宽度 为 180 像素 ， 居 中 显示 ， 效 果 如 图 643 | 





第 3 步 ， 插入 表格 的 第 1 行 用 来 控制 表格 与 顶部 标题 栏 的 距离 ， 合 并 第 2 行 的 两 个 单元 格 ， 并 设 | 


置 合并 单元 格 背景 图 像 ， 在 设置 之 前 应 把 第 2 行 高 度 设置 为 背景 图 像 的 高 度 ， 如 图 6.44 所 示 。 
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图 6.44 设置 单元 格 


第 4 步 , 设置 表格 的 最 后 一 行 和 表格 右 侧 单元 格 为 1 像素 高 或 宽 ， 背景 颜色 为 白色 。 并 设置 主体 
单元 格 背 景 颜色 为 浅 蓝 色 (#D6DFF7)， 高 为 200 像素 ， 如 图 6.45 所 示 。 

第 5 步 ， 以 同样 的 方式 或 复制 上 面 制作 的 表格 ， 就 可 以 重复 制作 多 个 立体 表格 ， 最 后 效果 如 图 6.46 
所 示 。 
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6.46 制作 的 立体 表格 效果 


6.5 定义 表格 样式 


使 用 CSS 可 以 实现 对 表格 的 样式 控制 ， 其 中 表格 样式 包括 边框 宽度 、 边 框 颜 色 、 边 框 样式 以 及 
表格 背景 等 效果 ， 以 及 如 何 使 用 CSS 控制 表格 特性 等 。 


6.5.1 设置 表格 颜色 


CSS 使 用 color 属性 设置 表格 中 文字 的 颜色 ， 通 过 background-color 属性 来 设置 表格 的 背景 颜色 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 : 


<table width="300" border="1"> 
<tr> 
! <td> 姓 名 </td> 
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和 
网 





在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 用 
来 定义 网 页 字体 的 类 型 。 

table{ * 设 置 表格 的 CSS 样式 */ 

background-color:#00CCFF: /* 表 格 的 背景 颜色 */ 
color:#FF0000; /* 表 格 的 字体 颜色 */ 

} 

上 面 代 码 中 ， 用 <table> 标 签 创建 了 一 个 表格 ， 设 置 表格 的 宽度 为 300， 表 格 的 边框 宽度 为 1， 这 | 
里 没有 给 出 单位 ， 默 认为 px。 使 用 <tt> 和 <td> 标 签 创建 了 
4 行 5 列 的 表格 。 可 以 看 到 ， 表 格 的 背景 颜色 和 字体 颜色 ee EE 
通过 CSS 进行 了 设置 。 显 示 效 果 如 图 6.47 所 示 。 


6.5.2 ”设置 表格 边框 
在 CSS 中 ， 设 置 表格 边框 同样 是 通过 border 属性 ， 





设置 方法 与 设置 图 片 边框 完全 一 样 , 只 不 过 要 特别 注意 单 6.47 设置 表格 颜色 
元 格 边框 的 设置 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 内 容 : | 
<table> | 
<caption> | 
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ne 








在 以 上 代码 中 ， 用 <caption> 标 签 定 义 了 表格 的 标题 ， 该 标签 可 以 出 现在 <table> 与 </table> 之 间 的 
任意 位 置 ， 不 过 通常 习惯 放 在 表格 的 第 1 行 ， 紧 接着 <table> 标 签 。<th> 标 签 在 表格 中 主要 用 于 定义 行 
或 列 的 名 称 ， 在 本 例 中 ， 行 的 名 称 为 “2012”“2013” 等 ， 列 的 名 称 为 “招生 总 数 ”“ 男 生 ”“ 女 生 ”， 
在 <th> 标 签 中 的 scope 属性 就 是 用 来 区 分 行 名 称 和 列 名 称 的 ,分别 设置 scope 的 值 为 row 或 col, 分 别 
代表 行 名 称 或 列 名 称 。 

在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 
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} 
在 以 上 代码 中 ， 设 置 了 表格 边框 ， 显 示 效果 如 图 6.48 所 示 。 | 
从 图 6.48 中 可 以 看 到 ， 虽 给 表格 设置 了 边框 ， 但 是 单元 格 并 没有 任何 边线 ， 所 以 ， 在 设置 表格 | 

边框 时 ， 还 要 注意 给 单元 格 也 单独 地 设置 相应 的 边框 ， 在 以 上 CSS 样式 表 中 ， 添 加 下 列 样式 代码 ; 


er /标题 文字 粗 体 o 
| 





table th, table td { 
color: #003e7e; 让 行 、 列 名 称 颜色 */ | 
border #006666 solid lpx: /# 单 元 格 边框 所 | 

} | 
| 

显示 效果 如 图 6.49 所 示 。 | 


Ss 3 
2012-2015 年 招生 情况 2012-2015 年 招生 情况 

2012 2013 2014 2015 Po13[2013[2014| 

招生 总 数 980 650 700 600 B80 j650 |7oo0 

男生 480 300 400 290 车 ]480 ]B00 [400 | 到 

女生 500 350 300 310 而 中 而 













































































图 6.48 表格 边框 图 6.49 为 单元 格 设置 边框 


读者 会 发 现 ， 如 上 所 述 设置 完成 后 ， 单 元 格 的 边框 之 间 会 有 空 阶 ， 这 时 需要 设置 CSS 中 整个 表 
格 的 border-collapse 属性 ， 使 得 边框 重合 到 一 起 ， 具 体 代码 如 下 : 


table { 
color: #0046a6; 目 表 格 文字 颜色 */ 
font-family: Arial: /* 表 格 字体 电 
border-collapse: collapse:; 人/# 边 框 重 礁 所 

} 


| 
! 
| 
和 
| 
| 
border: #006666 solid 1px; :表格 边框 */ | 
| 
上 
| 
| 
| 
| 
上 


2012.2015 年 招生 情况 
120122013| 


招生 总 堵 
[了 下 
女生 





























图 6.50 边框 重生 


【补充 】 由 于 表格 边框 默认 是 立体 效果 , 在 浏览 时 会 显得 很 粗 , 即使 设置 边框 为 1 像素 也 是 这 样 。 
利用 HTML 属性 也 可 以 设计 细 线 表格 ， 具 体 方法 如 下 。 | 
【操作 步骤 】 
第 1 步 ,新建 文档 ,保存 为 test1.html， 复制 testhtml 文档 中 的 表格 结构 。 设 置 表格 【间距 】 为 1， 
【边框 ] 为 0, 同时 设置 表格 的 背景 颜色 。 上面 3 个 属性 是 关键 点 , 其 他 属性 可 以 任意 设置 , 如 图 6.51 
所 示 。HTML 标签 设置 属性 如 下 : 


<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFOOFF"> 
“223。 
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图 6.51 设置 表格 间距 、 边 框 和 背景 色 
第 2 步 ， 用 鼠标 拖 选 全 部 单元 格 ， 并 在 【属性 】 面 板 中 设置 背景 色 为 白色 ， 如 图 6.52 所 示 。 
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图 6.52 设置 单元 格 背 景色 


第 3 步 ， 保 存 文档 ， 并 在 浏览 器 中 浏览 ， 则 效果 如 图 6.53 所 示 。 细 线 表格 技巧 原理 就 是 利用 表 
格 背景 颜色 包含 表格 间距 区 域 ， 并 利用 “ 遮 罩 ”技法 间接 实现 的 一 种 效果 。 























6.53 ” 细 线 表格 效果 


6.6 案例 实战 


本 节 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 表格 样式 ， 以 提高 实战 技法 和 技巧 ， 快 速 理解 CSS 


| 表格 属性 的 应 用 。 
| 6.6.1 美化 表格 


| 在 6.5 节 中 , 介绍 了 CSS 可 设置 的 表格 颜色 和 表格 边框 样式 ， 本 节 通 过 一 个 简单 的 实例 来 介绍 通 
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过 CSS 美化 的 方法 ， 整 个 网 页 设计 效果 如 图 6.54 所 示 。 





图 6.54 美化 表格 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 保 存 为 ndex.html。 构 建 网 页 结构 ， 在 <body> 标 签 中 输入 以 下 内 容 : 
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第 2 步 , 规划 整个 页 面 的 基本 显示 属性 以 及 设置 表格 样式 。 在 <head> 标 签 内 添加 <style type="text/ 
css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 
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ET | 
text-align: center: 人 表格 中 文字 水 平 居中 对 齐 */ | 
border-collapse: collapse: 人 # 边 框 重奏 */ 


此 时 的 显示 效果 如 图 6.55 所 示 。 可 以 看 到 ， 网 页 背景 颜色 发 生 了 改变 ， 并 且 表 格 添加 了 边框 。 | 食 - 





第 3 步 ， 设 置 表格 标题 的 样式 。 样 式 代 码 如 下 ， 显 示 效 果 如 图 6.56 所 示 。 
.cap {/* 设 置 表格 标题 */ | 

padding-top: 3px: * 设 置 表格 标题 的 项 部 边 距 */ | 

padding-bottom: 4px: 局 设 置 表格 标题 的 底部 边 距 */ | 

font-size: 30px; 证 表格 标题 字体 大 小 */ | 

color red; /# 表 格 标题 字体 颜色 六 | 



































图 6.55 设置 网 页 基本 属性 及 表格 样式 图 6.56 设置 表格 标题 
第 4 步 ， 设 置 表格 中 的 单元 格 样式 。 
table 也 {表格 的 行 、 列 名 称 单元 格 的 样式 */ 


border: 2px solid #429fTF: 放行 、 列 名 称 边框 */ | 
background-color: Hd2e8 /# 行 、 列 名 称 单 元 格 的 背景 颜色 | 
font-weight: bold:; 放行 、 列 名 称 字体 加 粗 */ | 
padding-top: 4px; /* 设 置 行 、 列 名 称 单元 格 的 上 、 下 、 左 、 右 边 距 q/ | 
padding-left: 10px: | 
padding-right: 10px; | 
} | 
table td {/* 表 格 单元 格 样式 */ | 
border: 2px solid #429ff: /* 单 元 格 边框 所 | 


} | 
以 上 代码 中 ， 分 别 设置 了 <th> 和 <td> 标 签 的 样式 ， 对 表格 的 单元 格 的 背景 颜色 、 边 框 样式 进行 了 | 
设置 ， 从 而 达到 美化 表格 的 目的 。 | 
6.6.2 ”设计 清晰 、 醒 目的 表格 

当 表 格 的 行 和 列 比较 多 时 ,表格 如 果 采 用 相同 的 背景 颜色 ， 用 户 就 会 感到 凌乱 ， 那 么 可 以 设置 隔 


行 变 色 的 效果 ， 使 奇数 行 和 偶数 行 背景 颜色 不 同 ， 就 能 使 表格 看 起 来 清晰 而 一 目 了 然 ， 从 而 达到 高 效 
浏览 的 目的 。 示 例 效果 如 图 6.57 所 示 。 
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财经 2000 级 毕业 生 通 讯 录 


3893212 





3345678 北京 和 1 中 邓 
39432567 区 防 肝 力 
355613234 


365395372 


3567890 


354083611 
354353623 


34567® 





图 6.57 设计 高 效 表 格 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 保 存 为 ndex.html。 构 建 网 页 结构 ， 在 <body> 标 签 中 输入 以 下 内 容 ， 


<table id="mytable" cellspacing="0" summary=" 财 经 2000 级 毕业 生 通 讯 录 "> 


<caption> 
财经 2000 级 毕业 生 通 讯 录 
</caption> 
<tr> 
<th scope="col" abbr="Configurations" > 姓名 </t 了 h> 
<th scope="col" abbr="Dual 1.8"> 出 生日 期 </th> 
<th scope="col" abbr="Dual 2"> 电 话 </th> 
<th scope="col" abbr="Dual 2.5"> 单 位 </th> 
<t> 
<t> 
<th scope="row" abbr="Model" class="spec"> 王 明 </th> 
<td>1978.1.4</td> 
<td>137563443</td> 
<td> 中 国 铁道 部 </td> 
<t> 
<tr> 
<th scope="row" abbr="G5 Processor" class="specalt"> 李 丽 </th> 
<td class="alt">1977.5.7</td> 
<td class="alt">13893212</td> 
<td class="alt"> 北 京 市 朝阳 区 街道 办 事 处 </td> 
</t> 
<t> 
<th scope="row" abbr="Frontside bus" class="spec"> 刘 丽 敏 </th> 
<td>1978.4.23</td> 
<td>13345678</td> 
<td> 北 京 市 11 中 学 </td> 
</tr> 
<t> 
<th scope="row" abbr="L2 Cache" class="specalt"> 李 松 </ 由 > 
<td class="alt">1977.11.31</td> 
<td class="alt">139432567</td> 
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<td class="alt"> 北 京东 城区 防汛 办 </td> 
</tr> 
<tr> 
<th scope="row" abbr="Frontside bus" class="spec"> 赵 艳 </ 了 h> 
<td>1978.7.3</td> 
<td>1355613234</td> 
<td> 北 京 深 华新 股份 有 限 公司 </td> 
</tr> 
<t> 





<th scope="row" abbr="L2 Cache" class="specalt"> 杜 征 </th> 
<td class="alt">1978.6.19</td> | 
<td class="alt">1368395322</td> | 
<td class="alt"> 酷 6 网 </td> | 

</t> 

<tr> 
<th scope="row" abbr="Frontside bus" class="spec"> 王 朋 </th> | 
<td>1978.9.22</td> | 
<td>13567890</td> ! 
<td>adobe 公司 </td> 

</t> 

<t> 
<th scope="row" abbr="L2 Cache" class="specalt"> 杨 小 东 </th> 
<td class="alt">1978.1.3</td> 
<td class="alt">1354983611</td> 
<td class="alt"> 朝 阳 区 将 台 东 路 乐天 玛 特 </td> 

</t> 

<tr> 
<th scope="row" abbr="Frontside bus" class="spec"> 杨 秀 燕 </thb> 
<td>1977.12.3</td> 
<td>1354353623</td> 
<td> 朝 阳 区 教委 </td> 

</tr> 

<tr> 
<th scope="row" abbr="L2 Cache" class="specalt"> 张 小 光 </th> 
<td class="alt">1978.10.24</td> 
<td class="alt">134567831</td> 
<td class="alt"> 铁 路 第 二 中 学 </td> 

<t> 

</table> 


以 上 代码 中 , 将 奇数 行 名 称 定义 为 spec 类 ， 偶 数 行 名 称 定义 为 specalt 类 ， 并 通过 <td class="alt"> | 
定义 了 偶数 行 中 的 单元 格 ， 此 时 的 显示 效果 如 图 6.58 所 示 ， 可 以 看 到 ， 表 格 的 基本 结构 已 经 搭建 好 
了 ， 但 是 由 于 没有 进行 CSS 样式 设置 ， 界 面 中 只 把 数据 罗列 起 来 ， 没 有 任何 修饰 。 

第 2 步 ， 定 义 网 页 基本 属性 、 表 格 #mytable 样式 以 及 表格 标题 样式 。 在 <head> 标 签 内 添加 <style 
type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 

body { background: 上 手 6EAE9: } /* 网 页 基本 样式 */ 

#mytable { 人 * 表 格 样式 */ 

width: 700px: 必 表 格 宽度 */ 
padding: 0: 
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margin: 0: 

| border lpx solid #CIDAD7: :表格 边框 */ 

| } 

， caption {/* 设 置 表格 标题 */ 
食 乒 | padding: 0 0 Spx 0: 

~ | text-align: center: At 水 平 居中 志 
Jote | font-size: 30px: 刻字 体 大 小 */ 
| font-weight: bold: /+ 字体 加 粗 */ 


| Bs 
| 在 以 上 代码 中 ， 通 过 首先 定义 了 页 面 的 背景 颜色 ， 在 #mytable 中 设置 了 表格 的 宽度 为 700px， 并 
| 为 其 添加 了 表格 边框 。 此 时 的 显示 效果 如 图 6.59 所 示 。 


98: te BH 
354353623W3[ 
1 和 和 





图 6.58 构建 表格 结构 


3000 证 业 生 交 训 
出 生日 期 单位 


es 
北京 市 1 中 学 


北京 东城 区 防 和 办 
北京 译 华 新 跟 性 有限 公 司 
Me 


adobe 和 司 
条 天 于 
ME 

19781024 多 器 半 二 中 学 





图 6.59 设置 表格 基本 属性 
第 3 步 ， 定 义 单元 格 的 共有 属性 。 


| 全 {7 表格 名 称 样式 */ 
| color: #4f6b72: /# 表 格 名 称 的 字体 颜色 六 

| letter-spacing: 2px: /# 字 间距 #/ 

| text-align: center: 放水 平 居 中 */ 

| padding: 6px 6px 6px 12px: 片 名 称 单元 格 的 内 边 距 */ 

| background: #CAE8EAL: /# 名 称 单 元 格 的 背景 颜色 所 
| border: 1px solid #C1DAD7: 片 名 称 单元 格 的 边框 */ 

| } 

| td {/* 表 格 单元 格 样式 */ 

| background: #fff: /# 单 元 格 背景 色 所 

| padding: 6px 6px 6px 12px: 

| color: #4f6b72: 

| text-align: center: 

| border lpx solid #C1DAD7:; 让 单元 格 边框 */ 

| } 
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| 
在 以 上 代码 中 ， 定 义 了 表格 中 所 有 单元 格 的 共有 样式 。 此 时 网 页 的 显示 效果 如 图 6.60 所 示 。 从 | 
图 6.60 中 可 以 看 到 ， 表 格 已 经 呈现 出 来 ， 但 是 还 没有 实现 隔行 变色 。 | 


© ET 


财 经 2000 级 后 业 生 通讯 录 
出 生日 期 天 





197757 
1978.42: 
19771131 





图 6.60 单元 格 的 CSS 设置 
第 4 步 ， 实 现 表格 的 隔行 变色 。 


-spec { /* 奇 数 行 名 称 样式 */ 
backeground: #ffF: 目 背 景 颜色 */ } 
.specalt { 族 偶 数 行 名 称 样式 */ 


color: #797268: 刻字 体 颜色 */ 


} 

-alt {/* 偶 数 行 单元 格 样式 */ 
background: #FSFAFA: 
color: #797268:; 


} 
以 上 代码 中 ， 首 先 通 过 spec 设置 了 奇数 行 中 <th> 标 签 的 样式 ， 通 过 specalt 设置 了 偶数 行 中 <th> 
标签 的 样式 ， 最 后 在 alt 中 设置 了 偶数 单元 格 ， 也 就 是 <td> 标 签 的 样式 。 


窑 提示 : 在 CSS 中， 设置 隔行 变色 十 分 简单 ， 主 要 在 于 给 奇数 行 和 偶数 行 设置 不 同 的 背景 颜色 , 为 | 
奇数 行 和 偶数 行 的 < 志 > 标 签 添加 相应 的 类 以 及 为 单元 格 <td> 标 签 添加 相应 的 类 ， 代 码 如 下 :| 
<th scope="row" class="spec"> | 
也 scope="row" class="specalt"> | 
<td class="alt"> 

然后 在 CSS 样式 表 中 对 奇数 行 和 偶数 行进 行 单独 的 样式 设置 ， 主 要 是 在 配合 整体 设计 协调 的 基 

础 上 ， 改 变 背景 颜色 、 字 体 颜色 等 。 


6.6.3 ”设计 动态 效果 的 表格 


对 于 长 时 间 浏 览 大 量 表格 数据 的 用 户 来 说 ,即使 是 隔行 变色 的 表格 , 阅读 时 间 长 了 仍然 会 感到 疲 
劳 。 如 果 数 据 行 能 动态 地 根据 鼠标 来 变色 ， 就 会 大 大 较 少 用 户 的 疲劳 感 ， 也 会 使 表格 更 易 用 ， 本 例 介 
绍 了 鼠标 经 过 时 变色 的 表格 ， 演 示 效 果 如 图 6.61 所 示 。 
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图 6.61 鼠标 经 过 时 变色 的 表格 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 保 存 为 ndex html。 构 建 网 页 基本 结构 。 在 本 例 中 构建 了 一 个 8 行 4 列 的 表格 。 
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此 时 在 没有 CSS 样式 设置 时 的 显示 结果 如 图 6.62 所 示 。 
第 2 步 ， 定 义 表格 和 表格 标题 样式 。 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 
内 部 样式 表 ， 然 后 输入 下 面 样式 。 





以 上 代码 中 ， 首 先 设置 了 表格 的 样式 和 表格 的 边框 ， 并 对 表格 标题 样式 进行 了 定义 。 此 时 的 显示 


效果 如 图 6.63 所 示 。 
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图 6.62 构建 表格 结构 图 6.63 设置 表格 样式 
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| 第 3 步 ， 定 义 表格 的 行 名 称 样式 和 单元 格 样式 。 
ghar th {A 行 名 称 样式 */ 
| border: 1px solid #0058a3: /# 行 名 称 边框 所 
全 fF | background-color: #4bacff: 访 行 名 称 背 景色 */ 
~ | color: #FFFFFF: /# 行 名 称 颜色 所 


xie 
| Padding-top: 4px; 
| Padding-bottom: 4px; 
padding-left: 12px: 
Padding-right: 12px; 
text-align: center 个 水平 对 齐 */ 


} 

.chart td {/* 单 元 格 样式 */ 
border: 1px solid #0058a3: 证 单元 格 边框 */ 
text-align: center: 水平 对 齐 */ 
padding-top: 4px: 
padding-bottom: 4px: 
padding-left 10px; 
Ppadding-right: 10px; 


} 


| 
| 以 上 代码 中 ,首先 定义 了 <th> 标 签 样式 和 <td> 标 签 样式 ， 此 时 网 页 的 显示 效果 如 图 6.64 所 示 。 从 
| 图 6.64 中 可 以 看 到 ， 整 个 表格 样式 已 经 形成 ， 最 后 只 差 实现 动态 变色 。 

第 4 步 ， 实 现 动态 变色 。 

.chart tr:hover { background-color: #CC9999; 让 动态 变色 */ 

} 


从 以 上 代码 可 以 看 到 ， 实 现 动态 变色 可 以 直接 调用 <t> 标 签 的 伪 类 hover。 最 终 效果 如 图 6.65 所 示 。 












































6.64 ”<th> 和 <td> 标 签 的 CSS 设置 6.65 动态 变色 


窟 提示， 在 现代 标准 浏览 器 中 支持 <tr> 标 签 的 伪 类 ， 但 是 在 IE 浏览 器 中 ， 只 有 在 IE8 以 上 版 本 才 
支持 ， 所 以 要 注意 浏览 器 的 兼容 性 。 


| 6.6.4 设计 音乐 首页 


| 表格 除了 显示 数据 外 ， 还 常常 被 用 来 排版 。 虽 然 如 今 比较 流行 用 DIV 布局 页 面 ， 但 是 由 于 表格 
| 容易 上 手 、 快 捷 、 兼 容 性 好 ， 所 以 表格 布局 仍然 受到 不 少 设计 者 的 青睐 。 本 例 的 演示 效果 如 图 6.66 


*。234 。 




















图 6.66 音乐 首页 效果 


【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 保 存 为 mdex.html。 构 建 网 页 结构 。 本 例 中 应 用 了 表格 嵌 套 ， 设 置 了 外 层 表 
格 outer 和 内 层 表格 inner 进行 布局 ， 结 构 示意 图 如 图 6.67 所 示 。 
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图 6.67 表格 嵌 套 示意 图 


从 图 6.67 中 可 以 看 到 ， 外 层 表格 是 一 个 3 行 1 列 的 表格 ， 在 外 层 表格 的 第 2 行 中 ， 又 堪 套 了 一 | 
个 1 行 2 列 的 表格 。 


<table class="outer"> 
<tr> 
<td><img ste="images/bg.jpg"></td> 
<ft> | 
<t> | 
<td><table class="inner> | 
< | 
<td class—"left"><ul> | 
<li><a hre 伍 "#'> 首 页 </a></li> 
<li><a hre 人 "名 > 古典 音乐 </a></i> 
<IP><a hreE-"#> 现 代 流行 <a><1i> | 
<li><alreE-"#r> 画 士 音乐 <a></i> \ 
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<li><a hre 伍 "#">70 后 音乐 </a></li> 
<li><a hre 全 ="#">80 后 音乐 </a></li> 
<li><a hre 仁 "#">90 后 音乐 </a></li> 
> Jul></td> 
仿 站 . <td class="right"><img src="images/1 jpg" /></td> 
| </t> 


Note | La 
</tr> 
<t> 


<td class="footer"><p>| 联 系 我 们 ”| 关于 我 们 “|</p> 
<p> 感 谢 您 的 支持 ， 希 望 明天 会 更 好 !! </p></td> 


</table> 


| 以 上 代码 定义 了 表格 的 结构 ， 外 层 表格 的 3 行 分 别 是 : 第 1 行 设置 了 banner 图 片 ， 第 2 行 是 网 
| 页 正文 部 分 , 嵌 套 了 另 一 个 表格 , 第 3 行 定 义 了 网 页 的 footer 部 分 ; 内 层 表格 是 一 个 1 行 2 列 的 表格 ， 
| 左 侧 单元 格 设置 了 <ul> 列 表 ， 定 义 网 页 的 导航 栏 ， 右 侧 单元 格 是 网 页 的 内 容 部 分 。 

| 第 2 步 ， 定 义 网 页 基本 属性 和 外 层 表格 样式 。 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 
定义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 


| body { /+ 网 页 基本 属性 */ 
| background: #e9e8dd: /# 网 页 背景 颜色 所 
| text-align: center; 
| } 
| .Outer {/* 外 层 表格 样式 */ 
width: 800px: 让 表格 宽度 */ 
border: 1px #999999 solid:; 让 表格 边框 */ 


1 
| margin: 0 auto:/* 与 父 标签 中 的 text-align:center 配合 实现 水 平 居中 */ 
| 


} 
.footer {l* 外 层 表格 第 3 行 单元 格 样式 */ 


background-color: #BEC4D0: 证 单元 格 背 景 颜 色 */ 
| text-align: center: 让 水 平 居中 */ 
| font-size: 12px: 刻字 体 大 小 */ 
| color: #0033FF: 广 字体 颜色 */ 


} 

在 以 上 代码 中 ， 首 先 定义 了 网 页 基本 属性 ， 在 outer 中 首先 定义 了 表格 宽度 ， 并 定义 了 表格 的 外 
边框 ，margin:0 auto 与 body 中 的 text-align:center 两 条 语句 可 实现 正 与 FF 浏览 器 中 的 水 平 居中 。 在 
footer 中 ， 定 义 了 外 层 表格 中 第 3 行 单元 格 的 样式 。 此 时 ， 外 层 表格 的 所 有 样式 设置 完毕 ， 显 示 效 果 


| 如 图 6.68 所 示 。 

| 第 3 步 ， 设 置 内 层 表格 inner 样式 。 

| “Jleft { /* 内 层 表格 左 侧 单元 格 样式 */ 

| width: 150px: /# 左 侧 单元 格 宽度 所 
| background-color: #FF3300: 人 # 背 景 颜色 所 

| border: 1px red solid: /# 单 元 格 边框 所 

| text-align: center: 证 水 平 居中 */ 

| } 
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Tight {* 内 层 表格 右 侧 单元 格 样式 */ 
width: 650px: 人 # 右 侧 单元 格 宽度 所 
background-color: #BEC4D0: 片 背景 颜色 */ 
border: 1px red solid: 片 单元 格 边 框 */ 
text-align: center: 访 水 平 居 中 */ 


以 上 代码 完成 了 内 层 表格 中 两 个 单元 格 样式 的 设置 ， 显 示 效 果 如 图 6.69 所 示 。 


wm osclesss -| 




















图 6.69 设置 内 层 表格 样式 
第 4 步 ， 设 置 内 层 表格 中 的 左 侧 导航 条 样式 。 


ul {/* 列 表 样 式 */ 
list-style-type: none: 证 不 显示 列表 项 目 符号 */ 
font-weight: bold: 人 # 字 体 加 粗 #/ 
font-size: 16px: 刻字 体 大 小 */ 


“ae 
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KS 


} 
li { height: 40px: 人 # 列 表 项 的 高 宽 %/ } 
上 面 代码 实现 了 导航 栏 的 样式 ， 如 图 6.70 所 示 效 果 。 


乐 网 站 
EE 


"Ee | 
入 太太 晤 邓 五, 厅 ) 志 人 


[7 


图 6.70 导航 栏 效 果 




















| 6.6.5 ”设计 个 人 小 站 


本 节 继 续 使 用 表格 来 设计 完整 页 面 ， 整 个 页 面 通过 多 层 嵌 套 表格 设计 3 行 3 列 的 页 面 布局 样式 ， 
演示 效果 如 图 6.71 所 示 。 














6.71 个 人 小 站 页 面 效果 


【操作 步骤 】 

第 1 步 ， 在 设计 页 面 之 前 ， 使 用 Photoshop 制作 并 处 理 网 页 中 使 用 的 图 像 ， 然 后 建立 一 个 images 
文件 夹 ， 将 这 些 图 像 文件 都 放 在 该 文件 夹 中 ， 以 备 引 用 。 

整个 首页 的 布局 思路 在 制作 之 前 应 先 在 草稿 纸 上 勾 画 一 下 ， 然 后 用 Photoshop 制作 一 个 模板 ， 如 
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| 
图 6.72 所 示 。 | 
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图 6.72 设计 网 页 模板 
第 2 步 ， 根 据 需 要 再 用 切片 工具 切割 图 像 ， 如 图 6.73 所 示 。 
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6.73 ” 切 分 并 输出 图 像 


第 3 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 index.html。 在 主 窗口 中 选择 【修改 】| 【页 面 属 | 
性 】 命 令 ， 打开 【页 面 属性 】 对 话 框 ， 在 该 对 话 框 中 单 击 左 侧 【 分 类 】 列 表 中 的 【标题 /编码 】 选 项 ， 
在 【标题 】 文 本 框 中 输入 网 页 的 标题 “个 人 主页 一 桃花 源 ”， 如 图 6.74 所 示 。 当 用 户 在 浏览 器 中 打 
开 此 网 页 时 ， 网 页 标题 会 出 现在 浏览 器 的 标题 栏 中 。 

第 4 步 ， 单 击 【分 类 】 列 表 中 的 【外 观 〈CSS) 】 选 项 ， 在 右 侧 的 【背景 图 像 】 文 本 框 中 输入 网 
页 背景 图 像 的 完整 名 称 ， 如 图 6.75 所 示 。 本 例 中 ， 已 将 背景 图 像 复 制 到 站 点 中 的 images 文件 夹 中 ， 
因此 输入 文件 的 相对 路 径 即 可 ， 单 击 【 浏 览 】 按 钮 可 以 在 打开 的 对 话 框 中 快速 找到 背景 图 像 。 

第 5 步 ， 在 【重复 】 下 拉 菜 单 中 选择 repeat-x， 即 定义 横向 重复 ， 因 为 本 页 背景 图 像 为 渐变 色 图 
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像 ， 只 能 在 横向 上 重复 。 
第 6 步 ， 为 使 网 页 在 浏览 器 中 不 留 空白 边 距 ， 可 以 在 下 面 4 个 边 距 文本 框 中 输入 “0”， 设 置 网 


页 与 浏览 器 之 间 没有 边 距 ， 如 图 6.75 所 示 。 
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图 6.74 设置 网 页 标题 图 6.75 设置 网 页 背景 


容 提示 : 如 果 使 用 的 图 像 文件 不 在 站 点 中 ， 可 以 单 击 文本 框 右边 的 【浏览 】 按钮， 在 打开 的 对 话 框 
中 查找 图 像 。 单 击 【确定 】 按 钮 后 ， 系 统 会 弹出 提示 对 话 框 询问 是 否 把 该 图 像 保 存 到 站 点 
内 ， 并 打开 【复制 文件 为 〗 对 话 框 让 用 户 保存 该 图 像 到 站 点 内 。 


第 7 步 ， 单 击 【 分 类 】 列 表 中 的 【链接 】 选项， 在 右 侧 的 文本 框 中 设置 链接 文本 在 不 同 状态 下 的 
样式 ， 如 图 6.77 所 示 。 本 例 中 ， 为 了 使 链接 文本 和 网 页 整体 颜色 协调 一 致 设置 【链接 颜色 】( 正 
常 状 态 下 ) 为 #663300，【 交 换 图 像 链 接 】 (鼠标 指针 经 过 链接 时 ) 为 #857940,， 【已 访问 链接 】 ( 单 
击 后 的 文本 链接 ) 为 #663300， 和 正常 状态 颜色 一 致 。 

第 8 步 ， 在 【下 划 线 样式 】 下 拉 列 表 框 中 选择 “交换 图 像 时 隐藏 图 像 ” 选 项 ， 即 当 鼠 标 指针 经 过 
链接 时 不 再 显示 系统 默认 的 显示 下 划 线 效果 ， 如 图 6.77 所 示 。 

第 9 步 ， 使 用 表格 布局 页 面 。 上 下 共 插 入 两 个 并 列 的 表格 ， 然 后 在 第 2 个 表格 中 嵌入 多 个 不 同 层 
级 的 表格 ， 如 图 6.78 所 示 。 
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图 6.77 设置 链接 样式 图 6.78 ”使 用 嵌 套 表格 布局 页 面 


疱 提示 : 插入 的 表格 要 隐藏 边框 ， 设 置 单元 格 边 距 和 单元 格 间距 为 0， 避免 这 些 属性 对 页 面 的 影响 。 
关于 表格 的 行 数 、 列 数 可 以 根据 需要 自由 设置 表格 的 长 度 一 般 设置 原则 为 : 最 外 围 表格 
建议 指定 固定 数值 ， 单 位 为 像素 ; 说 套 表 格 可 以 设置 为 百分比 ， 一 般 情况 下 为 100%。 
表格 之 间 可 以 谈 套 ， 葡 套 表 格 的 目的 是 为 了 更 详细 地 布局 网 页 ， 但 建议 不 要 识 套 太 深 ， 一 
般 不 要 超过 5 层 ， 最 好 保持 在 3 层 内 。 此 时 可 以 放大 视图 ， 以 方便 观察 。 
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| 

第 10 步 ， 在 表格 中 插入 图 像 。 在 插入 前 ， 先 在 表格 的 单元 格 中 单 击 ， 选 择 【 插 入 】| 【图 像 】| | 
【图 像 】 命 令 ， 打 开 【 选 择 图 像 源 文 件 】 对 话 框 。 在 该 对 话 框 的 文件 列表 中 选择 要 插入 的 图 像 文 件 。 | 
单 击 【确定 】 按 钮 ， 选 定 的 图 像 即 被 插入 到 单元 格 中 ， 如 图 6.79 所 示 。 | 
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.79 在 单元 格 中 插入 图 片 


第 11 步 ， 在 表格 中 插入 背景 图 像 。 网 页 可 以 设置 背景 图 像 ， 表 格 、 单 元 格 、 行 都 可 以 设置 背景 | 
图 像 。 | 
背景 图 像 在 插入 表格 之 后 会 根据 表格 大 小 进行 重复 显示 。 当 表格 比 图 像 小 时 ， 则 显示 局 部 图 像 ， | 
当 表 格 比 图 像 大 时 ， 则 重复 显示 图 像 ， 如 果 希 望 正好 显示 背景 图 像 ， 可 以 设置 单元 格 大 小 和 图 像 大 小 | 
一 致 。 本 例 中 的 单元 格 背景 图 像 设置 如 图 6.80 所 示 。 


动 Cser\ADocuments ys sitevmysteVnoer htm | 
[rn 






































图 6.80 设置 单元 格 背景 图 像 


第 12 步 ， 在 网 页 中 输入 和 设置 文本 。 将 插入 点 定位 到 需要 插入 文本 的 位 置 ， 然 后 输入 文本 即 可 。 | 
要 设置 文本 属性 ， 首 先 要 选 定 文本 。 在 【属性 】 面 板 中 设置 : 文本 的 颜色 为 深 色 ， 字 体 大 小 为 | 
12 像素 ,文本 【属性 】 面 板 中 的 各 项 设置 如 图 6.81 所 示 。 | 
在 该 页 面 中 运用 了 样式 maincontent， 使 用 样式 的 好 处 就 是 能 够 快速 便捷 地 控制 页 面 元 素 的 属性 ，| 
例如 ， 定 义 一 个 样式 maincontent， 代 码 如 下 : 
. maincontent { 
font-size: 12px: 
color: #663300: 
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图 6.81 设置 字体 属性 和 样式 


上 面 代码 就 表示 定义 元 素 的 字体 大 小 为 12 像素 ， 颜 色 为 #663300， 行 高 为 20px， 字 体 为 arial、 
| helvetica、sans-serif 中 的 一 种 ， 不 定义 文本 修饰 。 
| 定义 完毕 样式 ， 就 可 以 把 这 些 样式 应 用 到 网 页 中 任何 选中 的 文本 。 
第 13 步 ， 设 置 超 链接 文本 。 选 定 要 作为 超 链接 载体 的 文本 ， 在 【属性 】 面 板 中 【链接 】 文 本 框 
中 直接 输入 目标 网 页 文件 的 绝对 URL， 如 files/documnets.html。 
第 14 步 ， 完 成 页 面 设计 操作 ， 按 Ctrl+S 快捷 键 保存 文档 ， 然 后 按 F12 键 在 浏览 器 中 预览 ， 则 显 
示 效 果 如 图 6.82 所 示 。 














| 图 6.82 设置 字体 属性 和 样式 
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第 了 章 


制作 动态 网 页 


( 呈 视频 讲解 : 41 分 钟 ) 


动态 网 页 不 但 能 够 实现 复杂 的 动态 效果 ， 还 能 实现 友好 的 人 机 交互 ， 因 此 更 容易 引起 浏览 
者 的 兴趣 。Dreamweaver 提供 了 多 种 实现 动态 与 交互 网 页 的 功能 。 例 如 ， 通 过 行为 执行 指定 的 
动作 来 实现 各 种 动态 效果 。 本 章 将 结合 Dreamweaver 行为 、 将 效 和 jQuery 组 件 以 案例 的 形式 进 


行 介 绍 ， 


帮助 用 户 能 够 初步 制作 动态 网 页 效果 


【 学 习 重 点 】 


制作 跳 转 菜单 
制作 可 拖 动 对 象 
改变 对 象 显 示 属 性 

制作 交换 按钮 

制作 提示 对 话 杠 
显示 和 隐藏 元 素 

设计 动画 将 效 

设计 Tab 选项 卡 和 模 态 对 话 杠 


砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 





7.1 制作 跳 转 菜单 


跳 转 菜单 是 链接 的 一 种 特殊 形式 . 它 不 仅 丰富 了 网 页 中 超 链接 的 形式 , 同时 最 大 限度 地 节省 版 面 。 
作风 页 时 ， 知 果 页 面 布局 比较 紧张 可 以 使 用 它 将 一 些 不 太 重 要 的 链接 进行 归 类 集中 。 
| 在 Dreamweaver 中 ， 利 用 “ 跳 转 荣 单 ” 行 为 可 以 设计 弹出 式 下 拉链 接 列 表 。 下 拉 菜 单 中 的 每 个 选 
项 都 定义 一 个 超 链接 。 当 浏览 者 选择 菜单 中 的 选项 时 ， 就 如 同 单 击 网 页 中 的 超 链接 文本 一 样 ， 跳 转 到 
选项 所 定义 的 目标 网 页 。 当 然 ， 还 可 以 利用 它 链接 图 片 、 文 档 等 对 象 。 
【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 test.html。 将 鼠标 指针 定位 到 预定 义 位 置 ， 选 择 
【插入 了 人民 表单] 选择] 命令, 插入 一 个 空 的 下 拉 菜 单 控件 , 在 【属性 了 面板 中 设置 Name 为 menul， 
如 图 7.1 所 示 。 
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7.1 插入 空 菜 单 


| 第 2 步 ， 选 择 【 窗 口 】|【 行 为】 命令 ,打开 【 行 为 】 面 板 。 单 击 【 行 为 】 面 板 列表 框 上 面 的 昌 按 
| 钮 ， 在 打开 的 下 拉 菜单 中 选择 【 跳 转 菜单 】 行 为 ， 如 图 7.2 所 示 。 
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| 图 72 选择 【 跳 转 菜 单 】 行 为 











»244* 


第 7 章 制作 动态 网 页 一 3 [ 


1 

第 3 步 ， 打 开 【 跳 转 菜单 】 对 话 框 ， 如 图 7 3 所 示 ， 然 后 在 该 对 话 框 中 进行 设置 。 

第 4 步 , 在 [文本 ] 文 本 框 中 设置 项 目的 标题 。 | 
在 【选择 时 ， 转 到 URL 文本 框 中 设置 链接 网 页 
的 地 址 ， 如 http://www.baidu.com/， 或 者 直接 单 击 
【 浏览】 按钮 找到 链接 的 网 页 。 

第 5 步 ， 在 【打开 URL 于 】 下 拉 列 表 框 中 设 | .二 一 一 一 
置 打开 链接 的 窗口 。 如 果 选 中 【更 改 URL 后 选择 a 
第 一 个 项 目 】 复 选 框 ， 可 以 设置 在 跳 转 菜单 链接 文 口 更 XURL 选择 第 一 个 页 目 
件 的 地 址 发 生 错误 时 , 自动 转 到 菜单 中 第 一 个 项 目 
的 网 址 ， 如 图 7.4 所 示 。 

第 6 步 ， 设 置 完成 ， 单 击 面板 上 方 的 富 按 钮 ， 和 和 卫 本 基站 双开 
可 以 添加 新 的 链接 项 目 ， 然 后 按 第 5 步 介绍 的 方法 进行 设置 ， 最 后 设置 的 结果 如 图 7.5 所 示 。 当 选择 | 
【菜单 项 】 列 表 框 中 的 项 目 ， 然 后 单 击 面板 上 方 的 吕 按 钮 ， 可 以 删除 项 目 。 | 

















文本 FE 
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文本 ，[ 度 搜索 文本 天 多 失守 
六 择 时 ， 针 到 URL Nt577www Baidu oo 3 雪 拓 时 转 到 URL RitD:] /ww SOEOIL on 下 





! 
| 
! 
回回 | dl | 
| 
! 
| 
| 








打开 URL 于 | 主 窗口 | 3 于 URL 于 ED "| 
本 履 URL 后 所 第 一个 项 上 口 可 URL 后 地 皇 第 一 个 项 上 


图 7.4 设置 【 跳 转 菜单 】 对 话 框 图 7.5 设置 【 跳 转 菜 单 】 对 话 框 
容 提示 : 选择 已 经 添加 的 项 目 ， 然 后 单 击 面板 上 方 的 【向 上 ]】 < 或 者 【向 下 】 ~ 按钮 调整 项 目 在 跳 
转 菜单 中 的 位 置 。 | 


第 7 步 ,设置 完毕 ， 这 时 可 以 看 到 在 【行为 】 中 自动 定义 了 “ 跳 转 菜 单 ” 行 为 ， 根 据 需 要 设置 事 
件 类 型 ， 这 里 设置 为 onChange， 即 当 跳 转 菜单 的 值 发 生变 化 时 ， 将 触发 跳 转 行为 ， 如 图 7.6 所 示 。 
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图 7.6 定义 事件 类 型 
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| 第 8 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 可 以 看 到 一 个 跳 转 下 拉 菜 单 ， 当 选择 不 同 的 搜索 引擎 时 ， 
| 会 自动 跳 转 到 该 搜索 引擎 主页 ， 如 图 7.7 所 示 。 
| 


| Yahoo Seareh - we * | 


Finance ”Weather 











图 7.7 跳 转 菜单 演示 效果 


7.2 制作 自由 拖 动 层 


用 Dreamweaver 可 以 制作 出 具有 很 好 交互 性 的 网 页 ， 例 如 ， 利 用 拖 动 层 制作 拼图 游戏 。 但 是 在 
| Dreamweaver 中 ， 所 插入 的 层 ， 在 用 浏览 器 浏览 时 ， 一 般 情况 下 是 不 能 被 移动 的 ， 而 拼图 游戏 本 身 要 
| 求 每 张 图 片 都 能 够 自由 移动 。 要 解决 这 个 问题 ， 其 实 并 不 困难 ， 因 为 Dreamweaver 提供 了 一 个 “ 拖 动 
| AP 元 素 ”行为 ， 利 用 它 不 但 能 够 实现 层 的 拖 动 ， 还 能 为 每 个 层 设置 目标 位 置 的 坐标 值 。 在 浏览 网 页 
| 时 ， 只 要 拖 动 该 图 片 到 正确 的 位 置 附近 ， 图 片 就 会 被 自动 “ 吸 ” 到 坐标 点 上 。 下 面 利用 该 行为 介绍 拼 
| 图 游戏 的 制作 过 程 。 

【操作 步骤 】 

第 1 步 ， 在 制作 拼图 游戏 之 前 ， 首 先 要 找 一 幅 图 片 ， 并 利用 Photoshop 将 图 片 切 分 成 多 块 。 如 
图 7.8 所 示 将 一 张 完整 的 图 片 平均 分 成 9 块 。 


Ps 文体 fF) 状 沪 () 图 你) 图 呈 山 。 文字 m 选择 5) 认 哆 mm 六 国府 QiwW 和 动 I) =lol x 
于 于 参考 的 急 片 


















































| 图 7.8 制作 切片 
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淮 技巧 : 在 工具 箱 中 选择 【切片 选取 工具 】〗】， 在 工具 选项 [pss i Ban Bal 23m i | 
栏 中 单 击 【 划 分 〗 按 钮 ， 打 开 【 划 分 切片 对 攻 光 -| 启 唱 旺旺 [可 [| me ES， 
话 框 ， 选 中 【水 平 划分 为 】 复 选 框 ， 然 后 在 下 | . 
面 的 文本 框 中 输入 数字 3， 设 置 水 平分 为 3 栏 ; 
选中 【 委 直 划分 为 】 复 选 框 ， 然 后 在 下 面 的 文 
本 框 中 输入 数字 3， 设 置 委 直 分 为 3 栏 ， 设置 
如 图 7.9 所 示 。 
单 击 【 确 定 】 按 钮 关闭 【划分 切片 对 话 框 ， “了 | 
此 时 Photoshop 会 自动 把 整个 图 片 切 分 为 9 块 。 EE | 
| 


第 2 步 ， 在 Photoshop 中 选择 【文件 】| 【存储 为 Web 所 用 格式 】 命 令 ， 打 开 【 存 储 为 Web 所 用 
格式 】 对 话 框 ， 如 图 7.10 所 示 。 
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| 
7.10 【存储 为 Web 所 用 格式 】 对 话 框 | 
| 


第 3 步 ， 保 存 默认 设置 ， 单 击 【 存 储 】 按 钮 ， 打 开 【 将 优化 结果 存储 为 】 对 话 框 ， 在 【文件 名 】 | 
文本 框 中 设置 网 页 的 名 称 , 建议 以 英文 字母 配合 数值 进行 命名 ; 在 【格式 】 下 拉 列 表 框 中 选择 【HTML | 
和 图 像 】 选 项 ， 在 【设置 】 下 拉 列 表 框 中 保持 默认 设置 ， 在 【切片 下拉 列表 框 中 选择 【所 有 用 户 切 | 
片 】 选 项 ， 详 细 设 置 如 图 7.11 所 示 。 | 

第 4 步 , 单 击 【 保 存 】 按钮, 输出 并 存储 切片 和 网 页 , 可 以 在 当前 站 点 目录 下 看 到 所 存储 的 HTML | 
文档 和 images 文件 夹 ， 在 images 文件 夹 中 保存 着 所 有 的 用 户 切片 图 像 ， 直 接 双击 HTML 文件 名 , 即 | 
可 在 网 页 浏览 器 中 预览 网 页 效果 ， 如 图 7.12 所 示 。 | 

第 5 步 ， 启 动 Dreamweaver， 打 开 使 用 Photoshop 输出 的 HIML 文档 。 可 以 看 到 该 页 面 为 表格 布 | 
局 页 面 ， 如 图 7.13 所 示 。 | 
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图 7.12 输出 为 网 页 
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7.13 ”使 用 Dreamweaver 打开 Photoshop 输出 页 面 
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| 

第 6 步 ， 选择 【文件 】|【 另 存 为 】 命 令 ， 把 index.html 另存 为 pintu.html。 然 后 切换 到 代码 视图 ， | 
使 用 CSS 把 表格 布局 的 图 像 转换 为 图 层 布局 图 像 ， 如 图 7.14 所 示 ， 具 体 源 代码 可 以 参考 本 书 示例 源 | 
代码 。 | 
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图 7.14 把 表格 转换 为 图 层 


安 提示 : 在 Dreamweaver 以 前 的 版 本 中 ， 可 以 快速 把 表格 布局 转换 为 图 层 布局 。 方法 是 : 选择 【 修 
改 】|【 转 化 〗|【 表 格 到 层 〗 命 令 ， 把 插入 的 表格 图 像 文件 转换 为 层 布局 网 页 。 


第 7 步 ， 选 择 【窗口 】|【 行 为 】 命 令 ， 打 开 【 行 为 】 面 板 。 
第 8 步 ， 在 【标签 选择 器 】 内 选择 整个 网 页 标签 <body>， 再 单 击 【 行 为 】 面 板 中 的 办 按钮 ， 弹 
出 一 个 菜单 ， 在 菜单 中 选择 【 拖 动 AP 元 素 】 命 令 ， 打 开 【 拖 动 AP 元 素 】 对 话 框 ， 如 图 7.15 所 示 。 
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图 7.15 【 拖 动 AP 元 素 】 对 话 杠 
第 9 步 ， 在 【AP 元 素 】 下 拉 列 表 框 中 选择 要 设置 的 层 。 在 本 例 中 ， 由 于 插入 了 9 个 层 ， 在 该 对 | 
话 框 中 依次 选择 这 9 个 层 ， 并 分 别 设置 其 目标 位 置 的 坐标 值 等 参数 。 
第 10 步 ， 在 【移动 】 下 拉 列 表 框 中 选择 【不 限制 】 选 项 。 该 列表 框 提供 了 两 种 拖 动 方式 。 
回 【不 限制 】 为 不 受 限制 拖 动 ， 可 将 层 拖 动 到 浏览 器 的 任何 位 置 。 


. 249 . 








砚 贡 设计 与 网 站 建设 从 入 门 到 精通 





| 回 【限制 】 为 受 限制 拖 动 ， 在 该 对 话 框 中 ， 可 利用 【上 】、【 下 】、【 左 】、【 右 】 选 项 为 
| 拖 动 层 设置 一 个 矩形 范围 ， 这 样 浏览 者 就 只 能 在 该 范围 内 拖 动 层 。 

| 第 11 步 ,在 【放下 目标 】 选 项 组 的 【 左 】 和 【上 】 文本 框 中 输入 层 目标 位 置 的 坐标 值 。 它 是 指 
| 每 个 图 片 在 目标 位 置 时 ， 其 左上 角 的 坐标 值 。 


| 窟 提示: 如果 不能 确定 该 坐标 值 ， 可 用 下 面 的 方法 来 获取 坐标 值 。 

| 选择 【查看 〗|【 标 尺 〗|【 显 示 ]〗 命令， 在 窗口 中 显示 出 标尺 ， 并 将 鼠标 指针 移 到 单元 格 的 

| 左上 角 ， 记 下 标尺 上 虚线 所 对 应 的 数值 。 其 中 顶部 标尺 显示 的 是 【 左 】 了 文本 框 的 值 ， 左 面 标 
尺 显示 的 是 【 右 】 文 本 框 的 值 . 

回 先 将 层 拖 到 对 应 的 单元 格 中 ， 并 用 键盘 上 的 方向 键 调整 好 层 的 位 置 ; 然后 打开 【 拖 动 AP 元 
素 〗 对 话 框 ， 单 击 【取得 目前 位 置 】 按 钮 ， 即 可 自动 获取 该 图 片 的 坐标 值 。 

第 12 步 ， 在 【 靠 齐 距离 】 文 本 框 中 设置 目标 点 的 允许 误差 范围 。 例 如 设 为 9， 表示 如 果 图 片 被 拖 

| 动 到 距离 目标 位 置 小 于 50 个 像素 时 ， 就 认为 已 经 拖 动 到 了 目标 点 上 。 完 成 对 话 框 设置 如 图 7.16 所 示 。 
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图 7.16 设置 拖 动 参数 


第 13 步 ， 重 复 第 8 步 ~ 第 12 步 操作 ， 分 别 为 其 他 8 个 层 设置 移动 操作 行为 。 最 后 ， 设 置 拖 动 触 
发 事件 为 onLoad， 如 图 7.17 所 示 。 
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图 7.17 定义 触发 事件 


! 

第 14 步 ， 完 成 设置 后 ， 保 存 文档 ， 按 F12 键 预览 页 面 ， 效 果 如 图 7.18 所 示 。 如 果 想 把 游戏 做 得 
| 更 好 一 些 ， 可 在 其 中 加 入 一 些 动画 以 及 设置 【开始 】、【 重 玩 】 和 【结束 】 等 按钮 。 

| 【拓展 】 经 过 以 上 设置 后 ， 基 本 上 已 经 能 够 实现 所 需要 的 功能 了 。 如 果 需 要 对 层 进 行 更 进一步 的 
| 设置 ， 例 如 层 被 拖 动 后 的 层次 、 拖 动 到 目标 点 后 引发 的 动作 等 ， 可 单 击 【 高 级 】 标 签 ， 打 开 【 高 级 】 
| 选项 卡 ， 如 图 7.19 (a) 所 示 。 
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图 7.18 制作 的 拼图 游戏 效果 


在 该 选项 卡 中 ， 可 设置 的 选项 如 下 。 
拖 动 控制 点 : 该 下 拉 列 表 框 用 于 设置 可 拖 动 的 区 域 ， 其 默认 值 为 【整个 元 素 】， 即 在 该 图 
片上 的 任何 位 置 都 可 以 拖 动 。 如 果 选 择 了 【元 素 内 的 区 域 】 选 项 ， 则 对 话 框 如 图 7.19 (b) 
所 示 。 列 表 框 右 侧 的 【 左 】、【 上 】、【 宽 】 和 【高 】 文 本 框 用 于 确定 拖 动 区 域 在 图 片上 
的 位 置 ， 其 中 【 左 】 和 【上 文本 框 用 于 定位 拖 动 区 域 距 图 片 左 边 和 项 边 的 距离 ，【 宽 】 
和 【高 】 文 本 框 用 于 设置 拖 动 区 域 的 宽度 和 高 度 。 
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(a) 拖 动 整个 层 (b) 拖 动 层 内 指定 区 域 
7.19 【高 级 】 选 项 卡 








拖 动 时 :在 该 选项 组 中 ， 如 果 不 选中 【将 元 素 置 于 顶层 ， 然 后 】 复 选 框 ， 在 拖 动 层 时 将 不 | 


改变 层 的 生 放 次 序 ， 这 意味 着 它 有 可 能 被 其 他 层 遗 盖 ， 如 果 选 中 该 复 选 杠 ， 并 在 后 面 的 下 
拉 列 表 框 中 选择 【 留 在 最 上 方 】 选 项 ， 则 层 在 拖 动 时 将 处 于 最 顶层 ， 释 放 鼠 标 后 ， 该 层 也 
将 变 为 顶层 ; 如果 选择 【恢复 z 轴 】 选 项 ， 则 层 在 被 拖 动 时 处 于 顶层 ， 放 开 鼠 标 指针 后 将 恢 
复原 来 的 层次 。 
呼叫 JavaScript: 该 文本 框 用 于 调用 JavaScript。 可 以 在 其 后 面 的 文本 框 中 输入 完整 的 JavaScript 
语句 。 同 时 该 选项 也 可 进行 某 函 数 的 调用 。 在 拖 动 层 时 系统 将 反复 执行 所 输入 的 语句 。 
放下 时 ， 呼 叫 JavaScript: 用 于 在 释放 鼠标 时 调用 JavaScript 语句 。 可 以 在 此 文本 框 中 输入 
JavaScript 语句 或 其 他 函数 。 所 输入 的 语句 或 函数 ， 将 在 图 形 被 拖 动 完成 后 执行 。 如 果 选 中 
【只 有 在 靠 齐 时 】 复 选 框 ， 则 只 有 当 图 形 被 拖 动 到 目标 位 置 后 才能 执行 所 输入 的 语句 。 
利用 【高 级 】 选 项 卡 中 提供 的 这 种 可 调用 JavaScript 语句 的 功能 ， 可 制作 巧妙 的 换 图 效果 。 例 如 ， 
当 拖 动 该 层 到 目标 位 置 时 ， 该 图 片 立 刻 切换 为 其 他 图 片 。 
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7.3 改变 显示 属性 


在 Dreamweaver 中 ， 利 用 “改变 属性 ”行为 可 以 动态 地 改变 指定 对 象 的 某 些 属性 ， 这 些 属 性 包括 

Note | 背景 颜色 、 尺 寸 和 背景 图 片 等 。 制 作 网 页 时 ， 如 果 用 这 种 行为 设置 一 些 特殊 的 区 域 ， 例 如 ， 当 鼠标 指 
| 针 经 过 某 个 区 域 时 ， 该 区 域 的 背景 颜色 会 立即 发 生变 化 ， 当 鼠标 指针 离开 后 又 恢复 为 原来 的 背景 色 。 
下 面 通过 一 个 实例 介绍 增加 该 行为 的 方法 。 

【操作 步骤 】 

第 1 步 ， 打 开本 节 示 例 中 的 orig.html 文件 ， 另 存 为 effecthtml。 设 计 当 鼠 标 经 过 缩 略图 时 ， 高 亮 

第 2 步 ， 选 中 <div id="apDivl"> 标 签 ， 单 击 【行为 】 面 板 中 的 二 按钮 ， 从 弹出 的 行为 菜单 中 选择 
【改变 属性 】 命 令 ， 打 开 【 改 变 属性 】 对 话 框 ， 如 图 7.20 所 示 。 
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图 7.20 打开 【改变 属性 】 对 话 框 


第 3 步 ， 在 【元 素 类 型 】 下 拉 列 表 框 中 设置 要 更 改 其 属性 的 对 象 的 类 型 。 实 例 中 要 改变 AP 元 素 
的 属性 ， 因 此 选择 DIV。 

第 4 步 ， 在 【元 素 ID】 下 拉 列 表 框 中 显示 网 页 中 所 有 该 类 对 象 的 名 称 ， 如 图 中 会 列 出 网 页 中 所 
有 的 AP 元 素 的 名 称 。 在 其 中 选择 要 更 改 属性 的 AP 元 素 的 名 称 ， 如 DIV“apDiv1”。 

第 5 步 ， 在 【属性 】 选 项 组 中 选择 要 更 改 的 属性 ， 因 为 要 设置 背景 ， 所 以 选择 border。 如 果 要 更 
改 的 属性 没有 出 现在 下 拉 菜单 中 , 可 以 在 [输入 】 
文本 框 中 手动 输入 属性 。 

第 6 步 ， 在 【新 的 值 】 文 本 框 中 设置 属性 新 
值 。 这 里 要 定义 AP 元 素 的 边框 线 ， 设 置 为 solid 
2px red， 如 图 7.21 所 示 。 

第 7 步 ， 设 置 完成 后 单 击 【确定 】 按 钮 。 在 
【行为 】 面 板 中 确认 触发 动作 的 事件 是 否 正确 ， 
这 里 设置 为 onpMouseover， 如 果 不 正确 ， 需 要 在 
事件 菜单 中 选择 正确 的 事件 ， 如 图 7.22 所 示 。 图 721 设置 【改变 属性 】 对 话 框 
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图 7.22 修改 事件 类 型 


第 8 步 ， 再 选中 ap Divl 元 素 ， 继 续 添加 一 个 “改变 属性 ”行为 ， 设 计 鼠 标 移出 该 元 素 后 恢复 默 
认 的 边框 效果 ， 设 置 【 改 变 属性 】 对 话 框 如 图 7.23 所 示 。 
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图 7.23 设置 【改变 属性 】 对 话 框 
第 9 步 ， 设 置 完 成 后 单 击 【 确 定 】 按 钮 。 在 【行为 】 面 板 中 确认 触发 动作 的 事件 是 否 正确 ， 这 里 | 
设置 为 onMouseout， 即 设计 当 鼠 标 离开 对 话 框 时 ， 恢 复 默 认 的 无 边框 状态 ， 如 图 7.24 所 示 。 
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图 7.24 修改 事件 类 型 


第 10 步 ， 保 存 并 预览 网 页 。 当 鼠标 移 到 对 话 框 上 时 会 显示 红色 边框 线 ， 以 提示 用 户 注意 ， 当 鼠 
标 移出 对 话 框 时 则 隐藏 边框 线 ， 恢 复 默 认 的 效果 ， 演 示 效 果 如 图 7.25 所 示 。 
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图 7.25 改变 属性 效果 


7.4 制作 翻转 按钮 


在 Dreamweaver 中 ,利用 “交换 图 像 ”行为 可 通过 改变 图 片 数据 源 的 属性 将 原 图 片 蔡 换 为 另 一 幅 
图 片 。 如 果 要 建立 一 个 可 翻转 的 链接 按钮 ， 用 以 链接 到 某 个 网 站 ， 可 以 选择 该 行为 。 当 移动 鼠标 指针 


| 到 交换 图 像 按 钮 上 时 ， 即 可 变换 按钮 图 片 ， 单 击 该 按钮 又 可 以 链接 到 指定 的 网 页 上 。 


【操作 步骤 】 

第 1 步 ， 打 开本 节 示 例 中 的 orig html 文件 ， 另 存 为 effecthtml。 设 计 当 鼠 标 经 过 缩 略 图 时 ， 显 示 
翻转 图 像 。 

第 2 步 ， 将 鼠标 指针 定位 到 文档 中 要 插入 链接 图 片 的 位 置 。 选 择 【 插 入 】|【 图 像 】|【 图 像 】 命 
令 ， 在 打开 的 【选择 图 像 源 文件 】 对 话 框 中 选择 要 插入 的 图 片 ， 完 成 后 单 击 【 确 定 】 按 钮 。 

第 3 步 ， 选 中 该 图 片 ， 并 打开 【属性 】 面 板 ， 在 【链接 】 文 本 框 中 输入 要 链接 的 URL 地 址 ， 并 
命名 图 像 ， 即 设置 图 像 的 id 属性 值 ， 如 图 7.26 所 示 。 
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图 7.26 设置 链接 地 址 
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第 4 步 ， 选 择 【 窗 口 】|【 行 为】 命令 ， 打 开 【 行 为 】 面 板 ， 并 单 击 其 中 的 加 按钮 ， 在 打开 的 菜 
单 中 选择 【交换 图 像 】 命 令 ， 如 图 7.27 所 示 。 
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图 7.27 选择 【交换 图 像 】 命 令 


第 5 步 ， 打 开 【 交 换 图 像 】 对 话 框 ， 如 图 7.28 所 示 ， 单 击 【 浏 览 】 按 钮 ， 在 【选择 图 像 源 文件 】 
对 话 框 中 选择 要 替换 的 按钮 图 片 。 
第 6 步 , 完成 后 单 击 【确定 】 按钮 返回 到 【 交 
换 图 像 】 对 话 框 。 
在 【交换 图 像 】 对 话 框 中 ， 有 两 个 复 选 框 可 供 E 
设置 。 语 守 的 拉 入 rnagee/ 0001 
回 “预先 载 入 图 像 : 选中 该 复 选 框 后 ， 在 浏览 sna 
网 页 时 系统 同时 将 该 图 片 载 入 缓存 中 , 而 A 
不 是 在 调用 JavaScript 时 才 下 载 ， 以 防止 
在 图 片 切换 时 延 时 。 图 7.28 选择 要 替换 的 按钮 图 片 
回 。 鼠标 滑 开 时 恢 : 选中 该 复 选 框 后 ， 
当 鼠 标 指针 移 时 ， 将 恢复 原来 的 按钮 图 片 。 
第 7 步 ， 单 击 【确定 】 按 钮 ， 返 回 【行为 】 面 板 。 此 时 便 可 看 到 所 加 入 的 “交换 图 像 ”行为 ， 其 
默认 的 触发 事件 为 onMouseOver， 即 当 鼠 标 指针 移 过 图 片 时 触发 换 图 动作 ， 如 图 7.29 所 示 。 
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图 7.29 增加 行为 后 的 【行为 】 面 板 
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| 容 提示 : 在 【交换 图 像 】 对 话 框 中 ， 如 果 选 中 【鼠标 滑 开 时 恢复 图 像 〗】 复 选 框 ， 在 【行为 了 面板 中 

| 将 加 入 一 个 新 的 行为 一 【恢复 交换 图 像 】， 如 图 7.29 所 示 。 其 默认 的 触发 事件 为 

| onMouseOut， 它 的 意思 是 当 饼 标 指针 移 开 时 触发 动作 。 正 是 该 行为 使 按钮 在 鼠标 指针 移 
傅 站 | 开 时 自动 恢复 原来 的 样子 。 


yote 第 8 步 ， 设 置 完 成 后 ， 按 F12 键 ， 打 开 浏 览 器 预览 。 此 时 如 果 按 上 述 方法 正确 设置 ， 则 将 鼠标 指 
针 移 到 按钮 上 时 ， 即 可 改变 按钮 的 外 观 ， 如 图 7.30 所 示 。 
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图 7.30 ”按钮 换 图 效果 


在 使 用 【交换 图 像 】 行 为 时 必须 注意 ， 由 于 该 行为 所 改变 的 只 是 图 片 的 信息 源 属性 ， 即 SRC 属 
性 ， 所 以 要 切换 的 图 片 必须 与 原 图 片 具 有 相同 的 尺寸 ， 以 免 图 片 在 切换 时 变形 。 


7.5 ”制作 提示 对 话 框 


Dreamweaver 的 “弹出 信息 ”行为 可 以 用 来 显示 指定 的 信息 ， 例 如 当 网 站 中 某 个 网 页 正在 更 新 ， 
此 时 便 可 在 主页 中 ， 连 接 该 网 页 的 文字 、 图 片 或 在 导航 栏 按钮 上 加 入 该 行为 。 单 击 该 链接 时 ， 系 统 将 
| 弹出 一 个 对 话 框 提 示 稍 后 再 访问 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 
存 为 test.html。 在 空白 页 面 中 设计 一 个 简单 的 表 
单 ， 如 图 7.31 所 示 。 

第 2 步 , 在 主页 中 选中 要 在 其 上 加 入 “弹出 
信息 ”行为 的 文字 、 图片 或 导航 栏 按钮 . 选择 【 窗 ay EPESES 
口 】I【 行 为】 命令 ,打开 【行为 】 面 板 。 图 7.31 设计 表单 
| 第 3 步 ， 单 击 【行为 】 面 板 中 的 + 按钮 ， 
| 在 打开 的 菜单 中 选择 【弹出 信息 】 命 令 ， 打 开 【 弹 出 信息 】 对 话 框 ， 如 图 7.32 所 示 。 

第 4 步 , 在 【消息 】 列 表 框 中 输入 要 显示 的 提示 信息 , 如 “确认 要 提交 输入 的 姓名 和 职业 信息 。”。 

第 5 步 ， 单 击 【 确 定 】 按 钮 ， 返 回 【 行 为 】 面 板 。 此 时 可 看 到 面板 中 新 加 入 的 行为 ， 其 默认 的 触 
发 事件 为 onClick， 即 单 击 该 对 象 后 的 触发 事件 。 如 果 想 使 用 其 他 触发 事件 的 动作 ， 可 单 击 【事件 】 
列表 的 向 下 三 角 按 钮 ， 在 弹出 的 菜单 中 选择 一 个 动作 ， 例 如 onMouseOver。 

第 6 步 ， 完 成 设置 后 按 F12 键 预览 。 在 页 面 中 单 击 【提交 ]】 按 钮 ， 便 可 弹出 含有 指定 信息 的 对 话 
框 ， 如 图 7.33 所 示 。 
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图 7.32 设置 【弹出 信息 】 对 话 框 图 7.33 弹出 提示 对 话 框 


安 提示 : 在 “弹出 信息 ”行为 所 显示 的 JavaScript 提示 对 话 框 中 只 有 一 个 【确定 】〗 按 钮 ， 所 以 它 只 | 
能 作为 一 个 提示 对 话 框 来 使 用 ， 而 不 能 进行 更 进一步 的 交互 操作 。 | 
| 


7.6 显示 和 隐藏 元 素 


Dreamweaver 中 的 “显示 -隐藏 元 素 ”行为 具有 显示 和 隐藏 元 素 的 功能 ， 通 过 事件 隐藏 或 显示 所 
指定 的 对 象 ， 一 般 常 被 用 作 与 网 页 交互 时 的 信息 。 例 如 ， 当 鼠标 指针 指向 某 个 图 片 和 文字 时 ， 即 可 显 
示 有 关 详 细 信息 。 

利用 “显示 -隐藏 元 素 ” 行 为 ， 可 在 站 点 的 主页 上 ， 为 每 个 导航 按钮 所 链接 的 网 页 设置 一 个 包含 
该 网 页 主要 信息 的 层 ， 并 为 每 个 导航 按钮 加 入 行为 。 在 浏览 网 页 时 ， 层 一 开始 处 于 隐藏 状态 ， 只 有 将 鼠 
标 指针 指向 该 导航 按钮 时 , 才 可 显示 该 层 ; 移 开 按钮 后 层 自动 消失 , 单 击 该 按钮 又 可 跳 转 到 目标 网 页 上 。 

【操作 步骤 】 

第 1 步 ， 打 开本 节 示 例 中 的 orig.html 文件 ， 另 存 为 effecthtml。 本 例 将 利用 “显示 -隐藏 元 素 ” 行 
为 制作 切换 面板 。 

第 2 步 , 单 击 【代码 】 视图, 切换 到 代码 编辑 窗口 下 ， 在 <body> 标 签 中 添加 如 下 4 行 代码 ， 如 图 7.34 
所 示 。 

<div id="apDiv1"><img src="images/el png" /></div> 

<div id="apDiv2"><img ste="images/e2.png" /></div> 

<div id="apDiv3"><img sre="images/1.png" /></div> 

<div id="apDiv4"><img src="images/2.png" /></div> 
































7.34 ”设计 标签 结构 
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第 3 步 , 选中 <div id="apDiv3">, 新 建 CSS 规则 , 设置 定位 样式 , Position: absolute、Width: 1003px、 
Height: 580px、Z-Index: 4、Left: 0px、Top: 89px， 如 图 7.35 所 示 。 
第 4 步 ， 选 中 <div id="apDiv4">， 新 建 CSS 规则 ， 设 置 定位 样式 ， 设 置 参 数 与 apDiv3 相同 ,不 


| 同 点 是 Z-Index: 3， 即 让 apDiv3 显示 在 上 面 ， 如 图 7.35 所 示 。 


第 5 步 ， 选 中 <div id="apDiv1">， 在 CSS 样式 面板 中 单 击 【新 建 CSS 规则 】 按 钮 ， 设 置 定位 样式 ， 


| Position: absolute、Width: 56px、Height: 31px、Z-Index: 2、Left: 500px、Top: 37px， 如 图 7.36 所 示 。 














图 7.35 设计 <div id="apDiv3"> 标 签 样式 
































图 7.36 设计 <div id="apDiv1"> 标 签 样式 


第 6 步 ， 选 中 <div id="apDivl">， 然 后 在 【行为 】 面 板 中 单 击 二 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 
【显示 -隐藏 元 素 】 选 项 ， 打 开 【 显 示 - 隐 藏 元 素 】 对 话 框 ， 如 图 7.37 所 示 。 


ecto 




















7.37 打开 【显示 -隐藏 元 素 】 对 话 框 


第 7 步 ， 在 【元 素 】 列 表 中 选中 相应 的 AP 元 
素 并 设置 元 素 的 显示 或 隐藏 属性 ， 例 如 ， 选 中 div 
"apDivl" 元 素 ， 然 后 单 击 【 隐 藏 】 按 钮 ， 表 示 隐 藏 
该 AP 元 素 ; 选中 div " apDiv 2" 元 素 ， 单 击 【显示 】 


| 按钮 ， 表 示 显 示 该 AP 元 素 。 而 【默认 】 按 钮 表示 


使 用 【属性 】 面 板 上 设置 的 AP 元 素 的 显示 或 隐藏 
属性 。 最 后 ， 设 置 <div id="apDiv3"> 隐 藏 ， 而 <div 
id="apDiv4"> 显 示 ， 详 细 设 置 如 图 7.38 所 示 。 
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图 7.38 设置 【显示 -隐藏 元 素 】 对 话 框 
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| 
第 8 步 ， 设 置 完成 后 单 击 【 确 定 】 按 钮 。 在 【行为 】 面 板 上 查看 行为 的 事件 是 否 正确 。 如 果 不 正 | 
确 ， 单 击 事件 旁 的 向 下 按钮 ， 在 弹出 的 菜单 中 选择 相应 的 事件 。 在 本 例 中 设置 鼠标 事件 为 onClick， | 
如 图 7.39 所 示 。 


人 至 | 白人 [| SR 和 























图 7.39 设置 事件 响应 类 型 


第 9 步 , 选中 <div id="apDiv2">， 由 于 <div id="apDiv2"> 被 <div id="apDiv1"> 标 签 覆 盖 住 ,在 【 设 
计 】 视 图 下 看 不 到 该 标签 ， 因 此 单 击 【代码 】 视 图 ， 在 【代码 】 视 图 下 拖 选 <div id="apDiv2"> 标 签 的 | 
完整 结构 ， 如 图 7.40 所 示 。 






JPG-” mdth=-1003” height="580" /)¢/dio> 
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7.40 拖 选 <div id="apDiv2"> 标 签 


第 10 步 ， 单 击 【 行 为 】 面 板 中 的 +4 按钮， 从 中 选择 【显示 -隐藏 元 素 】 选 项 。 在 打开 的 【显示 - | 
隐藏 元 素 】 对 话 框 中 选中 相应 的 AP 元 素 并 设置 元 素 的 显示 或 隐藏 属性 ， 具 体 设 置 如 图 7.41 所 示 。 | 





图 7.41 设置 【显示 -隐藏 元 素 】 对 话 框 
第 11 步 ， 单 击 【确定 】 按 钮 后 ， 在 【行为 】 面 板 中 将 鼠标 事件 更 改 为 onClick， 如 图 7.42 所 示 。 
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第 12 步 ， 设 置 完 成 后 保存 为 页 面 ， 浏 览 效果 如 图 7.43 所 示 。 当 单 击 【 


图 7.42 设置 事件 响应 类 型 
台 】 按 钮 ， 则 会 切换 到 


选 台 页 面 ， 此 时 按钮 显示 为 “返回 "， 如 果 单 击 【 返 回 】 按 钮 ， 则 返回 到 前 面 页 面 。 
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MW 当 璀 坑 误 : 也 0 述 台 ”四 逢 外 政 听 剖 我 的 以 京介 不 二 性 放 | 到 录 注册 


图 7.43 显 隐 控制 按钮 
容 提示 : 为 了 便于 参考 ， 下 面 给 出 行为 的 触发 事件 的 动作 、 说 明 列表 ， 如 表 7.1 所 示 。 
表 7.1 行为 动作 说 明 





动作 说 明 
onAbort 中 断 对 象 载 入 时 
onAfterUpda 对 象 更 新 之 后 
onBeforeUpd 对 象 更 新 之 前 
onBlur 取消 选中 对 象 时 
onBounce 选 框 中 的 内 容 到 达 选 框 边界 时 
onChang 更 改 页 面 上 的 值 时 
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续 表 | 

动作 说 明 | 
onClick 单 击 对 象 | 
onDblClick 双击 对 象 
onEmor 载 入 页 面 或 图 像 期 间 出 错 
onFinish 选 杠 成 分 的 内 容 完成 一 个 循环 
onFocus 选中 指定 对 象 时 | 
onHelp 调用 帮助 时 | 
onKeyDown 按 下 键盘 任意 键 时 | 
onKeyPress 按 下 并 释放 键盘 任意 键 时 | 
onKeyUp 按 下 键盘 任意 键 后 释放 时 | 
onLoad 图 像 或 页 面 载 入 完成 时 | 
onMouseDown 按 下 鼠标 指针 键 时 | 
onMouseMove 鼠标 指针 在 指定 对 象 上 移动 时 | 
onMouseOut 鼠标 指针 离开 指定 对 象 时 | 
onMouseOver 鼠标 指针 刚 开始 指向 指定 对 象 时 | 
onMouseUp 释放 按 下 的 鼠标 指针 键 | 
onMove 移动 窗口 或 框架 时 | 
onReadyStateChange 指定 对 象 状态 改变 时 | 
onReset 将 表单 重 设 为 默认 值 时 | 
onResize 重 调 浏览 器 窗口 或 框架 大 小 时 | 
onRowEnter 更 改 绑 定数 据 源 的 当前 记录 指针 时 | 
onRowExit 将 要 更 改 绑 定数 据 源 的 当前 记录 指针 时 | 
onScroll 上 下 拖 动 浏览 器 窗口 中 的 滚动 条 时 | 
onSelect 选 定 文本 区 中 的 文本 时 | 
onStart 选 框 成 分 中 的 内 容 开始 一 个 循环 时 | 
onSubmit 提交 表单 时 | 
ontinload 印 载 页 面 时 | 


7.7 制作 高 亮 显示 文本 


高 亮 特效 指 的 是 任何 调用 该 方法 的 对 象 都 被 设置 为 高 亮 显示 效果 ， 即 设置 背景 色 为 高 亮 显示 
后 再 恢复 默认 样式 。 这 种 效果 常用 来 设计 交互 提示 作用 ， 如 鼠标 经 过 数据 行 时 ， 表 格 行星 现 高 
效果 ， 或 者 鼠标 单 击 目标 对 象 时 ， 让 目标 对 象 高 亮 显示 一 下 ， 以 示 界 面 友 好 。 

本 示例 利用 jQuery 高 亮 特效 设计 段落 文本 在 鼠标 经 过 时 ， 呈 现 高 亮 闪现 效果 ， 以 增强 文本 的 互 
动 特性 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 打 开本 节 示 例 中 的 orig.html 文件 ， 另 存 为 effecthtml。 在 本 示例 中 
设计 一 个 数据 表格 版 面 ， 当 鼠标 经 过 时 ， 定 义 数据 行 能 够 高 亮 闪现 一 下 ， 以 提示 用 户 留 意 和 注意 。 

第 2 步 ， 把 光标 置 于 数据 行 第 1 行 ， 然 后 拖 选 第 1 行 ， 在 【属性 】 面 板 中 定义 第 1 行 <tr> 标 签 的 
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了 D 值 为 ， 如 图 7.44 所 示 。 
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图 7.44 设置 文本 为 二 级 标题 
第 3 步 ， 以 同样 的 方式 ， 分 别 拖 选 第 2 行 、 第 3 行 、 第 4 行 等 ， 在 【属性 】 面 板 中 分 别 设置 ID 
值 为 亿 、t3、 妇 等 ， 如 图 7.45 所 示 。 
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7.45 “定义 标题 样式 


第 4 步 ， 选 中 第 2 行 标签 <trid="t1">， 选择 【窗口 1【 行 为 】 命 令 , 打开 【行为 】 面 板 ， 单 击 加 
号 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【效果 】| Highlight 命令 ， 如 图 7.46 所 示 。 

第 5 步 ， 打 开 Highlight 对 话 框 ， 设 置 【目标 元 素 】 为 “< 当前 选 定 内 容 >”, 【效果 持续 时 间 】 为 
1000ms， 即 一 秒 钟 : 设置 【可 见 性 】 为 hide， 即 效果 结束 后 隐藏 元 素 ; 设置 【颜色 】 为 #fff99， 即 定 
义 高 亮 颜色 为 亮 黄色 ， 设 置 如 图 7.47 所 示 。 设 置 完毕 ， 单 击 【 确 定 】 按 钮 完成 操作 。 
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图 7.46 选择 Highlight 命令 | 
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图 7.47 设置 Highlight 对 话 框 


第 6 步 ， 在 【行为 】 面 板 中 可 以 看 到 新 增加 的 行为 ， 单 击 左 侧 的 onClick， 从 弹出 的 下 拉 菜单 中 
选择 onMouseOver， 即 设计 当 鼠 标 经 过 正文 区 域 时 ， 将 触发 高 亮 特效 ， 设 置 如 图 7.48 所 示 。 | 
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.48 ”修改 触发 事件 


第 7 步 ， 继 续 模仿 第 4、5、6 步 操作 ， 再 添加 一 个 Highlight 特效 ， 设 置 如 图 7.49 所 示 。 其 中 设 
置 【目标 元 素 】 为 “< 当前 选 定 内 容 >”,【 效 果 持 续 时 间 】 为 00ms， 即 十 分 之 一 秒 钟 ; 设置 【可 见 性 】 
为 shbow， 即 效果 结束 后 显示 元 素 ; 设置 【颜色 】 为 #ffffppg9， 即 定义 高 亮 颜色 为 亮 黄色 ， 然 后 单 击 【 确 
定 】 按 钮 完成 操作 。 

第 8 步 ， 在 【行为 】 面 板 中 可 以 看 到 新 增加 的 行为 ， 单 击 左 侧 的 onClick， 从 弹出 的 下 拉 菜 单 中 
选择 onMouseOver， 即 设计 当 鼠 标 经 过 正文 区 域 时 ， 将 触发 高 亮 特效 ， 然 后 单 击 向 下 箭头 按钮 ， 把 当 
前 行为 移 到 下 面 ， 让 该 行为 在 上 一 步 定 义 的 行为 之 后 发 生 。 
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| 第 9 步 ， 按 Ctrlts 快捷 键 保存 页 面 ， 此 时 Dreamweaver 会 弹出 对 话 框 ， 提 示 保 存 两 个 插件 文件 ， 
| 如 图 7.50 所 示 。 单 击 【 确 定 】 按 钮 ， 保 存 jquery-1.8.3.min.js 和 jquery-ui-effects.custom.min.js 两 个 库 
| 文 
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图 7.49 设置 Highlight 对 话 框 7.50 ”保存 插件 所 需要 的 库 文件 


第 10 步 ， 以 同样 的 方式 为 其 他 数据 行 绑 定 高 亮 隐藏 和 显示 特效 。 
第 11 步 ， 在 浏览 器 中 预览 ， 当 鼠标 移 到 摘要 正文 上 时 ， 文 字 会 高 亮 显示 并 逐步 隐藏 ， 然 后 再 恢 
复 正常 显示 ， 演 示 效 果 如 图 7.51 所 示 。 


中 生日 期 
197814 137563443 

197757 13893212 北京 市 朝阳 区 笛 首 办 事 处 
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19771131 139432567 北京 东城 区 防 逢 办 


197873 1355613234 北京 深 华 新 股份 有 限 公司 
1978619 1368395322 


1978922 13567890 
197813 1354983611 6 区 将 台 示 中 乐天 只 符 
1077123 1354353623 PRE 禾 关 


1978.1024 134567831 扶 中 第 二 中 学 





7.51 保存 插件 所 需要 的 库 文件 


7.8 ”制作 弹跳 的 小 球 


| 弹跳 特效 指 的 是 任何 调用 该 方法 的 对 象 都 被 设置 为 弹跳 显示 效果 , 利用 该 效果 可 以 设计 各 种 晃动 
| 行为， 以 便 设计 一 种 富有 动态 化 的 交互 视觉 。 
| 本 示例 利用 jQuery 弹跳 特效 设计 交互 行为 ， 当 在 鼠标 经 过 小 球 时 ， 呈 现 弹 跳 显示 效果 ， 以 增强 
| 界面 的 游戏 互动 特性 。 
| 【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver， 打 开本 节 示 例 中 的 orig html 文件 ， 另 存 为 effecthtml。 
| 第 2 步 ， 把 光标 置 于 页 面 中 ， 选 择 【 插 入 】| 【图 像 】| 【图 像 】 命令， 在 页 面 中 插入 一 个 小 球 ， 
| 在 【属性 】 面 板 中 设置 小 球 宽度 为 300 像素 ， 如 图 7.52 所 示 。 


*。264 


第 7 章 制作 动态 网 页 






































eecthiml x EE Ca 
全 ] 挫 [8 | 列 扫 区 。 靖 。 市 时 二 下 
Ea 
只 
Qa malivt na PPE 
友人 性 
' est Te OG le | 元 “| 本 m mh sm 
卫 0 Om 二 FF HRON ND m9 
图 四 中标 员 
[Da Ll Oa 








图 7.52 插入 小 球 





现 
) 六 





第 3 步 ， 选 中 标签 <div id="apDivl">， 选 择 【 窗 口 】|【 行 为 】 命 令 ， 打 开 【 行 为 】 面 板 ， 单 击 加 | 


号 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【效果 】| Bounce 命令 ， 如 图 7.53 所 示 。 
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图 7.53 选择 Bounce 命令 


第 4 步 ,打开 Bounce 对 话 框 ,设置 【目标 元 素 】 为 “< 当前 选 定 内 容 >”,【 效 果 持 续 时 
即 一 秒 钟 :， 设置 【可见 性 】 为 hide， 即 效果 结束 后 
隐藏 元 素 ; 设置 【方向 】 为 up， 即 定义 目标 对 象 向 
上 弹跳 ， 定 义 【 距 离 】 为 50 像素 ,【 次 】 为 5 次， ae 
设置 如 图 7.54 所 示 。 设置 完毕 , 单 击 【确定 】 按 钮 | 
完成 操作 。 

第 5 步 ,在 【行为 】 面 板 中 可 以 看 到 新 增加 的 
行为 ， 单 击 左 侧 的 onClick， 从 弹出 的 下 拉 菜 单 中 
选择 onMouseOver， 即 设计 当 鼠 标 经 过 正文 区 域 








司 ] 为 1000ms， 





时 ， 将 触发 弹跳 特效 ， 设 置 如 图 7.55 所 示 。 图 7.54 设置 Bounce 对 话 框 
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图 7.55 修改 触发 事件 


第 6 步 ， 继 续 模仿 第 3、4、5 步 操作 ， 再 添加 一 个 Bounce 特效 ， 设 置 【目标 元 素 】 为 “< 当前 选 
定 内 容 >”, 【效果 持续 时 间 】 为 1000ms， 即 一 秒 钟 ， 设 置 【可 见 性 】 为 show， 即 效果 结束 后 显示 元 
素 ; 设置 【方向 】 为 up， 即 定义 目标 对 象 向 上 弹跳 ， 定 义 【 距 离 】 为 50 像素 ,【 次 】 为 5 次 ,设置 
如 图 7.56 所 示 。 设 置 完毕 ， 单 击 【 确 定 】 按 钮 完成 操作 。 

第 7 步 ， 在 【行为 】 面 板 中 修改 事件 类 型 ， 单 击 左 侧 的 onClick， 从 弹出 的 下 拉 菜 单 中 选择 
onMouseOver， 即 设计 当 鼠 标 经 过 时 ， 将 触发 弹跳 特效 ， 然 后 单 击 向 下 箭头 按钮 ， 把 当前 行为 移 到 下 
面 ， 让 该 行为 在 上 一 步 定义 的 行为 之 后 发 生 ， 设 置 如 图 7.57 所 示 。 
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7.56 设置 Bounce 对 话 框 图 7.57 ”修改 触发 事件 并 调整 响应 顺序 


第 8 步 ， 按 Ctrl+S 快捷 键 保 存 页 面 ， 此 时 Dreamweaver 会 弹出 对 话 框 ， 提 示 保 存 两 个 插件 文件 ， 
如 图 7.58 所 示 。 单 击 【 确 定 】 按 钮 ， 保 存 jquery-1.8.3.min.js 和 jquery-ui-effects.custom.min.js 两 个 库 
文件 。 

第 9 步 ， 在 浏览 器 中 预览 ， 当 鼠标 移 到 摘要 正文 上 时 ， 文 字 会 高 亮 显示 并 逐步 隐藏 ， 然 后 再 恢复 
正常 显示 ， 演 示 效 果 如 图 7.59 所 示 。 

窑 提示 : Dreamweaver 定制 的 jQuery 高 亮 特效 ， 实 际 上 与 jQuery 原生 的 高 亮 特效 所 产生 的 效果 是 
不 同 的 ，Dreamweaver 强化 了 高 亮 显示 后 显示 或 隐藏 对 象 ， 而 不 是 保持 对 象 默认 的 显示 状 
态 。 因 此, Dreamweaver 的 高 亮 特 效 适 合 设计 渐 隐 、 渐 显 特效 。 如 果 希 望 使 用 Dreamweaver 
的 Highlight 特效 设计 高 亮 显示 , 必须 使 用 两 个 Highlight 行为 县 加 设计 , 方法 如 本 节 示 例 。 
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7.58 ”保存 插件 所 需要 的 库 文件 


选项 卡 组 件 用 于 在 一 组 不 同 元 素 之 间 切 换 视角 , 可 以 通过 单 击 每 个 元 素 的 标题 来 访问 该 元 素 包 含 
的 内 容 ， 这 些 标题 都 作为 独立 的 选项 卡 而 出 现 。 每 个 元 素 ， 或 者 说 每 个 内 容 片断 都 具有 一 个 与 之 关联 





图 7.59 ”小 球 弹跳 效果 


7.9 制作 选项 卡 


的 选项 卡 ， 并 且 在 同一 时 刻 只 能 够 打开 其 中 一 个 内 容 片断 。 


【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 打 开本 节 示例 中 的 orig.html 文件 ， 另 存 为 effecthtml。 在 本 示例 中 
将 在 页 面 中 插入 一 个 Tab 选项 卡 , 设计 一 个 Tab 面板 切换 版 面 , 当 鼠 标 经 过 时 , 会 自动 切换 表单 面板 。 
第 2 步 ， 把 光标 置 于 页 面 所 在 位 置 ， 然 后 选择 【插入 】| 【jQuery UI】| 【Tabs】 命 令 ， 在 页 面 当 


前 位 置 插入 一 个 Tabs 面板 ， 如 图 7.60 所 示 。 
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第 3 步 ， 使 用 鼠标 单 击 选中 Tabs 面板 ， 可 以 在 【属性 】 面 板 中 设置 选项 卡 的 相 


7.60 插入 Tabs 选项 卡 


以 在 编辑 窗口 中 修改 标题 名 称 并 填写 面板 内 容 ， 如 图 7.61 所 示 。 
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在 此 输入 面板 内 容 ， 
可 以 是 HTML 文本 



































图 7.61 设置 Tabs 选项 卡 


| 
| (1) ID 文本 框 :设置 Tab 选项 卡 外 包含 框 div 元 素 的 ID 属性 值 ， 以 方便 JavaSeript 脚本 控制 。 
| (2)【 面 板 】 列 表 框 : 在 这 里 显示 选项 卡 中 每 个 选项 标题 的 名 称 ， 可 以 单 击 守 和 按钮 图 标 调整 
| 选项 显示 的 先后 位 置 ， 单 击 二 按钮 可 以 增加 一 个 选项 ， 而 单 击 写 按 钮 可 以 减少 一 个 选项 。 

(3) Active 文本 框 : 设置 在 默认 状态 下 显示 的 选项 ， 第 一 个 选项 值 为 0， 第 二 个 选项 值 为 1， 依 
此 类 推 。 

(4) Event 下 拉 列 表 框 : 设置 选项 卡 响应 事件 , 包括 click (鼠标 单 击 ) 和 mouseover (鼠标 经 过 )。 
| (5) Height Style 下 拉 列 表 框 : 设置 内 容 框 的 高 度 ， 包 括 fl (固定 高 度 )、content (根据 内 容 确 
| 定 高 度 ) 和 auto (自动 调整 )。 
| (6) Disabled 复 选 框 : 是 否 禁用 选项 卡 。 
| (7) Collapsible 复 选 框 : 是否 可 折 革 选项 卡 。 默 认 选项 是 false， 不 可 以 折 营 。 如 果 设 置 为 true， 
| 允许 用 户 单 击 可 以 将 已 经 选中 的 选项 卡 内 容 折 又 起 来 。 
| (8) Hide 和 Show 下 拉 列 表 框 : 设置 选项 卡 隐藏 和 显示 时 的 动画 效果 ， 可 以 参阅 下 面 小 节 关 于 
| jQuery 特效 介绍 。 
| (9) Orientation 下 拉 列 表 框 : 设置 选项 卡 标题 栏 是 在 项 部 水 平 显示 (horizontal)， 还 是 在 左 侧 堆 
| 簿 显示 (vertical)。 

第 4 步 ， 按 图 7.61 所 示 设置 完毕 ， 保 存 文档 ， 则 Dreamweaver 会 弹出 对 话 框 ， 要 求 保存 相关 的 
技术 支持 文件 ， 如 图 7.62 所 示 。 单 击 【确定 】 按 钮 关闭 该 对 话 框 即 可 。 





dP 








7.62 ”确定 保存 相关 技术 文件 


| 第 5 步 ， 在 内 容 框 中 分 别 输入 内 容 ， 这 里 插入 表单 截图 。 
第 6 步 ， 切 换 到 代码 视图 ， 在 <head> 标 签 中 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 
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表 ， 然 后 定义 两 个 样式 ， 修 改 Tab 选项 卡 默 认 的 样式 ， 其 中 #Tabsl > div 定义 选项 卡 容器 样式 ， 清 除 
容器 包含 框 的 边界 和 补 白 , 避免 默认 的 边界 对 包含 内 容 的 影响 。 #Tabsl > ul> > a 用 来 控制 Tab 选项 
卡 标题 栏 字体 大 小 和 左右 补 白 ， 以 便 适 应 当前 页 面 的 栏目 布局 。 设 计 如 图 7.63 所 示 。 


3 
) 六 





#Tabsl >div { | 
padding:0: | 
#Tabsl > ul >li>a{ | 
font-size: 14px: 
padding-left:8px: | 
padding-right:8px: | 
} | 
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7.63 ”清除 Tab 选项 卡 默认 样式 
第 7 步 ， 按 Ctrl+S 快捷 键 保存 文档 ， 然 后 按 F12 键 预览 ， 则 演示 效果 如 图 7.64 所 示 。 


多 你 站 才 是 rE Ee™ 
=- 


Et 六 半 检 


天 | | 25 句 | a 


aorm ine st ns a 
加 单 脸 往返 
区 和 Er 
ER 


EN s+ Eee 


M wi Tt BEELYY tr 





图 7.64 Tab 选项 卡 预览 效果 
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3 拉 页 纳 守 与 网 站 建 役 以 入 门 到 将 通 
将 提示 : 选项 卡 组 件 是 基于 底层 的 HTML 元 素 结构 ， 该 结构 是 固定 的 ， 组 件 的 运转 依赖 一 些 特定 
的 元 素 。 选 项 卡 本 身 必 须 从 列表 元 素 中 创建 ， 列 表 结 构 可 以 是 排序 的 ， 也 可 以 是 无 序 的 ， 
并 且 每 个 列表 项 应 当 包含 一 个 span 元 素 和 一 个 a 元 素 。 每 个 链接 还 必须 具有 相应 的 div 
元 素 ， 与 它 的 href 属性 相关 联 。 例 如 : 
<u> 
<li><a hre 人 ="#tabs"><span> 标 题 </span></a></li> 
<hul> 
<div id="tabs1">Tab 面板 容器 </div> 
对 于 该 组 件 来 说 ， 必 要 的 CSS 样式 是 必需 的 , 默认 可 以 导入 jquery.ui.all.ess 文件 , 或 者 jqueryui. 
tabs.css， 也 可 以 自 定义 CSS 样式 表 ， 用 来 控制 选项 卡 的 基本 样式 。 
一 套 选项 卡 面板 包括 了 几 种 以 特定 方式 排列 的 标准 HTML 元 素 ， 根 据 实际 需要 可 以 在 页 面 中 编 
写 好 ， 也 可 以 动态 添加 ， 或 者 两 者 结合 。 


列表 元 素 (ul 或 ol) 。 
a 元 素 。 

span 元 素 。 

div 元 素 。 


前 3 个 元 素 组 成 了 可 单 击 的 选项 标题 ,以 用 来 打开 选项 卡 所 关联 的 内 容 框 , 每 个 选项 卡 应 该 包含 
一 个 带 有 链接 的 列表 项 , 并 且 链 接 内 部 还 应 嵌 套 一 个 span 元 素 。 每 个 选项 卡 的 内 容 通过 div 元 素 创建 ， 
其 id 值 是 必需 的 ， 标 记 了 相应 的 a 元素 的 链接 目标 。 


7.10 设计 模 态 对 话 杠 


如 果 需 要 在 Web 应 用 中 显示 简短 的 信息 提示 ， 或 者 向 访问 者 询问 ， 可 以 有 两 种 方式 : 一 是 使 用 


| JavaScript 原生 的 对 话 框 ， 如 alert0 或 者 confirm0 方 法 等 ， 另 一 种 方法 是 打开 一 个 新 的 页 面 ， 预 先 定 


义 好 尺寸 ， 并 且 将 其 样式 设置 为 对 话 框 风格 。 不 过 ，JavaScript 提供 的 原生 方法 既 不 灵活 ， 也 不 巧妙 ， 
它们 在 解决 一 个 问题 的 同时 ， 通 常会 产生 新 的 问题 。 

jQuery UI 提供 了 更 多 功能 和 更 加 丰富 特性 的 对 话 框 组 件 ， 该 对 话 框 组 件 可 以 显示 消息 ， 附 加 内 
容 (如 图 片 或 文字 等 ), 甚至 包括 交互 型 内 容 (如 表单 ), 为 对 话 框 添加 按钮 也 更 加 容易 ， 如 简单 的 【 确 
定 】 和 【取消 】 按 钮 ， 并 且 可 以 为 这 些 按钮 定义 回调 函数 ， 以 便 在 它们 被 单 击 时 做 出 反应 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 打 开本 节 示例 中 的 orig.html 文件 ， 另 存 为 effect.html。 在 本 示例 中 
将 在 页 面 中 插入 一 个 按钮 图 标 ， 单 击 该 按钮 图 标 可 以 打开 模 态 对 话 框 。 

第 2 步 ， 把 光标 置 于 页 面 所 在 位 置 ， 然 后 插入 图 像 images/outpng， 命 名 为 hejp， 如 图 7.65 所 示 。 

第 3 步 ， 选 中 插入 的 图 像 ， 打 开 【 行 为 】 面 板 ， 为 当前 图 像 绑 定 交换 图 像 行 为 ， 详 细 设置 如 图 7.66 
所 示 。 绑 定 行为 之 后 ， 在 【行为 】 面 板 中 设置 触发 事件 ， 交 换 图 像 为 onMouseOver， 恢 复 交 换 图 像 为 


| onMouseOut， 即 设计 当 鼠 标 经 过 图 像 时 ， 能 够 动态 显示 图 像 交 换 效 果 。 


第 4 步 ， 在 页 面 内 单 击 ， 把 光标 置 于 页 面 内 ,不 要 选中 任何 对 象 ， 然 后 选择 【插入 】| jQuery UI| 
Dialog 命令 ， 在 页 面 当前 位 置 插入 一 个 模 态 对 话 框 ， 如 图 7.67 所 示 。 
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图 7.65 插入 图 像 
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7.67 ”插入 模 态 对 话 框 


第 5 步 ， 使 用 鼠标 单 击 选中 Dialog 面板 ， 可 以 在 【属性 】 面 板 中 设置 对 话 框 的 相关 属性 ， 同 时 
可 以 在 编辑 窗口 中 修改 对 话 框 面板 的 内 容 ， 如 图 7.68 所 示 。 
(1) ID 文本 框 : 设置 对 话 框 外 包含 框 div 元 素 的 ID 属性 值 ， 以 方便 JavaScript 脚本 控制 。 
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图 7.68 设置 相关 属性 


| (2) Title 文本 框 :设置 对 话 框 的 标题 。 
| (3) Position 下 拉 列 表 框 : 设置 对 话 框 在 浏览 器 窗口 中 的 显示 位 置 ， 默 认为 center (中央 )， 包 
| 括 left、right、top 和 bottom 选项 。 

(4) Width 和 Height 文本 框 : 设置 对 话 框 的 宽度 和 高 度 。 

(5) Min Width、Min Height、Max Width 和 Max Height 文本 框 : 设置 对 话 框 最 小 宽度 、 最 小 高 
度 、 最 大 宽度 和 最 大 高 度 。 

(6) Auto Open 复 选 框 ， 是 否 自动 打开 对 话 框 。 

(7) Draggable 复 选 框 ， 是否 允许 鼠标 拖 动 对 话 框 。 

(8) Modal 复 选 框 : 是 否 开启 遮 四 模式 ， 在 遮 音 模式 下 用 户 只 能 在 关闭 对 话 框 后 才能 够 继续 操 
作 页 面 。 

(9) Close On Escape 复 选 框 : 是否 允许 使 用 Escape 键 关闭 对 话 框 。 

(10) Resizable 复 选 框 : 是 否 允 许 调整 对 话 框 大 小 。 

(11) Hide 和 Show 下 拉 列 表 框 :设置 对 话 框 隐藏 和 显示 时 的 动画 效果 。 

(12) Trigger Button 下 拉 列 表 框 : 设置 触 
发 对 话 框 的 按钮 对 象 。 

(13) Trigger Event 下 拉 列 表 框 : 设置 触 
发 对 话 框 的 事件 。 

第 6 步 ， 按 图 7.68 所 示 设 置 完毕 , 保存 文 
档 ， 则 Dreamweaver 会 弹出 对 话 框 ， 要 求 保存 
相关 的 技术 支持 文件 , 如 图 7.69 所 示 。 单 击 [ 确 
定 】 按 钮 关闭 该 对 话 框 即 可 。 

第 7 步 ， 切 换 到 【代码 】 视 图 ， 可 以 看 到 
Dreamweaver 自动 生成 的 脚本 。 


此 和 要 羔 相 应 的 x 或 行为 























图 7.69 确定 保存 相关 技术 文件 


! autoOpen:false. 
| title:" 帮 助 中心 "、 


he 
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& 


D; 
</scrip> 
第 8 步 ， 在 $Gfunction0 全 函数 体内 增加 如 下 代码 ， 为 交换 图 像 绑 定 激活 对 话 框 的 行为 。 





第 9 步 ， 按 Ctrlts 快捷 键 保存 文档 ， 然 后 按 F12 键 预览 ， 当 单 击 帮助 图 标 时 ， 会 自动 显示 一 个 
模 态 对 话 框 ， 效 果 如 图 7.70 所 示 。 


D -sc| Scher 











图 7.70 模 态 对 话 框 预览 效果 


岩 提示 : 对 话 框 组 件 带 有 内 建 模式 ， 在 默认 情况 下 是 非 激活 的 ， 而 一 旦 模式 被 激活 ， 将 会 启用 一 个 | 
模式 履 盖 层 元 素 ， 履 盖 对 话 框 的 父 页 面 。 而 对 话 框 将 会 位 于 该 覆盖 层 的 上 面 ， 同 时 页 面 的 | 
其 他 部 分 将 位 于 震 盖 层 的 下 面 。 | 
这 个 特性 的 好 处 是 可 以 确保 对 话 框 被 关闭 之 前 ， 父 页 面 不 能 够 进行 交互 ， 并 且 为 要 求 访问 
者 在 进一步 操作 前 必须 关闭 对 话 框 提供 了 一 个 清晰 的 视觉 指标 。 
改变 对 话 框 的 皮肤 使 之 与 内 容 相 适应 是 很 容易 的 ， 可 以 从 默认 的 主题 样式 表 
(jquery.ui.dialog.css ) 中 进行 修改 ， 也 可 以 自 定义 对 话 框 样式 表 。 
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第 (2/ 章 


网 页 图 像 编辑 基础 


( 呀 视频 讲解 : 98 分 钟 ) 


Dreamweaver 只 能 组 织 和 布局 图 像 ， 要 想 完全 设计 和 编辑 网 页 图 像 ， 还 应 该 借助 专业 级 图 
像 处 理 软件 Photoshop。 在 Dreamweaver 中 选中 一 幅 图 像 ， 单 击 [ 属性 ] 面板 中 的 [编辑 ] 按钮， 
即 可 启动 Photoshop 来 编辑 它 ， 当 然 ， 也 可 以 直接 打开 Photoshop 来 编辑 和 新 建 一 个 网 页 图 像 。 
本 章 将 着 重 介绍 使 用 Photoshop 编辑 网 页 图 像 的 方法 和 技巧 

图 像 在 网 页 中 广泛 应 用 ， 但 也 带 来 一 个 严重 问题 ， 那 就 是 带宽 狗 颈 ， 这 使 得 图 像 优化 变 得 
很 重要 。Photoshop 在 文件 格式 优化 和 网 页 图 像 优化 方面 功能 强大 ,本章 也 将 围绕 网 页 图 像 优化 
问题 展开 介绍 


【 学 习 重点 】 

使 用 Photoshop 新 建 网 页 图 像 
使 用 Photoshop 工具 绘图 

在 Photoshop 中 编辑 图 像 
设计 网 页 图 像 

最 优化 图 像 

分 密 图 像 

寻 出 为 网 页 图 像 


于 至 至 至 至 至 至 
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8.1 ”Photoshop 概述 


Photoshop 是 Adobe 公司 推出 的 一 个 全 方位 的 网 页 图 形 编辑 软件 。 它 具有 以 下 3 个 特性 。 
加 ”绘图 功能 : 使 用 Photoshop 可 以 绘制 出 各 种 形状 的 图 形 。 
图 像 处 理 功 能 : Photoshop 可 以 对 图 像 进行 各 种 效果 处 理 ， 如 填充 纹理 、 渐 变 颜色 、 笔 画 及 | 
添加 滤 镜 特效 等 。 此 外 ，Photoshop 还 兼 有 位 图 和 矢量 图 的 功能 ， 能 够 同时 处 理 位 图 和 矢量 | 
图 两 种 不 同类 型 的 图 像 ， 这 是 Photoshop 突出 的 优点 。 
网 页 编辑 功能 : Photoshop 是 一 个 网 页 图 形 编辑 软件 ， 所 以 ， 它 还 具有 网 页 编辑 功能 。 用 户 
可 以 在 Photoshop 中 分 割 图片 、 设 置 超 链接 、 制 作 GIF 动画 、 快 速 制作 无 颖 分 割 图 片 和 图 像 | 
映射 ， 并 能 够 输出 它们 的 HTML 代码 。 可 以 不 用 编写 任何 程序 ， 就 能 轻松 地 制作 出 具有 | 
JavaScript 程序 交互 性 的 效果 ， 甚 至 还 可 以 直接 将 图 形 保存 为 CSS 代码 。 | 
因此 ，Photoshop 是 一 款 既 具备 图 像 处 理 功能 ， 又 可 以 编辑 网 页 的 软件 。 该 软件 推出 后 ， 深 受 广 | 
大 网 页 设计 者 的 喜爱 .再 加 上 Photoshop 与 Adobe 公司 的 网 页 编辑 软件 Dreamweaver 结合 得 非常 紧密 ， | 
因而 使 用 它 保存 HTML 网 页 文件 ， 可 以 直接 插入 到 Dreamweaver 中 使 用 ， 并 且 不 会 改变 在 Photoshop | 
中 所 做 的 一 切 设置 ， 如 分 割 图 片 的 位 置 、 超 链接 地 址 等 。 此 外 ， 使 用 Photoshop 输出 的 图 像 不 但 品质 | 
好 ， 而 且 文 件 小 。 | 
安装 Photoshop 软件 后 ， 就 可 以 启动 该 软件 制作 网 页 图 形 了 。 在 此 之 前 ， 先 简单 介绍 一 下 该 软件 
的 窗口 组 成 ， 让 用 户 对 Photoshop 有 一 个 初步 了 解 。 如 图 8.1 所 示 是 启动 Photoshop 后 的 窗口 ， 从 中 
可 了 解 到 Photoshop 窗口 的 组 成 。 
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图 8.1 Photoshop 的 窗口 
要 显示 或 隐藏 Photoshop 中 的 面板 ， 可 以 选择 【窗口 】 菜 单 中 的 命令 ,或 者 按 Tab 键 显示 或 隐藏 


各 种 功能 面板 。 


8.2 新建 网 页 图 像 


要 制作 网 页 图 像 ， 应 先 建立 一 个 新 文件 。 
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砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


| 【操作 步 又】 
| 第 1 步 ， 启 动 Photoshop。 
| 第 2 步 ， 在 Photoshop 中 选择 【文件 】| 【新 建 】 命 令 ， 打 开 如 图 8.2 所 示 的 【新 建 】 对 话 框 。 
全 站 | 第 3 步 ， 在 对 话 框 中 设置 图 像 的 高 度 、 宽 度 及 分 辨 率 等 各 项 参数 。 如 果 要 制作 网 页 图 像 大 小 为 
”| 800 像素 x600 像素 ， 如 图 8.2 所 示 。 





| 名 和 :nded 
web 
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汉 歇 内 硅 (O: 有 景色 


习 更 豚 





图 8.2 【新 建 】 对 话 框 
第 4 步 ， 单 击 【确定 】 按 钮 ， 就 可 以 建立 一 个 新 图 像 。 
， 容 提示 : 新 建 图 像 的 尺寸 大 小 最 好 与 应 用 到 Dreamweaver ( 即 网 页 ) 中 的 实际 大 小 一 致 ， 这 样 可 以 
方便 以 后 使 用 。 若 所 制作 的 图 形 与 在 Dreamweaver 中 的 尺寸 不 符 ， 插 入 到 Dreamweaver 
中 再 进行 缩放 ， 则 会 影响 图 像 的 显示 效果 。 


| < 负 注意 :在 设置 图 像 分 辨 率 时 ， 切 勿 设置 过 大 。 因 为 分 辩 率 越 大 ， 保 存 后 的 文件 也 越 大 ， 这 样 就 会 
| 增 大 网 页 容量 , 不 利于 在 网 络 上 传输 , 对 于 网 页 图 像 而 言 ,72 像素 /英寸 的 分 辩 率 就 足够 了 。 


8.3 使 用 Photoshop 绘图 


在 矢量 图 形 中 ， 构 成 形状 的 轮廓 被 称 为 路 径 。 路 径 可 以 是 开放 的 〈 如 直线 或 曲线 )， 也 可 以 是 闭 
合 的 《如 圆圈 或 多 边 形 )。 由 于 路 径 是 基于 矢量 而 不 是 基于 像素 的 ， 路 径 的 形状 可 以 任意 改变 ， 且 它 
能 和 选取 范围 互相 转换 ， 因 此 可 以 制作 出 形状 很 复杂 的 选取 范围 。 


8.3.1 使 用 钢笔 工具 


【钢笔 工具 】 人 是 建立 路 径 的 基本 工具 ， 用 于 徒手 绘制 路 径 ， 使 用 该 工具 可 创建 直线 路 径 和 曲线 
路 径 。 下 面 先 介绍 如 何 绘制 一 个 多 边 形 的 直线 路 径 。 

【操作 步骤 】 

第 1 步 ， 新 建 网 页 图 像 。 单 击 工具 箱 中 的 钢笔 工具 组 ， 选 择 其 中 的 【钢笔 工具 】 人 入， 移动 鼠标 至 
图 中 某 点 位 置 单 击 ， 定 出 路 径 的 开始 点 ， 即 第 一 个 锚 点 ， 如 图 8.3 所 示 。 

第 2 步 ， 移 动 鼠标 到 要 建立 第 2 个 锚 点 的 位 置 上 单 击 ，Photoshop 自动 将 第 1 个 和 第 2 个 锚 点 连 
接 起 来 ， 如 图 8.4 所 示 。 
| 第 3 步 ， 按 照 第 2 步 中 的 方法 依次 创建 其 他 锚 点 。 
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| | 
ao 让 as 有 是 | so% HiS 有 到 | 
图 8.3 单 击 定义 路 径 起 始点 图 8.4 给 制 第 2 个 错 点 





第 4 步 ， 当 绘制 的 锚 点 回 到 开始 点 时 ， 如 图 8.5 所 示 ， 在 鼠标 的 右 下 方 会 出 现 一 个 4 
示 终 点 已 经 连接 开始 点 ， 此 时 单 击 可 以 完成 一 个 封闭 式 的 路 径 ， 如 图 8.6 所 示 。 
国 mdw @50WPGB/e L=IeLxj 国 me @ 50xPca/e)” LeLz= 
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图 8.5 回 到 起 始点 位 置 单 击 图 8.6 绘制 封闭 的 路 径 


窑 提示 : 此 图 绘制 的 是 一 个 封闭 式 的 路 径 ， 当 锚 点 的 终点 和 起 点 重合 时 ，Photoshop 自动 结束 绘制 
操作 。 如 需 结束 一 个 开放 路 径 的 绘制 ， 则 在 绘制 完成 后 需要 点 击 选择 钢笔 工具 组 ， 然 后 单 
击 路 径 外 的 任何 位 置 即 可 。 


<4 注意 : 在 绘制 路 径 之 前 ， 若 未 在 【路 径 】 面 板 中 新 建 路 径 ， 则 会 自动 出 现 一 个 工作 路 径 ， 如 
图 8.7 所 示 ， 工 作 路 径 是 一 种 暂时 性 的 路 径 ， 一 旦 有 新 的 路 径 建 立 ， 则 马上 被 新 的 工作 路 | 

径 桥 盖 ， 原 来 创建 的 路 径 将 会 丢失 。 用 户 可 以 单 击 【路 径 】 面 板 右上 角 的 按钮 ， 在 打开 的 | 
莱 单 中 选择 【存储 路 径 】 命 令 将 其 保存 为 普通 路 径 ， 如 图 8.8 所 示 。 | 

| 














图 8.7 工作 路 径 


【钢笔 工具 】 除 了 可 以 绘制 直线 路 径 以 外 ,还 可 以 绘制 曲线 , 绘制 曲线 路 径 要 比 绘制 直线 路 径 复 
杂 一 些 ， 用 户 可 以 通过 沿 曲线 伸展 的 方向 拖 动 【钢笔 工具 】 来 创建 曲线 。 
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【操作 步骤 】 


第 1 步 ， 选 择 【 钢 笔 工具 】 在 图 像 编辑 窗口 单 击 定义 第 一 个 锚 点 ， 不 要 松 开 鼠标 并 向 任意 方向 
拖 动 ， 指 针 将 变 成 箭头 状 ， 如 图 8.9 所 示 。 

第 2 步 ， 松 开 鼠 标 ， 从 第 一 个 锚 点 处 移 开 ， 定 义 下 一 个 锚 点 ， 如 图 8.10 所 示 。 向 绘制 曲线 段 的 
| 方向 拖 动 指 针 ， 指 针 将 引导 其 中 一 个 方向 点 的 移动 。 如 果 按 住 Shift 键 ， 则 可 限制 该 工具 沿 着 45” 的 


砚 贡 设计 与 网 站 建设 从 入 门 到 精通 
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图 8.9 设置 第 1 个 锚 点 


图 8.10 绘制 出 曲线 段 


从 锚 点 延伸 的 直线 为 方向 线 ， 箭 头 表明 鼠标 拖 动 的 方向 ， 即 为 方向 点 。 
第 3 步 ， 继 续 在 其 他 位 置 单 击 ， 并 拖 动 方向 点 的 位 置 和 和 角度， 设计 曲线 路 径 。 


第 4 步 ， 随 着 新 锚 点 的 增加 ， 路 径 的 新 部 分 也 随 之 变化 。 如 果 要 绘制 平滑 曲线 的 下 一 段 ， 可 以 将 


鼠标 指针 定位 于 下 一 段 的 终点 ， 并 向 曲线 外 拖 动 ， 如 图 8.11 所 示 。 


第 5 步 ， 如 果 和 希望 曲线 有 一 个 转折 以 改变 曲线 的 方向 ， 可 以 松 开 鼠 标 ， 按 住 Alt 键 沿 曲线 方向 拖 
动 方向 点 。 松 开 Alt 键 及 鼠标 ， 将 指针 重新 定位 于 曲线 段 的 终点 ， 并 向 相反 方向 拖 动 就 可 绘制 出 改变 


方向 的 曲线 段 ， 如 图 8.12 所 示 。 
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图 8.11 绘制 平滑 曲线 
8.3.2 ”使 用 自由 钢笔 


【自由 钢笔 工具 】 谷 同样 用 于 徒手 绘制 路 径 ， 与 【钢笔 工具 】4 不 同 的 是 ,【 自 由 钢笔 工具 】 不 是 
通过 创建 锚 点 来 建立 路 径 ， 而 是 通过 绘制 曲线 来 直接 创建 路 径 的 ， 绘 制 完成 后 Photoshop 会 自动 在 曲 


图 8.12 改变 平滑 曲线 的 方向 


线 的 拐角 等 位 置 添加 相应 的 锚 点 ， 是 比较 灵活 随意 的 路 径 创建 工具 。 


“278° 








第 8 章 网 页 图 像 编 辑 基 础 § 


【操作 步骤 】 
第 1 步 ， 新 建 一 幅 图 像 ， 在 工具 箱 中 选择 【自由 钢笔 工具 】 全 。 
第 2 步 , 在 图 像 窗口 中 拖 动 鼠标 绘制 任意 形状 的 曲线 ， 








ne 人 50KRCB/ 到 L=IeLz= J 

如 图 8.13 所 示 ， 释 放 和 鼠标 后 即 可 创建 路 径 。 
第 3 步 ， 如 果 想 对 未 封闭 的 路 径 继续 进行 绘制 ， 可 以 

将 鼠标 移 到 曲线 的 任意 一 个 端点 上 , 按 下 鼠标 左 键 并 拖 动 ， /1 | 门 一 
当 到 达 路 径 的 另 一 端点 时 松 开 鼠标 左 键 即 可 完成 封闭 路 径 | 
的 绘制 。 / | /一 一 
8.3.3 ”增加 和 删除 锚 点 “ 

3 ND 字 和 E] 


























使 用 【添加 氏 点 工具 】 和 【删除 锚 点 工具 】 工 具 可 以 
添加 和 删除 路 径 上 的 锚 点 ， 从 而 使 用 户 对 路 径 图 形 做 更 细 ”图 13 使 用 【自由 钢笔 工具 】 给 制 路 
臻 的 编辑 。 

【操作 步 又】 





第 1 步 ， 新 建 一 幅 图 像 ， 在 工具 箱 中 选择 【钢笔 工具 】 或 者 任意 一 种 形状 工具 ， 绘 制 一 个 路 径 图 | 


形 ， 如 图 8.14 所 示 。 

第 2 步 ， 选 择 【添加 锚 点 工具 】[ 辆 ， 当 鼠标 指针 靠近 路 径 时 在 路 径 段 上 单 击 就 在 该 路 径 上 添加 了 
一 个 锚 点 。 

第 3 步 , 如 果 需 要 在 路 径 上 添加 锚 点 并 且 改 变 线段 的 形状 ， 可 以 在 路 径 上 单 击 并 拖 动 以 定义 锚 点 
的 方向 线 ， 如 图 8.15 所 示 。 

第 4 步 ， 使 用 【添加 锚 点 工具 】 时 按 住 Alt 键 单 击 并 拖 动 平滑 点 一 侧 的 方向 点 ， 可 以 将 该 锚 点 转 
变 成 角 点 。 

第 5 步 ， 当 用 户 已 经 绘制 完成 一 条 路 径 并 且 决 定 删除 路 径 上 某 些 多 余 的 锚 点 时 ， 选择 【 删 除 锚 点 
工具 】 器 可 以 完成 这 项 工作 。 当 鼠标 指针 靠近 路 径 上 的 锚 点 时 ， 在 指针 右 下 角 会 出 现 减 号 ， 单 击 该 锚 
点 它 就 会 从 这 条 路 径 上 消失 。 

第 6 步 ， 如 果 使 用 【删除 锚 点 工具 】 单 击 并 拖 动 一 个 锚 点 ， 不 但 会 将 该 锚 点 删除 ， 同 时 还 会 改变 
路 径 的 形状 ， 如 图 8.16 所 示 。 
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图 8.14 绘制 路 径 图 形 图 8.15 添加 锚 点 图 8.16 删除 锚 点 
8.3.4 转换 矢量 点 
路 径 由 直线 路 径 和 曲线 路 径 构成 , 而 直线 路 径 和 曲线 路 径 又 分 别 是 由 直线 锚 点 和 曲线 锚 点 连接 而 





“279» 





人 
| 成 ， 有 时 为 了 满足 路 径 编 辑 的 要 求 ， 需 要 在 直线 错 点 和 曲线 销 点 之 间 互 相 转 换 ， 为 了 达到 此 目的 ， 需 
| 要 使 用 工具 箱 中 的 【转换 点 工具 】 仆 。 
| 【转换 点 工具 】 可 以 转换 路 径 上 的 错 点 类 型 ， 例 如 ， 将 平滑 点 转换 成 角 点 ， 将 角 点 转换 成 平滑 点 

| 等 。【 转 换 点 工具 】 在 编辑 路 径 的 过 程 中 扮演 着 重要 的 角色 ， 它 使 路 径 编 辑 工作 更 具 灵 活性 。 
| 【操作 步 又】 

| 第 1 步 ， 新 建 一 幅 图 像 ， 绘 制 一 个 路 径 。 
| 第 2 步 ， 如 果 要 把 曲线 错 点 转换 为 直线 错 点 ， 操 作 方法 :在 工具 箱 中 选择 【转换 点 工具 】 卜 ， 移 动 

鼠标 至 图 像 中 的 路 径 锚 点 上 单 击 , 即 可 将 一 个 曲线 锚 点 转换 为 一 个 直线 锚 点 , 如 图 8.17 所 示 , 如 图 8.18 

































































| 所 示 为 转换 后 的 效果 。 
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图 8.17 转换 前 路 径 图 8.18 ”转换 为 一 个 直线 锚 点 


第 3 步 ， 如 果 要 把 直线 锚 点 转换 为 曲线 锚 点 ， 操 作 方法 : 在 工具 箱 中 选择 【转换 点 工具 】 仆 ， 单 
击 需 要 转换 的 锚 点 并 拖 动 调整 弯曲 形状 ， 如 图 8.19 所 示 是 将 图 8.18 中 间 的 直线 锚 点 转换 为 曲线 锚 点 
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图 8.19 转换 曲线 的 锚 点 类 型 


第 4 步 , 使 用 【转换 点 工具 】 仆 还 可 以 调整 曲线 的 方向 。 如 图 8.19 中 间 的 曲线 锚 点 有 两 条 方向 线 ， 
用 【转换 点 工具 】 下 单 击 其 中 一 条 方向 线 的 一 端 并 进行 拖 动 ， 如 图 8.20 所 示 ， 就 可 以 单独 调整 这 一 端 
| 方向 线 所 控制 的 曲线 形状 。 图 8.21 是 将 该 端点 拖 动 至 窗口 左上 角 时 路 径 的 效果 图 。 


容 提示 : 在 选中 【钢笔 工具 了 的 情况 下 ,移动 鼠标 指针 至 曲线 的 方向 线 上 按 下 Alt 键 , 则 会 变 为 【 转 
| 换 点 工具 了 下 
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图 8.20 用 【转换 点 工具 】 调 整 曲线 图 821 调整 后 的 曲线 | 


8.3.5 ”打开 和 关闭 路 径 


! 

路 径 绘制 完成 以 后 ， 该 路 径 始终 出 现在 图 像 中 ,在 对 图 像 进 行 编 辑 时 ， 显 示 的 路 径 会 带 来 诸多 的 | 
不 便 ， 此 时 ， 就 需要 关闭 路 径 。 | 
【操作 步骤 】 | 

第 1 步 ， 新建 一 幅 图 像 绘制 一 个 路 径 。 | 

第 2 步 ， 要 关闭 路 径 ， 首 先 在 【路 径 】 面 板 中 选中 需要 关闭 的 路 径 名 称 ， 在 【路 径 】 面 板 上 的 灰 
色 区 域 单 击 一 下 ， 如 图 8.22 所 示 。 
PS 广 作 P 民生 日 型 全 0 型 后 Q) 文 了 过 三 6 并 砚 加 MI 项 ON) 关 及 =lol* | 
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[es © Sotowa) “| 
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8.22 关闭 路 径 


第 3 步 , 就 会 取消 所 有 路 径 的 作用 状态 , 在 图 像 上 的 所 有 路 径 都 会 被 关闭 。 也 可 以 通过 按 住 Shift 
键 单 击 路 径 名 称 来 快速 关闭 当前 路 径 。 如 图 8.23 所 示 是 关闭 路 径 后 的 图 像 。 

第 4 步 ， 要 打开 路 径 ， 只 需 在 【路 径 】 面 板 中 单 击 要 显示 的 路 径 名 称 即 可 。 

第 5 步 ， 路 径 可 以 关闭 ， 也 可 以 隐藏 。 选 择 【 视 图 】 代 显示 】 代 目标 路 径 】 命 令 或 按 Shift+CtrlHH 
组 合 键 ， 可 以 隐藏 路 径 ， 如 图 8.24 所 示 是 隐藏 路 径 前 的 图 像 ， 图 8.25 是 隐藏 路 径 后 的 图 像 。 此 时 虽 | 
然 在 图 像 窗口 中 看 不 见 路 径 的 形状 ， 但 并 未 将 其 删除 ， 在 【路 径 】 面 板 中 该 路 径 仍然 处 于 打开 状态 。 | 

第 6 步 , 若 要 重新 显示 路 径 , 则 可 以 再 次 选择 【视图 了 民 显 示 了 民 目标 路 径 】 命 令 或 按 Shiftt+CtrlH+H | 
组 合 键 。 | 
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图 8.24 ”隐藏 路 径 前 的 图 像 
8.3.6 ”编辑 路 径 


图 8.25 ”隐藏 路 径 后 的 图 像 


路 径 可 以 通过 变形 来 改变 自身 形状 ， 路 径 的 变形 处 理 操作 和 一 般 图 形 的 变形 差不多 。 


【操作 步骤 】 
第 1 步 ， 新 建 一 幅 图 像 ， 绘 制 一 个 路 径 。 


第 2 步 ， 使 用 【路 径 选 取 工 具 】 选中 将 要 变形 的 路 径 ， 如 图 8.26 所 示 。 


第 3 步 ， 执 行 【 编 辑 】|【 自 由 变换 路 径 】 命 令 ， 或 者 执行 【编辑 】|【 变 换 路 径 】 下 的 各 种 变形 


命令 对 路 径 进行 变形 处 理 ， 如 图 8.27 所 示 。 
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8.26 ”建立 路 径 


“ 202 


8.27 对 路 径 进行 变形 
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8.3.7 ”路 径 与 选区 转换 
创建 路 径 的 一 个 目的 就 是 要 将 其 转换 为 选取 范围 ,而 将 一 个 选取 范围 转换 为 路 径 ， 利 用 路 径 的 功 | 














能 对 其 进行 精确 的 调整 ， 可 以 制作 出 许多 形状 较为 复杂 的 选取 范围 。 | 鲁 盖 
【操作 步骤 】 | 
第 1 步 ， 打 开 一 张 图 片 ， 在 图 中 创建 路 径 ， 如 图 8.28 所 示 。 





第 2 步 ， 打 开 【 路 径 】 面 板 菜单 ， 选 择 【 建 立 选 区 】 命 令 。 另 外 ， 在 选中 路 径 后 ， 也 可 以 单 击 【〖 路 | 
径 】 面板 底部 的 【将 路 径 作 为 选区 载 入 】 按钮 亚 ]， 直 接 将 路 径 转换 为 选取 范围 ,， 并 省 去 第 3 步 的 操作 。 | 
第 3 步 ， 弹 出 【建立 选区 】 对 话 框 ， 如 图 8.29 所 示 , 将 【羽化 半径 】 设置 为 0， 选 中 【消除 锯齿 】| 
复 选 框 ， 然 后 单 击 【 确 定 】 按 钮 ， 路 径 就 被 转换 为 选区 。 | 





放 者 染 
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与 选区 交 双 () 




















8.28 创建 路 径 8.29 【建立 选区 】 对 话 框 


容 提示 : 【建立 选区 】 对 话 框 中 的 【羽化 半径 】 文 本 框 可 以 控制 选取 范围 转换 后 的 边缘 羽化 程度 ， 
变化 范围 为 0.0~250.0 像素 。 若 选中 【消除 锯齿 】 复 选 框 ， 则 转换 后 的 选取 范围 具有 消除 
锯齿 的 功能 。 


如 果 是 一 个 开放 式 的 路 径 ， 则 在 转换 为 选取 范围 后 ， 路 径 的 起 点 会 连接 终点 成 为 一 个 封闭 的 选取 | 
范围 。 

因为 路 径 可 以 进行 编辑 ， 因 此 当选 取 范 围 不 够 精确 时 ， 可 以 将 选取 范围 转换 为 路 径 进行 调整 。 将 
选取 范围 转换 成 路 径 ， 可 按 如 下 操作 进行 。 

【操作 步骤】 

第 1 步 ， 打 开 一 幅 图 像 ， 并 选取 一 个 范围 ， 如 图 8.30 所 示 。 

第 2 步 ， 选 择 【 路 径 】 面 板 中 的 【建立 工作 路 径 】 命 令 ， 如 图 8.31 所 示 。 另 外 ， 也 可 单 击 【 路 
径 】 面 板 中 的 【从 选区 生成 工作 路 径 】 按 钮 人 Os ， 直 接 将 当前 选取 范围 转换 为 路 径 ， 并 省 去 第 3 步 的 
操作 。 

第 3 步 ， 选择 【建立 工作 路 径 】 命 令 后 ， 弹 出 【建立 工作 路 径 】 对 话 框 ， 如 图 8.32 所 示 ,【 容 差 】 | 
文本 框 用 于 控制 转换 后 的 路 径 平滑 度 ， 变 化 范围 为 0.5~8.0 像素 ， 该 值 越 小 所 产生 的 锚 点 越 多 ， 线 条 
越 平滑 ， 设 置 完 成 后 单 击 【 确 定 】 按 钮 ， 选 取 范围 即 可 转换 为 路 径 ， 如 图 8.33 所 示 。 
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图 8.30 选取 范围 





图 8.32 


【建立 工作 路 径 】 对 话 框 
8.3.8 填充 和 描 边 路 径 
绘制 好 的 路 径 可 以 直接 在 其 内 部 填充 前 景色 ， 也 可 以 进行 描 边 处 理 。 


【操作 步骤 】 
第 1 步 , 打开 要 进行 填充 的 路 径 , 如 图 8.34 
所 示 。 选 择 【 路 径 】 面 板 菜单 中 的 【填充 路 径 】 


| 命令 。 


第 2 步 ， 或 单 击 【 路 径 】 面 板 上 的 【用 前 
景色 填充 路 径 】 按 钮 . 印 .， 直 接 进 行 填充 。 其 
填充 的 各 选项 设置 ， 与 上 一 次 使 用 【填充 路 径 】 
对 话 框 的 设置 相同 。 这 样 做 可 省 去 后 面 3、4 两 
步 操 作 。 

第 3 步 ， 弹 出 【填充 路 径 】 对 话 框 ， 如 
图 8.35 所 示 。 该 对 话 框 中 的 选项 与 前 面 介绍 的 
【填充 】 对 话 框 中 的 各 选项 功能 相同 ， 可 参阅 


| 相应 的 内 容 。 完 成 设置 后 ， 单 击 【确定 】 按 钮 。 


第 4 步 ， 按 ShiftrCtrlHH 组 合 键 隐 藏 路 径 ， 
可 得 到 如 图 8.36 所 示 的 图 像 效 果 。 
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图 8.31 选择 【建立 工作 路 径 】 命 令 
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图 8.33 ”建立 工作 路 径 
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图 8.34 选择 【填充 路 径 】 命 令 
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图 8.35 【填充 路 径 】 对 话 框 图 8.36 填充 后 的 效果 图 


除了 可 以 对 路 径 进行 填充 以 外 ,还 可 以 对 其 进行 描 边 , 在 描 边 过 程 中 可 以 指定 一 种 绘图 工具 来 进 
行 描 边 。 

【操作 步骤 】 

第 1 步 ， 打 开 需 要 描 边 的 路 径 ， 选 择 【 路 径 】 面 板 菜单 中 的 【 描 边 路 径 】 命 令 ， 或 者 按 住 Alt 键 | 
单 击 【 用 画笔 描 边 路 径 】 按 钮 .-Q _， 打 开 【 描 边 路 径 】 对 话 框 ， 如 图 8.37 所 示 。 

第 2 步 ， 在 【 描 边 路 径 】 对 话 框 中 选择 一 种 工具 进行 描 边 ， 然 后 单 击 【 确 定 】 按 钮 ， 描 边 操作 即 
可 完成 ， 如 图 8.38 所 示 。 
































5 


图 8.37 【 描 边 路 径 】 对 话 框 图 8.38 路 径 描 边 后 效果 


忘 提示 : 在 【路 径 ] 面板 上 单 击 【 用 画笔 档 边 路 径 】 按钮 G ， 可 以 直接 对 路 径 执行 描 边 操作 。 此 
时 使 用 的 描 边 工具 是 当前 在 工具 箱 中 选 定 的 工具 ， 其 选项 设置 也 与 当前 工具 的 设置 一 致 。 


8.3.9 绘制 几何 图 形 


在 工具 箱 中 选择 【 甜 形 工具 】 后 ， 可 以 绘制 出 矩形 、 正 方形 的 路 径 或 形状 。 下 面 介绍 使 用 【 甜 形 
工具 】 绘 制 一 个 按钮 的 方法 。 

【操作 步骤 】 

第 1 步 ， 在 工具 箱 中 选择 【矩形 工具 】， 单 击 选项 栏 中 的 【形状 】 按 钮 县 。 

第 2 步 ， 在 选项 栏 上 单 击 【 填 充 】 下 拉 列 表 框 ， 在 打开 的 面板 中 选择 填充 颜色 为 白色 。 
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Note | 绘制 圆 角 拢 形 的 方法 与 此 相同 ， 只 要 在 工具 箱 中 选择 【 圆 角 
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| 第 3 步 , 将 鼠标 移 至 图 像 窗口 ， 按 下 鼠标 左 键 并 拖 动 ， 将 出 。 全 看 荆 ee 
| 现 一 个 矩形 框 ， 如 图 8.39 所 示 。 

| 第 4 步 , 释放 鼠标 左 键 后 ,矩形 按钮 绘制 完成 。 此 时 【路 径 】 

| 面板 自动 建立 了 一 个 工作 路 径 ， 如 图 8.40 所 示 ， 并 在 【图 层 】 面 

| 板 中 自动 建立 了 一 个 形状 图 层 ， 如 图 8.41 所 示 。 











| 矩形 工具 】 回 ， 按 上 述 方法 进行 操作 ， 就 可 以 绘制 出 圆 角 矩 形 。 
| 两 者 的 区 别 是 ,【 圆 角 矩 形 工具 】 的 选项 栏 多 了 一 个 【半径 】 文 

| 本 框 。【 半 径 】 文 本 框 用 于 控制 圆 角 和 矩形 4 个 角 的 圆滑 程度 ， 数 。 [E> 宫 

| 值 越 大 ， 所 绘制 的 矩形 4 个 角 越 圆滑 。 若 将 【半径 】 的 数值 设 为 。 ”图 839 使 用 【 逢 形 工具 】 绘制 
0， 则 【国外 逢 形 工具 】 就 与 【 秆 形 工具 】 的 作用 一 样 
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图 8.40 “完成 矩形 路 径 绘 制 后 的 【路 径 】 面 板 图 8.41 【图 层 】 面板 


容 提示 : 当 使 用 【加 角 和 矩形 工具 】 绘 制 时 ， 如 果 同时 按 住 Shift 键 ， 则 绘制 的 是 正 圆 形 。. 
绘制 圆 形 和 椭圆 形 的 路 径 或 形状 需要 用 到 工具 箱 中 的 【椭圆 工具 〗 吕 ,其 使 用 方法 和 选项 
栏 设置 都 与 【矩形 工具 】 基 本 相同 。 


8.3.10 给 制 多 边 形 


使 用 【多 边 形 工具 】 全 可 以 绘制 等 边 多 边 形 ， 如 等 边 三 角形 、 五 角 星 和 星 形 等 。 在 工具 箱 中 选中 
| 【多 边 形 工具 】 后 会 显示 其 选项 栏 , 用户 通过 在 选项 栏 中 设置 多 边 形 工具 的 选项 ,可 以 绘制 出 更 多 的 
| 多边形 效 果 。 
| 【多 边 形 工具 】 的 选项 栏 与 【 甜 形 工具 】 的 选项 栏 相 似 ， 只 是 多 了 一 个 【 边 】 文 本 框 ， 用 于 设置 
| 所 绘制 的 多 边 形 边 数 ， 范 围 为 3~100， 当 边 数 为 100 时 ， 绘 制 出 来 的 形状 是 一 个 圆 。 
【操作 步骤 】 
第 1 步 ， 在 工具 箱 中 选择 【多 边 形 工具 】 合 。 
第 2 步 ， 在 选项 栏 中 设置 【多 边 形 工具 】 的 选项 。 
第 3 步 ， 移 动 鼠标 至 图 像 窗 口中 ， 拖 动 鼠 标 进行 绘制 ， 绘 制 的 多 边 形 效果 如 图 8.42 所 示 。 


窑 提示 : 在 绘制 多 边 形 时 ， 图 形 的 中 心 点 为 鼠标 在 图 像 窗口 中 首次 单 击 时 的 位 置 。 拖 动 鼠标 绘制 时 ， 
| 图 形 可 以 绕 中 心 点 旋转 以 调整 方向 。 
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图 8.42 绘制 的 多 边 形 效果 


8.3.11 绘制 直线 


使 用 【直线 工具 】 可 以 绘制 出 直线 、 箭 头 的 形状 和 路 径 。 其 绘制 操作 与 【和 拢 形 工具 】 基 本 相同 ， 


只 要 使 用 此 工具 在 图 像 窗 口 拖 动 就 可 以 拉 出 一 条 直线 。 


【操作 步骤】 
第 1 步 ， 在 工具 箱 中 选择 【直线 工具 】。 


第 2 步 ， 在 选项 栏 中 的 【粗细 】 文 本 框 设置 线条 的 宽度 ， 数 值 范围 为 1~1000， 数 值 越 大 ， 绘 制 


出 来 的 线条 越 粗 。 


第 3 步 ， 在 选项 栏 中 单 击 【 设 置 】 图 标 ， 打 开 【 箭 头 】 面 板 ， 如 图 8.43 所 示 。 通 过 【箭头 】 面 
板 进 行 设置 ,【 直 线 工 具 】 可 以 绘制 出 各 种 各 样 的 箭头 。 【第 头 】 面 板 中 各 个 选项 的 具体 含义 如 下 。 
起 点 : 
: 在 终点 位 置 绘制 出 箭头 。 
: 设置 箭头 宽度 ， 范 围 在 10%~1000% 之 间 。 
: 设置 箭头 长 度 ， 范 围 在 10%~5000% 之 间 。 
: 设置 箭头 凹 度 ， 范 围 在 50%~-50% 之 间 ， 如 图 8.44 所 示 。 


国庆 1@l00K i Re) | 
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在 起 点 位 置 绘制 出 箭头 。 
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图 8.44 设置 凹 度 
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第 4 步 ， 使 用 【直线 工具 】 绘 制 的 图 标 效果 如 图 8.45 所 示 。 
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8.3.12 ”绘制 自 定义 形状 


| 【 自 定义 形状 工具 】 宫 提供 的 是 一 些 不 规则 的 图 样 ， 用户 可 以 在 这 里 选择 套用 矢量 图 、 路 径 和 位 
| 图 填充 区 域 。 使 用 【 自 定 义 形状 工具 】 绍 可 以 绘制 出 Photoshop 预 设 的 各 种 形状 ， 如 箭头 、 月 牙 形 和 
| 心 形 等 形状 。 
| 【操作 步 又】 

第 1 步 ， 首 先 设置 前 景色 ， 设 置 的 颜色 将 会 填 入 所 绘制 的 图 形 中 。 
| 第 2 步 ， 在 工具 箱 中 选择 【 自 定义 形状 工具 】 安 。 
| 第 3 步 ， 在 选项 栏 中 单 击 【 形 状 】 下 拉 列 表 框 ， 打 开 如 图 8.46 所 示 的 下 拉 列 表 框 。 其 中 显示 了 
| 许多 预 设 的 形状 ， 在 其 中 单 击 选择 一 个 图 形 。 

第 4 步 ， 在 选项 栏 中 设置 其 他 选项 ， 如 样式 等 。 设 置 完 各 选项 后 ， 在 图 像 窗口 中 按 住 鼠 标 左 键 拖 
动 ， 就 可 以 在 图 像 窗 口中 绘制 自己 想 要 的 图 形 形 状 了 。 绘 制 完成 后 的 效果 如 图 8.47 所 示 。 
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一 地下 | | 站; 
| nu 沫 光电 区 
二 中 汉 闻 十 
VOe 沿 . w | 
| 图 846 【形状 ] 下 拉 列 表 杠 图 8.47 绘制 好 的 自 定义 形状 


| 第 5 步 ， 单 击 【 形 状 】 面 板 右上 角 的 小 三 角形 按钮 ， 可 以 打开 一 个 面板 菜单 ， 从 中 可 以 载 入 、 保 
| 存 、 蔡 换 和 重 置 面板 预 设 的 形状 ， 以 及 改变 面板 中 形状 的 显示 方式 。 
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8.4 在 Photoshop 中 编辑 图 像 


在 Photoshop 中 绘制 图 形 时 ， 图 形 的 位 置 和 大 小 不 符合 制作 要 求 是 很 常见 的 事 ， 所 以 需要 对 它们 | 
进行 编辑 修改 ， 如 选取 图 像 、 缩 放 图 像 大 小 、 旋 转 ， 以 及 重新 排列 和 组 合 各 个 对 象 等 。 下 面 就 介绍 这 
些 相关 功能 。 


8.4.1 选择 图 形 对 象 


选择 图 形 对 象 的 操作 很 简单 ， 只 要 在 工具 箱 中 选择 【路 径 移动 工具 】 导 ,然后 移动 鼠标 指针 至 窗 
口中 的 图 形 上 单 击 选中 对 象 ， 如 图 8.48 所 示 。 
Ps x me NR EBL 文 了 m 二 SG mT MSV OW 三 和 II [Lelel xj 


-| 
ET TD 


chp 


图 8.48 选择 图 形 对 象 
交 提示 : 在 Photoshop 中 绘制 的 图 形 和 插入 的 外 部 图 像 ， 都 是 以 对 象 的 方式 香 放 在 一 起 的 ， 各 个 对 ， 
象 之 间 是 独立 的 ， 在 编辑 某 一 对 象 时 ， 并 不 会 影响 另 一 个 对 象 。 只 是 前 面 的 对 象 有 时 会 遮 | 
盖 后 面 的 对 象 。 
8.4.2 变形 


选取 对 象 后 ， 要 对 对 象 进行 缩放 变形 ， 可 以 使 用 工具 箱 中 的 【直接 选择 工具 】 避 。 将 鼠标 指针 移 | 
到 路 径 上 单 击 ， 拖 动 鼠标 就 可 以 改变 对 象 的 形状 ， 如 图 8.49 所 示 。 
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图 8.49 变形 图 像 
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8.4.3 ”旋转 与 缩放 


选中 图 形 对 象 ， 然 后 执行 【编辑 】|【 自 由 变换 路 径 】 命 令 ， 或 者 执行 【编辑 】|【 变 换 路 径 】 下 
| 的 各 种 变形 命令 对 路 径 进行 变形 处 理 。 

| 此 时 图 形 对 象 四 周 将 出 现 8 个 控制 点 ， 移 动 鼠标 指针 至 控制 点 ， 当 鼠标 指针 变 为 双向 箭头 时 按 住 
并 拖 动 鼠标 可 以 缩放 图 形 ， 如 图 8.50 所 示 ; 而 将 鼠标 指针 移 至 对 象 外 的 区 域 ， 变 为 9 形状 时 ， 拖 动 
鼠标 指针 则 可 以 旋转 图 形 ， 如 图 8.51 所 示 。 
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图 8.50 缩放 图 形 图 8.51 旋转 图 形 
8.4.4 使 用 渐变 填充 


使 用 【渐变 工具 】 国 可 以 创建 多 种 颜色 间 的 逐渐 混合 ,实质 上 就 是 在 图 像 中 或 图 像 的 某 一 区 域 中 
填 入 一 种 具有 多 种 颜色 过 渡 的 混合 色 。 

1. 使 用 渐变 颜色 填充 

【操作 步骤 】 

第 1 步 ， 在 工具 箱 中 选择 【渐变 工具 】 国 。 

第 2 步 ， 此 时 ， 在 选项 栏 中 将 显示 如 图 8.52 所 示 的 设置 。 
| GWT0 Wt Ex ~ 不通 明度 : i00% | | 加 反 向 “世人 色 ”加 诺 明 域 

图 8.52 【渐变 工具 】 参 数 设置 


第 3 步 ， 单 击 渐变 预览 图 标本 二 一 右 边 的 黑色 小 三 角 由， 打开 如 图 8.53 所 示 的 下 拉 列 表 框 ， 从 中 
选择 一 种 用 于 填充 的 渐变 颜色 。 例 如 ， 选 择 革 方式 填充 ， 可 以 产生 从 前 景色 到 背景 色 的 渐变 效果 ， 如 
果 选 择 革 方式 填充 ， 则 可 以 产生 从 前 景色 到 透明 的 渐变 效果 .使 用 
以 上 两 种 方式 填充 时 ， 用 户 需 要 先 选择 前 景色 或 背景 色 。 下 -| 本 本 | mo 

第 4 步 ， 在 选项 栏 中 选择 一 种 填充 方式 ， 共 提供 了 5 种 方式 ， 
分 别 对 应 选项 栏 中 的 【线性 渐变 】 喇 、[ 径 向 渐变 】 四 【角度 渐 
变 】 加、[ 对 称 渐变 】 思 和 【 姜 形 渐变 】 加 这 5 个 按钮 。 默 认 设 
置 下 为 【线性 渐变 】 国 。 

第 5 步 ， 在 选项 栏 中 设置 其 他 参数 ， 如 模式 、 不 透明 度 、 仿 色 
和 反 向 等 ， 其 不 透明 度 和 模式 的 作用 前 面 已 经 介绍 过 ， 这 里 不 再 重 
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图 8.53 选择 渐变 方式 
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】 
复 。 下 面 简单 介绍 其 他 几 个 选项 的 功能 。 | 
加 【 反 向 】 复 选 框 : 选中 该 复 选 框 后 ， 填 充 后 的 渐变 颜色 刚好 与 用 户 设置 的 渐变 颜色 相反 。 

回 【 仿 色 】 复 选 框 :选中 该 复 选 框 ， 可 用 递 色 法 来 表现 中 间 色 调 ， 使 渐变 效果 更 加 平顺 。 
回 【透明 区 域 】 复 选 框 : 选中 该 复 选 框 ， 将 打开 透明 蒙 版 功能 ， 使 渐变 填充 时 可 以 应 用 透明 | 
设置 。 | 
第 6 步 , 设置 以 上 参数 后 , 移动 鼠标 指针 至 图 像 中 按 下 鼠标 并 拖 动 ， 当 拖 动 至 另 一 位 置 后 放 开 鼠 

标 即 可 在 图 像 ( 选 取 范 围 ) 中 填 入 渐变 颜色 ,效果 如 图 8.54 所 示 。 


痊 提示 : 拖 动 鼠标 填充 颜色 时 ， 若 按 下 Shift 键 ， 则 可 以 按 45。 、 水 平 或 重 直 的 方向 填充 颜色 . 此 | 
外 ,在 填充 颜色 时 拖 动 的 距离 越 长 ， 两 种 颜色 间 的 过 渡 效 果 就 越 平顺 ， 拖 动 的 方向 不 同 其 
填充 后 的 效果 也 不 一 样 。 如 果 在 填充 渐变 颜色 之 前 先 选 取 范围 , 那么 填充 操作 只 对 选取 范 
围 起 作用 。 
< 注意 : 【渐变 工具 〗 不 能 在 位 图 和 索引 瑚 色 模式 下 使 用 。 
2. 定义 渐变 填充 效果 
使 用 【渐变 工具 】 填 充 渐变 效果 的 操作 很 简单 ， 但 是 在 创作 图 形 时 ， 当 Photoshop 提供 的 渐变 色 
不 能 满足 你 的 要 求 时 ， 还 可 以 对 渐变 颜色 进行 编辑 ， 以 获得 新 的 渐变 色 。 所 以 ， 自 己 定义 一 个 渐变 颜 
色 是 创建 渐变 效果 的 关键 。 
【操作 步 又 】 
第 1 步 ， 选 中 【渐变 工具 】 然后 在 选项 栏 中 单 击 【渐变 】 下 拉 列 表 框 中 的 渐变 预览 条 EEEE 
打开 如 图 8.55 所 示 的 【渐变 编辑 器 】 对 话 框 。 





























图 8.54 填充 渐变 颜色 后 的 效果 图 8.55 【渐变 编辑 器 】 对 话 框 


第 2 步 ， 单 击 【新 建 】 按 钮 ; 或 者 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【新 渐变 】 命 令 ， 新 建 一 个 渐 
变 颜色 。 

第 3 步 ， 此 时 在 【 预 设 】 列 表 框 中 将 多 出 一 个 渐变 样式 。 选 中 它 ， 并 在 其 基础 上 进行 编辑 。 | 

第 4 步 ， 在 【名 称 】 文 本 框 中 输入 新 建 渐变 的 名 称 ， 再 在 【渐变 类 型 】 下 拉 列 表 框 中 选择 【 实 底 】| 





选项 。 
第 5 步 ， 在 渐变 颜色 条 上 单 击 起 点 颜色 标志 ， 此 时 【 色 标 】 选 项 组 中 的 【颜色 】 下 拉 列 表 框 将 会 
置 亮 ， 接 着 单 击 【颜色 】 下 拉 列 表 框 右 侧 的 小 三 角 按 钮 ， 在 打开 的 下 拉 列 表 中 选择 一 种 颜色 。 当 选择 
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| 设 起 点 为 100, 终点 为 0), 并 且 调 整 这 两 个 透明 标志 之 间 的 
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【前 景 】 或 【背景 】 选 项 时 ， 则 可 用 前 景色 或 背景 色 作为 渐变 颜色 ; 当选 择 【 用 户 颜色 】 选 项 时 ， 需 
| 要 用 户 自己 指定 一 种 颜色 ,即将 鼠标 指针 移 至 渐变 颜色 条 上 或 者 是 图 像 窗 口中 变 成 吸管 形状 , 此 时 单 
| 击 就 可 以 取 色 。 另 外 ， 也 可 以 双击 渐变 颜色 条 上 的 颜色 标志 打开 【 拾 色 器 】 对 话 框 选 取 颜色 。 

| 第 6 步 ， 选 定 起 点 颜色 后 ， 该 颜色 会 立刻 显示 在 渐变 颜色 条 上 ， 接 着 需要 指定 渐变 的 终点 颜色 ， 


| 即 选中 终点 颜色 标志 ， 按 照 第 5 步 中 介绍 的 方法 选择 一 种 颜色 。 


闪 提示 : 如 果 用 户 和 要 在 颜色 渐变 条 上 增加 一 个 颜 
色 标志 ， 则 可 以 移动 鼠标 指针 到 颜色 条 
的 下 方 ， 当 指针 变 为 小 手 形状 时 单 击 即 
可 ， 如 图 8.56 所 示 。 
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图 8.56 ”增加 渐变 颜色 





第 7 步 ， 指 定 渐变 颜色 的 起 点 颜色 和 终点 颜色 后 ， 还 可 以 指定 渐变 颜色 在 渐变 颜色 条 上 的 位 置 
以 及 两 种 颜色 之 间 的 中 点 位 置 ， 这 样 整个 渐变 颜色 编辑 才 算 完 成 。 设 置 渐变 位 置 的 方法 如 下 。 


选中 渐变 颜色 标志 ， 然 后 按 下 鼠标 拖 动 ， 如 图 8.57 所 示 。 
选中 渐变 颜色 标志 ， 然 后 在 【位 置 】 文 本 框 中 输 
入 一 个 数值 。 


岩 提示 : 要 删除 新 增 的 标志 ， 可 以 在 选中 颜色 标志 后 ， 
单 击 【位 置 】 文 本 框 右 侧 的 删除】 按钮， 或 


人 0， [ES 


bE 


者 将 颜色 标志 拖 出 渐变 颜色 条 均 可 。 I 


2 


如 果 要 设置 两 种 颜色 之 间 的 中 点 位 置 ， 则 可 在 浙 pr | Em 
变 上 颜色 条 上 单 击 中 点 标志 s， 并 拖 动 鼠 标 即 可 。 PIE 


第 8 步 , 设置 渐变 颜色 后 , 如 果 用 户 想 给 渐变 颜色 设置 1 一 


一 个 透明 蒙 版 , 那么 继续 后 面 的 步骤 。 在 渐变 颜色 条 上 方 选 a 
中 起 点 透明 标志 或 终点 透明 标志 , 然后 在 【 色 标 】 选 项 组 的 sa: non % 


Wi 


WED 





【不 透明 度 】 和 【位 置 】 文 本 框 中 设置 不 透明 度 和 位 置 ( 假 


中 点 位 置 。 
第 9 步 ， 设 置 好 上 述 所 有 内 容 后 ， 单 击 【 确 定 】 按 钮 即 可 完成 渐变 样式 的 编辑 。 


8.4.5 使 用 油漆 桶 填充 





图 8.57 改变 渐变 颜色 位 置 


使 用 【油漆 桶 工具 】| 人 J 可 以 在 图 像 中 填充 颜色 ， 但 它 只 对 图 像 中 颜色 相近 的 区 域 进行 填充 。【 油 


“2 
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< | 

漆 桶 工具 】 有 点 类 似 于 【 魔 村 工具 】 医 的 功能 ， 首 先 分 析 被 填充 颜色 的 亮度 值 ， 然 后 指定 色差 范围 | 
(填充 的 范围 一 般 是 图 像 的 近似 色 域 或 固定 的 选区 )。 | 
在 使 用 【油漆 桶 工具 】 填 充 颜 色 之 前 , 需要 先 选 定 前 景色 , 然后 才 可 在 图 像 中 单 击 以 填充 前 景色 。| 

如 果 进 行 填充 之 前 选取 了 范围 ， 则 填充 颜色 只 对 选取 范围 之 内 的 区 域 有 效 。 | 


8.4.6 使 用 【填充 】 命 令 


使 用 【填充 】 命 令 可 以 对 整个 图 像 或 选取 范围 进行 颜色 填充 ， 使 用 【填充 】 命 令 除了 能 填充 一 般 
的 颜色 之 外 ， 还 可 以 填充 图 案 和 快照 内 容 。 
【操作 步骤 】 
第 1 步 ， 先 在 图 像 中 选中 要 进行 填充 的 图 层 ， 如 果 是 对 某 一 个 选取 范围 进行 填充 ， 则 先 在 图 像 中 
选取 范围 (例如 载 入 一 个 选取 范围 )， 如 图 8.58 所 示 。 
第 2 步 ， 选 择 【 编 辑 】| 【填充 】 命 令 ， 打 开 【 填 充 】 对 话 框 ， 如 图 8.59 所 示 。 
第 3 步 ， 在 【填充 】 对 话 框 中 设置 各 选项 。 各 选项 功能 如 下 。 
【内 容 】 选 项 组 : 在 【使 用 】 下 拉 列 表 框 中 可 选择 要 填充 的 内 容 。 选 项 有 【前 景色 】【 背 
景色 】 【图案 【历史 记录 有 【黑色 】【50% 灰 色 】 及 【白色 】。 当 选择 【图 案 】 方 式 填充 
时 《要 选择 此 选项 ， 必 须 事先 定义 图 案 内 容 ， 和 否则 不 能 使 用 图 案 填充 )， 对 话 框 中 的 【 自 定 
图 案 】 下 拉 列 表 框 会 被 置 亮 ， 从 中 可 选择 用 户 定义 的 图 案 进行 填充 。 
【混合 】 选 项 组 :用 于 设置 不 透明 度 和 模式 。 
【保留 透明 区 域 】 复 选 框 ， 对 图 层 填充 颜色 时 ， 可 以 保留 透明 的 部 分 不 填 入 颜色 。 该 复 选 
框 只 有 对 透明 的 图 层 进行 填充 时 有 效 。 
第 4 步 ， 单 击 【确定 】 按 钮 即 可 得 到 如 图 8.59 所 示 的 效果 。 
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图 8.59 填充 颜色 后 效果 


次 提示 : 若 要 快速 填充 前 景色 ， 可 按 AlttDelete 快捷 键 或 AlttBackspace 快捷 键 ; 若 要 快速 填充 背 | 
景色 ， 可 按 CtrlHDelete 快捷 键 或 CtrlHBackspace 快捷 键 。 


8.4.7 ”使 用 【 描 边 】 命 令 


使 用 【 描 边 】 命 令 可 以 在 选取 范围 或 图 层 周 围 绘制 出 边框 .【 描 边 】 命 令 的 操作 方法 与 【填充 】 
命令 的 操作 方法 基本 相同 。 

【操作 步骤 】 

第 1 步 ， 先 选取 一 个 范围 或 选中 一 个 已 有 内 容 的 图 层 注意， 如 果 当 前 所 选 图 层 是 背景 层 ， 则 必 


"293 。 


一 Tool 到 [网 计 设 计 与 网 站 妹 设 从 入 门 到 精通 
| 须 先 选 取 范围 )。 
| 第 2 步 ， 选 择 【编辑 】|【 描 边 】 命令， 打开 如 图 8.60 所 示 的 【 描 边 】 对 话 框 ， 在 对 话 框 中 设置 
| 如 下 内 容 。 
会 内 【 描 边 】 选项 组 : 在 该 选项 组 的 【宽度 】 文 本 框 中 ， 可 以 输入 一 个 数值 (范围 为 1~16 像素 ) 
| 以 确定 描 边 的 宽度 ， 在 【颜色 】 列 表 框 中 选择 描 边 的 颜色 。 
Note | 加 【位 置 】 选 项 组 ， 设 置 描 边 的 位 置 ， 可 分 别 在 选取 范围 边框 线 的 内 、 中 和 外 进行 。 
| 回 【混合 】 选 项 组 ， 设 置 描 边 的 不 透明 度 和 模式 。 
回 【保留 透明 区 域 】 复 选 框 ， 其 功能 与 在 【填充 】 对 话 框 中 相同 。 
第 3 步 ， 单 击 【确定 】 按 钮 就 可 以 完成 描 边 的 操作 。 如 图 8.61 所 示 是 对 文字 进行 描 边 后 的 效果 。 
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图 8.60 【 描 边 】 对 话 框 图 8.61 文字 描 边 效果 


8.5 案例 实战 : 设计 网 页 标志 


前 面 详细 介绍 了 在 Photoshop 中 新 建 、 绘 制 和 编辑 图 形 的 基本 方法 ， 下 面 将 重点 介绍 如 何 绘制 网 
页 标志 的 方法 和 技巧 ， 以 实现 熟练 操作 Photoshop 各 种 绘图 工具 的 能 力 。 

标志 在 网 页 制作 中 应 用 广泛 ， 一 般 由 文本 、 图 形 、 图 像 等 元 素 构成 ， 有 的 标志 是 多 种 元 素 兼 而 有 
| 之 。Photoshop 具有 强大 的 图 形 绘制 功能 ， 在 Photoshop 中 绘制 标志 并 不 难 。 


8.5.1 文字 型 标志 


一 幅 别 致 的 文字 标志 ， 就 欣赏 角度 来 说 绝 不 亚 于 一 幅 优美 的 图 像 。 这 样 一 幅 好 的 文字 标志 在 
| Photoshop 中 可 以 轻松 制作 。 一 般 方法 是 对 文字 进行 变形 、 错 位 、 释 加 、 艺 术 组 合 、 卡 通化 、 图 像 化 
| 等 艺术 操作 ， 使 文字 具有 审美 特征 ， 如 图 8.62 所 示 。 

下 面 以 实例 的 形式 介绍 几 种 文字 型 图 


未 设计 方法 。 00 |e 
Mile Bai 字 EE 度 COOSI¢ 


| 实例 效果 如 图 8.63 所 示 ， 通 过 对 文字 和 
| 适当 变形 会 设计 出 非常 活泼 的 图 标 效果 。 


.294 . 





【操作 步骤 】 


第 1 步 ， 启动 Photoshop, 新 建文 件 , 画布 大 小 适当 。 用 文本 工具 输入 “DELL” 字样 ,如 图 8.64 


所 示 。 
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图 8.63 ”变形 文字 型 标志 效果 


图 8.64 输入 文字 





第 2 步 ， 复制 文本 图 层 ， 进 行 备份 (以 后 在 设计 中 要 随时 养 成 图 层 备份 习惯 ,避免 不 能 返回 的 错 
误 ) ， 把 备份 图 层 隐藏 。 选 择 中 间 文字 图 层 ， 选 择 【 图 层 】|【 栅 格 化 】|【 文 字 】 命 令 ， 把 文字 转换 | 


为 位 图 图 形 。 











第 3 步 ， 用 【 魔 棒 工 具 】 选 取 文 字 位 图 的 空白 处 ， 按 Shift+CtrltI 组 合 键 反选 文字 ， 要 注意 再 按 


住 Shift 键 增加 选取 字母 “D” 上 


第 4 步 ， 在 【路 径 】 面 板 菜单 中 选择 【建立 工作 路 径 】 命 令 ， 把 选区 转换 为 路 径 ， 


中 间 的 空白 。 
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= 中 caENROB 
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| 辐 济 条目 上 这 |] 国民 村 | 











第 5 步 ， 使 用 【路 径 选择 了 


图 8.65 输入 文字 





工具 选项 栏 中 设置 逆 时 旋转 45 


[ 具 】 选 择 字母 路 径 “E”， 选 择 【 编 辑 】|【 自由 变换 路 径 】 命 令 ， 
度 ， 如 图 8.66 所 示 。 














图 8.66 旋转 路 径 
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如 图 8.65 所 示 。 
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网 


页 设计 与 网 站 建设 从 入 门 到 精通 





第 6 步 ， 使 用 【直接 选择 工具 】 缩 短 字母 路 径 “L” 中 的 模 线 ， 然 后 用 【移动 工具 】 移 动 各 个 对 
| 象 ， 使 其 排列 更 紧密 ， 如 图 8.67 所 示 。 
第 7 步 ， 在 【路 径 】 面 板 中 把 路 径 转换 为 选区 ， 在 【图 层 】 面 板 中 隐藏 文字 转换 图 层 ， 新 建 空白 


【拓展 】 通 


| 图 层 ， 然 后 使 用 白色 进行 填充 即 可 得 到 最 终 的 效果 。 
| 通过 对 文字 的 变形 可 以 设计 出 丰富 多 彩 的 图 标 效果 ， 如 图 8.68 所 示 是 对 字母 “W” 的 


Note | 变形 而 得 到 的 上 海 大 众 公司 的 图 标 效果 。 
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图 8.67 调整 字母 工 的 路 径 图 8.68 “上海 大 众 公司 的 图 标 
2. 文字 抽象 化 


抽象 化 标志 最 大 特点 就 是 把 文字 意象 化 , 讲究 内 容 的 丰富 性 , 抽象 化 设计 取决 于 设计 者 的 想象 力 
的 发 挥 , 以 及 主旨 的 需要 。 下 面 以 Adobe 公司 的 图 标 设计 为 例 进行 介绍 , Adobe 公司 的 图 标 把 字母 “A” 
进行 艺术 化 处 理 ， 效 果 如 图 8.69 所 示 。 


【操作 步骤 】 


| 第 1 步 ， 新建 文件 ， 先 用 参考 线 布局 图 标的 比例 ， 方 法 是 选择 【视图 】| 【标尺 】 命 令 ， 显示 标尺 ， 
| 然后 用 鼠标 指针 在 标尺 上 拖 出 参考 线 到 编辑 窗口 中 ， 如 果 不 合适 可 以 随时 用 鼠标 进行 调整 ， 如 图 8.70 


所 示 。 


第 2 步 ， 选 择 【 视 图 】| 【参考 线 】| 【对齐 参考 线 】 命 令 ， 使 下 面 所 有 操作 时 绘制 的 图 形 对齐 到 


参考 线 。 





第 3 步 , 用 【和 矩形 工具 】 在 编辑 窗口 中 绘制 一 个 长 方形 ， 填 充 为 红色 ， 如 图 8.71 所 示 。 
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图 8.69 抽象 文字 型 标志 效果 


第 4 步 ， 复 制 该 矩形 ， 并 设置 填充 色 为 白色 ， 选 择 【 编 辑 】|【 变 换 】 





图 8.70 绘制 参考 线 
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图 8.71 绘制 矩形 
【和 斜 切 】 命 令 ， 和 矩形 四 周 
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| 

显示 有 8 个 控制 点 ， 把 光标 置 于 息 形 的 右上 角 ， 按 住 Shift 键 向 中 间 拖 动 ， 如 图 8.72 所 示 。 | 

第 5 步 ， 同 样 的 方法 ,复制 红色 矩形， 把 上 边 向 中 间 倾 斜 为 一 个 点 ， 变 形 为 一 个 正三 角形 , 然后 | 
按 住 Shift 键 缩小 该 三 角形 ， 如 图 8.73 所 示 。 | 

第 6 步 ， 设 置 缩小 的 三 角形 与 矩形 底 边 对 齐 和 横向 居中 对 齐 。 复 制 白色 填充 的 梯形 ， 以 同样 的 方 | 国 

法 缩小 ， 并 对 齐 到 底部 ， 遮 住 三 角形 的 左下 角 ， 如 图 8.74 所 示 。 区 
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| ee 
B 全 i | 
上 gp | 
日 | 
3 | C Ee | | 
| 
图 8.72 矩形 变形 图 8.73 三 角形 变形 图 8.74 复制 并 缩小 梯形 | 
第 7 步 ， 在 图 标底 部 输入 “Adobe” 公 司 名 称 ， 如 图 8.75 所 示 。 | 
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图 8.75 设置 文本 
【拓展 】 以 同样 的 方法 ， 可 以 设计 出 另外 一 种 效果 的 公司 图 标 ， 效 果 如 图 8.76 所 示 。 
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a 1 页 统计 与 网 站 于 设 以 入门 到 靖 表 


8.5.2 几何 型 标志 





5 利用 Photoshop 提供 的 图 形 工具 可 以 绘制 一 些 基 本 的 几何 图 形 ， 然 后 通过 变形 组 合 也 能 够 设计 出 
鲜 | ， 很 多 洒 亮 的 图 标 。 


note 


| 三 凌 公 司 的 图 标 是 一 个 非常 简单 的 几何 变形 组 合 , 但 也 是 世界 上 最 著名 的 商标 之 一 。 该 图 标 主要 
由 3 个 变形 的 矩形 对 称 组 成 ， 结 构 端正 匀称 ， 效 果 如 图 8.77 所 示 。 

【操作 步骤 】 

第 1 步 ， 新 建文 件 ， 先 用 参考 线 布 局 图 标的 比例 ， 并 设置 对 齐 参考 线 。 

第 2 步 ， 用 【和 矩形 工具 】 在 编辑 窗口 中 绘制 一 个 长 方形 ， 填 充 为 黑色 。 






























































即 可 。 
第 5 步 , 在 编辑 窗口 的 上 部 按 住 Shift 键 绘制 一 个 正方 形 ， 
| 旋转 45 度 角 ， 然 后 用 缩放 工具 缩小 ， 并 左右 压 扁 该 装 形 ， 如 [国葬 本 王 和 [= 
图 8.79 所 示 。 了 
第 6 步 ， 用 【移动 工具 】 并 结合 使 用 选项 工具 栏 ， 调 整 3 。 | 
个 图 形 的 位 置 关 系 ， 得 到 最 后 的 效果 如 图 8.78 所 示 。 | 
2.， 几何 组 合 
利用 基本 的 几何 图 形 进行 创意 组 合 , 也 能 够 设计 出 非常 精 
美的 图 标 ， 如 图 8.80 所 示 就 是 通过 矩形 、 多 边 形 工具 设计 的 


| 第 3 步 , 选择 【编辑 】I【 变 换 】I【 斜 切 】 命令 , 然后 把 光标 置 于 矩形 的 上 边 中 点 ， 当 光标 变 成 +» 
| 形状 ， 按 住 鼠标 左 键 向 右 拖 动 ， 如 图 8.78 所 示 。 
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| 图 8.77 简单 几何 型 标志 效果 图 8.78 变形 平行 四 边 形 

| 第 4 步 ， 复制 该 变形 和 矩形， 选择 【编辑 】| 【变换 】| 【水 平 翻转 】 命 令 ， 然 后 向 右 移 动 该 图 形 
| 

| 

| 
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图 标 。 | 
【操作 步 又】 | 
| 第 1 步 ， 新 建文 件 ， 先 用 参考 线 布局 图 标的 比例 关系 , 并 。 一 一 = 
| 设置 对 齐 参考 线 。 图 8.79 变形 蒜 形 


=“298。 








第 8 替 网 页 图像 编辑 基础 SS 
< | 
第 2 步 ， 用 【矩形 工具 】 在 编辑 窗口 中 绘制 3 个 正方 形 ， 填 充 为 不 同 的 颜色 ， 分 别 为 深 绿色 、 黑 | 
色 、 深 红色 ， 并 对 角 排 列 ， 如 图 8.81 所 示 。 | 
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ME ee 
图 8.80 组 合 几何 型 标志 效果 图 8.81 绘制 矩形 


第 3 步 ， 在 工具 箱 中 选择 【直线 工具 】， 设 置 前 景色 为 黑色 ， 在 编辑 窗口 中 绘制 一 个 工 形状 。 
第 4 步 ， 选 择 【 编 辑 】|【 变 换 】|【 水 平 翻转 】 命 令 ， 翻 转 工 形状 。 

第 5 步 ， 在 【属性 】 面 板 中 设置 该 形状 的 大 小 和 位 置 ， 如 图 8.82 所 示 。 

第 6 步 ， 复 制 工 形状 ， 并 向 左下 角 移动 10 像素 。 重 复 操作 3 次 ， 效 果 如 图 8.83 所 示 。 
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图 8.82 绘制 工 形状 8.83 复制 工 形 


第 7 步 ， 选 择 4 个 工 形状 ， 复 制 并 合并 。 方 法 是 按 CtrltJ 快捷 键 复制 ， 按 CalE 快捷 键 合并 图 层 。 
第 8 步 ， 对 该 组 合 对 象 进行 水 平 翻转 和 垂直 翻转 ， 并 移动 到 左下 角 ， 如 图 8.84 所 示 。 | 
第 9 步 ， 使 用 【钢笔 工具 】， 设 置 前 景色 为 白色 ， 绘 制 两 个 斜 角 为 43” 的 三 角形 ， 覆 盖 工 形状 | 
的 平头 形状 ， 设 计 工 形状 为 尖 角 ， 如 图 8.85 所 示 。 
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图 8.84 复制 并 组 合 工 形状 


图 8.85 设计 尖 角 形状 的 工 形状 


8.6 案例 实战 : 最 优化 图 像 


最 优化 图 像 通常 是 在 处 理 网 页 图 像 时 的 


作出 来 的 图 像 不 但 质量 好 ， 而 且 文件 小 ， 


-种 说 法 ， 究 竟 何 为 最 优化 图 像 呢 ?简单 地 说 ， 
易于 在 网 络 上 传输 ， 这 就 是 最 优化 图 像 。 所 以 ， 要 达到 最 优 


化 图 像 的 目标 ， 在 处 理 图 像 时 就 不 能 只 追求 图 像 品 质 而 忽视 文件 大 小 了 。 
影响 文件 大 小 的 几 个 重要 因素 是 分 辩 率 、 图 像 尺 寸 、 颜色 数目 和 图 像 格式 。 所 以 , 要 最 优化 图 像 ， 


为 了 兼顾 图 像 质量 和 文件 大 小 ， 


| 就 必须 考虑 这 些 相关 因素 ， 特 别 是 对 颜色 数目 和 图 像 格式 要 考虑 得 更 多 一 些 。 
在 使 用 网 页 图 像 时 ， 不 同类 型 的 图 像 要 选用 不 同 的 图 像 格式 。 例 


就 是 让 制 


如 ， 照 片 或 风景 画 的 图 像 可 以 选择 JPEG 或 PNG 格式 ， 因 为 这 两 种 格式 支持 真 彩色 24 位 ， 表 现 出 的 
色彩 会 更 丰富 一 些 , 这样 也 可 以 确保 图 像 的 质量 ,而 不 至 于 为 了 减少 文件 大 小 而 产生 图 像 失真 。 如 果 


【操作 步骤 】 


第 1 步 ， 启 动 Photoshop， 打 开 网 页 图 像 ， 如 图 8.86 所 示 。 
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图 8.86 打开 网 页 图 像 


按钮 或 图 标 ， 则 均 可 以 使 用 GIF 格式 。 下 面 以 示例 形式 介绍 如 何 最 优化 图 像 。 
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| 
第 2 步 ， 选 择 【 文 件 】| 【存储 为 Web 所 用 格式 】 命 令 ， 打 开 【 存 储 为 Web 所 用 格式 】 对 话 框 ， | 
如 图 8.87 所 示 ， 切 换 到 【四 联 】 窗 口 模式 显示 图 像 ， 同 时 显示 【优化 】 设 置 面板 。 | 
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图 8.87 优化 图 像 


第 3 步 ， 在 【四 联 】 模 式 的 窗口 中 ， 单 击 选择 一 个 预览 窗口 〈 被 选中 的 窗口 有 一 个 黑色 边框 ) 。 
第 4 步 ， 在 【优化 】 面 板 的 【保存 的 设置 】 下 拉 列 表 框 中 选择 一 种 图 像 格式 。 


容 提示: 虽然 存在 有 非常 多 的 图 片 格式 , 但 是 依据 压缩 方法 不 同 ， 所 有 的 图 片 都 能 进一步 归 类 为 两 
大 类 别 :无损 和 有 损 。 
无 损 数据 压缩 保证 了 图 像 在 没有 任何 品质 和 信息 丢失 的 情况 下 重 现 , 而 有 损 数据 压缩 的 结 
果 就 是 可 能 造成 品质 和 信息 的 丢失 。 在 平面 设计 领域 最 主流 的 无 损 媒介 格式 包括 GIF、 
PNG 和 TIFF， 而 JPEG 是 最 主流 的 有 损 压 缩 的 图 形 格式 。 

第 5 步 ， 选 择 GIF 格式 ， 在 此 面板 中 将 显示 图 像 颜色 数 及 其 他 参数 ， 如 图 8.88 所 示 。 选择 GIF | 
格式 时 ， 在 颜色 列表 中 将 显示 出 图 像 所 使 用 的 所 有 颜色 。 在 该 列表 中 用 户 可 以 增加 、 更 改 或 删除 颜色 
来 改变 图 像 效 果 ， 以 及 进行 锁定 颜色 、 设 置 透明 颜色 等 操作 。 





























图 8.88 选择 GIF 格式 
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如 果 选 择 JPEG 格式 ， 则 可 以 通过 设置 【质量 】 的 值 来 改变 文件 大 小 , 【质量 】 值 越 高 文件 越 大 ; 


反之 文件 越 小 ， 其 失真 程度 也 就 越 严重 。 
第 6 步 ， 在 窗口 右 下 角 设 置 图 像 的 大 小 和 品质 ， 如 图 8.89 所 示 。 


第 7 步 , 设置 各 项 参数 ,使 图 像 大 小 和 图 像 效 果 都 达到 最 佳 水 平 。 然 后 在 窗口 左 侧 4 个 视图 中 比 


如 图 8.90 所 示 。 


| 较 不 同 格式 和 优化 参数 下 的 视觉 效果 , 还 可 以 查看 图 像 格式 、 文件 大 小 、 下 载 速度 及 颜色 数目 等 信息 ， 
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图 8.89 定义 图 像 大 小 和 品质 图 8.90 ”比较 不 同 优化 品质 


容 提示: 当 用 户 在 窗口 右 侧 进行 设置 时 ,应 随时 观察 预览 窗口 中 的 图 像 效果 ， 以 及 窗口 下 方 的 提示 
信息 ,以 便 确定 一 个 最 佳 的 图 像 设置 。 例 如， 可 以 在 3 个 预览 窗口 中 分 别 选择 JPEG、GIF 
和 PNG 3 种 不 同 的 格式 . 从 中 可 以 看 到 ,3 种 图 像 格式 下 图 像 显 示 的 效果 区 别 。 而 3 种 格 
式 设置 下 ， 图 像 的 大 小 却 相差 很 大 。 选 择 JPEG 和 PNG 格式 时 图 像 均 较 大 ， 而 GIF 格式 
设置 下 的 图 像 却 很 小 ， 但 是 部 分 渐变 颜色 在 GIF 格式 下 显得 不 是 很 自然 。 因 此 ， 对 此 图 


形 来 讲 ， 选 择 JPEG 格式 是 最 合适 的 。 


窑 提示 : 一 般 来 说 ， 网 页 使 用 的 图 像 格式 大 多 为 GIF 格式 ， 主 要 是 因为 此 格式 具备 了 图 像 效 果 好 、 
文件 小 ， 以 及 支持 透明 背景 和 动画 等 诸多 优点 。 但 并 不 是 只 要 选择 GIF 格式 就 很 好 了 ， 
用 户 还 需 进行 相应 的 参数 设置 才能 达到 最 佳 效果 。 例 如 ， 在 本 例 的 图 中 ,以 128 色 的 颜色 
输出 并 不 是 最 佳 效果 ， 因 为 颜色 数目 还 可 以 设置 得 更 少 ， 通 过 调整 【颜色 】 下 拉 列 表 框 的 


值 来 达到 。 


第 8 步 ， 通 过 比较 ， 可 以 单 击 并 选中 最 优化 输出 的 图 像 。 最 后 ， 单 击 【存储 】 按 钮 ， 打 开 【 将 优 


化 结果 存储 为 】 对 话 框 ， 设 置 文件 名 、 格 式 和 设置 选项 ， 如 图 8.91 所 示 。 
第 9 步 ， 单 击 【保存 】 按 钮 ， 关 闭 对 话 框 ， 保 存 最 优化 的 图 像 。 
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图 8.91 设置 【将 优化 结果 存储 为 】 对 话 框 | 
8.7 案例 实战 : 分 割 图 像 


分 割 图 像 最 大 的 作用 就 是 可 以 局 部 优化 图 像 ， 从 而 易于 在 网 络 中 传输 ; 另外 一 个 作用 则 是 可 以 给 
同一 图 像 中 的 各 个 分 割 区 域 设置 超 链接 。 

例如 ， 如 图 8.92 所 示 的 图 像 是 一 个 网 页 主 图 ， 这 么 一 个 大 图 直接 应 用 到 网 页 中 是 不 合适 的 ， 因 
为 图 像 文件 太 大 ， 浏 览 者 需要 很 长 时 间 才 能 下 载 此 图 片 。 为 了 解决 这 一 问题 ， 可 以 使 用 Photoshop 的 
分 割 功能 ， 将 大 图 变 成 小 图 ， 这 样 就 有 利于 浏览 了 。 
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图 8.92 ”用 Photoshop 制作 的 首页 主 图 
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| 【操作 步骤 

| 第 1 步 ， 启 动 Photoshop， 打 开 制作 好 的 网 页 图 像 。 

| 第 2 步 ， 在 工具 箱 中 选择 【切片 工具 】， 然 后 移动 鼠标 指针 至 窗口 中 ， 单 击 并 拖 动 鼠标 即 可 拉 出 
鱼 内 | 一 个 分 割 区 域 ， 如 图 8.93 所 示 。 
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图 8.93 ”使 用 【切片 工具 】 分割 图 像 
提示 : 建立 切片 之 后 ， 如 果 不 满意 ， 可 以 按 CtrltZ 快捷 键 还 原 操作 ， 即 可 重新 创建 新 切片 。 也 
可 以 在 工具 箱 中 单 击 【 切 片 工具 了】 右 下 方 的 下 三 角 ， 从 弹出 的 下 拉 选 项 中 选择 【切片 选取 
工具 〗】， 然 后 单 击 选择 切片 ， 拖 动 切片 边框 来 调整 切片 区 域 大 小 。 


第 3 步 ， 用 同样 的 方法 将 图 像 分 割 成 如 图 8.94 所 示 的 8 个 区 域 ， 这 样 在 输出 时 就 会 被 分 为 8 个 
图 像 文 件 进行 保存 。 在 网 络 上 传输 时 ， 就 能 分 开 传输 了 ， 从 而 加 快 了 图 像 传 输 速度 。 
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图 8.94 将 图 像 分 成 10 个 区 域 
第 4 步 , 图 像 被 分 割 后 , 分 割 区 域 左上 角 会 显示 一 个 顺序 编号 , 这 块 区 域 就 是 分 割 区 域 。 使 用 【 切 
| 片 选 取 工具 】 可 以 选中 某 个 切片 区 域 ,该 切片 四 周 会 显示 控制 柄 ,表示 此 时 可 以 对 该 切片 区 域 进行 纺 
| 辑 操作 ， 如 改变 大 小 、 位 置 ， 如 图 8.95 所 示 。 
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图 8.95 ”编辑 选中 的 切片 


容 提示 在 使 用 【切片 工具 】 分 割 效 果 图 时 ， 应 该 注意 3 个 问题 : 

加 ”切片 之 间 不 要 预 留 空隙 . 

在 切 分 图 片 时 ， 应 该 确保 切片 之 间 不 要 留 出 空 陵 ， 读 者 可 以 通过 切片 编号 观察 ， 从 上 到 下 ， 从 左 
到 右 ， 如 果 切 片 编号 出 现 跳跃 ， 则 可 能 中 间 出 现 空隙 区 域 . 

加 切片 之 间 不 要 重 县 。 

除了 切片 之 间 不 要 预 留 空隙 外 ， 也 不 能 够 出 现 切 片 重 登 现象 。 如 果 出 现 重合 现象 ， 应 该 及 时 使 用 
【切片 选取 工具 了】 进行 调整。 

回 ”确保 切片 之 间 对 齐 

考虑 到 切片 最 终 都 被 转换 为 表格 , 因此 不 规则 的 切片 会 产生 大 量 谈 套 表格 , 并 产生 很 多 宛 余 代码 。 
在 操作 时 ， 应 该 尽量 确保 上 下 、 左 右 切片 之 间 保 持 对 齐 。 


第 5 步 ， 右 击 当前 编辑 状态 切片 ， 在 弹出 的 菜单 中 可 以 选择 为 切片 执行 各 种 操作 ， 如 图 8.96 所 示 。 
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图 8.96 使 用 快捷 菜单 编辑 切片 

第 6 步 ， 如 果 从 快捷 菜单 中 选择 【编辑 切片 选项 】 命 令 ， 可 以 打开 【切片 选项 】 对 话 框 ， 定 义 切 
片 的 类 型 、 名 称 ， 以 及 输出 为 网 页 后 会 产生 的 URL、 链 接 目标 〈 目 标 )、 描 述 的 信息 文本 〈 信 息 文本 )、 
鼠标 经 过 时 的 提示 文字 (Alt 标记 )。 另 外 ， 在 【尺寸 】 选 项 组 中 可 以 精确 定位 切片 的 坐标 位 置 (X 和 
立 )， 以 及 切片 大 小 C(W 和 瑞 )。 设 置 完毕 ， 单 击 【确定 】 按 钮 即 可 ， 如 图 8.97 所 示 。 


忘 提示 : 在 实际 操作 中 网 页 图 像 会 被 分 割 得 很 细 ， 这 样 方便 在 Dreamweaver 中 进行 编辑 ， 新 建 切 
片 之 后 ， 除 了 使 用 【切片 选取 工具 】 调 整 切片 的 位 置 和 大 小 外 ， 也 可 以 使 用 【切片 选取 工 
具 】〗 双 击 切片 区 域 ， 打 开 【 切 片 选项 】 对 话 框 。 





"305 








i 











优 直 | (A): sef 
= 一 | 信息 文本 (M): | 


Note | < 
| 和 
| wo:lo E 
| YO): [126 


| 
! 
| 图 8.97 设置 【切片 选项 】 对 话 框 
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8.8 案例 实战 : 导出 为 网 页 图 像 











在 Photoshop 中 绘制 图 像 和 优化 图 像 ， 最 终 目的 都 是 为 了 输出 图 像 并 应 用 到 网 页 中 。 完 成 设计 图 
的 切割 之 后 ， 就 需要 把 它 输出 为 网 页 文档 。 

【操作 步骤 】 

第 1 步 ， 继 续 以 上 面 示例 为 基础 进行 演示 。 在 Photoshop 中 选择 【文件 】|【 存 储 为 Web 所 用 格 
式 】 命 令 ， 打 开 【 存 储 为 Web 所 用 格式 】 对 话 框 ， 如 图 8.98 所 示 。 
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| 图 8.98 打开 【存储 为 Web 所 用 格式 】 对 话 框 
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第 8 音 网 页 图像 编辑 基础 一 | 
! 
窑 提示 : 每 个 PSD 源 图 建议 都 设计 3 套 配色 方案 ， 按 照 同样 规格 分 别 切 图 ， 且 3 种 配色 切 出 的 同 | 
一 区 域 图 片 命名 必须 相同 。 按照 配色 方案 建立 3 个 以 颜色 命名 的 文件 夹 ， 每 个 文件 夹 中 放 | 
置 “ 配 色 方案 ”制作 成 网 页 所 需 的 资料 。 | 
每 种 配色 方案 文件 夹 中 包含 的 必需 内 容 : images、css、headers、buttons 文 件 天 和 两 个 HTMLI | 
文件 ， 以 及 两 张大 小 网 页 效果 图 ; 所 有 命名 按照 样 例 进行 ， 自 定义 内 容 可 以 自由 命名 。 


网 页 布局 ， 所 有 网 页 都 由 以 下 几 部 分 组 成 。 
页 头 (logo、headers) 。 

一 级 导航 条 (buttons) 。 | 
二 级 导航 条 (buttons) 。 | 
页 面 内 容 区 〈 内 容 区 用 于 显示 正文 网 页 ) 。 | 
页 脚 ( 底 部 菜单 、copyright》。 | 
据 PSD 文件 决定 制作 的 区 域 ， 源 图 中 绘制 出 的 区 域 必须 制作 出 来 ， 没 有 的 区 域 ( 如 二 级 导航 | 
条 ， 或 页 脚 ) 不 需要 制作 。 | 
整个 页 面 要 制作 在 一 个 表格 之 内 。 然 后 通过 表格 嵌 套 设计 不 同 部 分 ， 具 体 说 明 如 下 。 | 
回 页 头 ， 可 以 把 header 制作 成 背景 ， 或 者 有 些 header 图 片 属于 不 规则 图 形 可 以 切 成 几 部 分 来 | 
处 理 ， 要 尽量 减少 切割 次 数 。logo 区 域 单独 制作 在 一 个 表格 内 (可 以 限定 表格 宽度 ); logo | 
分 为 logo 图 片 、 公 司 名 称 和 公司 标语 3 部 分 。 | 
一 级 导航 。 一 级 单 《 导 航 ) 中 的 内 容 必须 机 作 在 一 个 独立 的 表格 肉 ， 不 得 设置 单元 格 的 | 
宽度 和 高 度 ， 按 钮 图 片 需要 制作 出 超 连接 的 3 种 状态 变化 根据 PSD 图 ， 有 些 可 能 只 有 两 | 
种 状态 ) ; 每 一 项 里 的 图 片 和 文字 必须 制作 在 一 行 里 面 ， 可 以 使 用 <br> 使 它们 产生 分 行 显 | 
示 效 果 。 | 
| 
| 
| 
| 
| 
| 
| 
| 
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二 级 导航 〈 竖 导航 ) : 二 级 菜单 导航) 中 的 内 容 必 须 制作 在 一 个 独立 的 表格 内 ， 不 得 设 
置 表格 的 高 度 ， 文 字 链 接 最 少 需要 制作 出 超 连 接 的 两 种 状态 变化 。 
回 页面 内 容 区 : 可 以 使 用 替代 文本 使 页 面 撑 开 ， 达 到 在 1024x768px 的 屏幕 下 使 用 的 正 浏览 
器 出 现 左 右上 下 拉 伸 条 。 | 
回 ”页 脚 : 版 权 信 息 区 域 要 与 上 下 区 域 保留 一 定 的 距离 。 
底部 菜单 : 二 级 菜单 〈 导 航 ) 中 的 内 容 必 须 制作 在 一 个 独立 的 表格 内 ， 不 得 设置 表格 的 高 度 。 
第 2 步 ， 在 窗口 左 侧 选择 【切片 选取 工具 】〗 依次 单 击 选中 每 个 切片 ， 设 置 切片 的 图 像 质 量 。 在 | 
设置 中 ， 对 于 图 像 比较 复杂 且 比较 重要 的 切片 ， 则 可 以 设 定 比较 高 的 品质 ， 对 于 高 品质 的 图 片 ， 应 该 | 
设 定 为 卫 G 格式 (品质 ，60%)， 其 他 切片 没有 包含 图 像 或 者 复杂 的 色彩 ， 设 定 为 GIF 格式 即 可 ， 如 
图 8.99 所 示 。 









































图 8.99 设 定 为 卫 G 格式 切片 


Fe 
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| 第 3 步 ， 在 窗口 左上 位 置 单 击 选择 【优化 】 标 签 ， 切 换 到 优化 状态 ， 检 查 每 个 切片 的 优化 效果 ， 

| 以 便 根据 情况 调整 优化 品质 ， 并 在 左下 角 可 以 查看 优化 图 片 的 大 小 、 传 输 速率 等 信息 。 

| 第 4 步 ， 在 优化 过 程 中 ， 单 击 窗口 底部 的 【预览 】 按钮， 可 以 自动 开启 网 页 浏览 器 ， 预 览 当前 图 

| 片 转换 为 网 页 的 效果 。 

| 第 5 步 ， 设 定 完毕 ， 对 于 优化 后 的 切片 品质 感觉 满意 之 后 ， 可 以 单 击 【 存 储 】 按 钮 ， 打 开 【 将 优 
到 化 结果 存储 为 】 对 话 框 , 在 【文件 名 ] 文 本 框 中 设置 网 页 的 名 称 ,建议 以 英文 字母 配合 数值 进行 命名 
在 【格式 】 下 拉 列表 框 中 选择 【HTML 和 图 像 】 选项， 在 【设置 】 选 项 中 保持 默认 设置 ， 在 【切片 】 
下 拉 列 表 框 中 选择 【所 有 用 户 切片 】 选 项 ， 详 细 设置 如 图 8.100 所 示 。 











图 8.100 存储 为 网 页 格式 


存储 之 后 ,可 以 在 当前 站 点 目录 下 看 到 所 存储 的 HTML 文档 和 images 文件 夹 ， 在 images 文件 夹 
中 保存 着 所 有 的 用 户 切片 图 像 ， 直 接 双 击 HTML 文件 名 ， 即 可 在 网 页 浏览 器 中 预览 网 页 效果 。 

第 6 步 ， 在 Dreamweaver 中 打开 HTML 文件 ， 可 以 看 到 所 有 的 切片 图 像 都 是 通过 隐形 表格 进行 
控制 ， 接 着 可 以 让 表格 居中 显示 ， 并 设计 网 页 背景 色 ， 如 图 8.101 所 示 。 
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8.101 设置 网 页 居中 显示 
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第 8 章 网 页 图 像 编辑 基础 





【拓展 】 
色彩 模式 


网 页 图 像 都 在 屏幕 中 预览 ， 一 般 均 为 RGB 格式 ， 如 果 要 更 改色 彩 模式 ， 可 以 在 Photoshop 中 打 | 


开 图 片 ， 选 择 【 图 像 】| 【模式 】| 【RGB 色彩 】 命 令 即 可 。 
加 ”解析 度 


对 于 屏幕 来 说 ， 大 部 分 网 页 图 像 的 解析 度 只 需要 72 像素 /英寸 ， 如 果 高 于 这 个 解析 度 ， 就 会 导致 


图 像 大 小 暴 增 。 

图 像 大 小 

在 网 页 中 ,图 像 大 小 直接 影响 到 浏览 器 的 下 载 速度 ， 在 兼顾 小 而 美的 设计 原则 下 ,图像 尽 可 能 要 
压缩 小 ,当然 要 确保 图 像 浏览 质量 的 前 提 下 , 一 般 对 于 网 页 修饰 性 的 图 片 一 般 大 小 不 应 该 大 于 30KB。 

图 像 格式 

网 页 图 像 格 式 主要 包括 GIF、JPG 和 PNG。JPG 格式 适合 应 用 色彩 丰富 的 图 片场 合 ， 但 不 适合 
简单 色彩 〈 色 调 少 ) 的 图 片 ， 如 LOGO、 各 种 小 图 标 (ICONS )。GIF 不 适合 应 用 于 色彩 丰富 的 照片 ， 
主要 适合 应 用 于 LOGO、 小 图 标 和 用 于 布局 的 图 片 〈 如 布局 背景 、 角 落 、 边 框 等 )， 对 于 仅 包含 不 超 
过 256 种 色彩 的 简单 图 片 也 可 以 考虑 使 用 。GIF 支持 基本 的 透明 特性 ， 可 以 设置 透明 背景 ; 也 支持 动 





画 ， 可 以 用 来 设计 简单 的 动态 提示 性 效果 。PNG 拥有 JPG 和 GIF 格式 的 不 同 优点 ， 使 其 具有 更 广泛 | 


的 应 用 场合 。 它 支持 多 色彩 ， 也 支持 透明 特性 ， 成 为 网 页 设计 中 首选 的 图 像 格式 。 
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制作 网 页 图 像 


( 怨 视频 讲解 : S6 分钟 ) 


图 像 是 网 页 中 不 可 或 缺 的 组 成 成 分 ， 丛 当地 使 用 图 像 ， 可 以 使 网 站 充满 生命 力 与 说 服 力 。 
另外 ， 网 页 图 像 又 包括 很 多 功能 的 类 型 图 像 元 素 。 例 如 ， 用 于 完成 站 内 导航 功能 的 图 像 按钮 和 
导航 条 ; 用 于 装饰 页 面 的 背景 图 像 ; 用 于 显示 动态 效果 的 图 像 交换 ; 实现 页 面 布局 的 网 页 主 图 
吸引 浏览 者 关注 的 站 OGO 图 标 ， 以 及 图 像 标 题 ; 实现 网 站 经 济 收入 的 Banner 广告 条 等 。 这 些 
图 像 元 素 在 网 页 中 扮演 不 同 的 角色 ， 构 成 一 幅 完美 的 网 页 。 本 章 将 介绍 用 Photoshop 制作 上 述 
各 种 类 型 的 图 像 元 素 ， 并 用 Dreamweaver 在 网 页 中 插入 制作 的 图 像 元 素 ， 以 及 使 用 CSS 控制 背 
景 图 像 的 方法 


【学 习 重 点 】 

制作 和 插入 网 页 主 图 

制作 标题 文字 

制作 网 页 按钮 

制作 网 页 背景 图 像 

制作 其 他 网 页 元 素 

制作 LOGO 

制作 Banner 

CSS 控制 背景 图 片 的 方法 

综合 运用 CSS 的 背景 样式 进行 网 页 设计 


至 吾 于 至 至 于 至 至 蛙 


第 9 章 制作 网 页 图 傣 





9.1 制作 网 页 主 图 


网 页 主 图 是 一 个 网 页 的 门面 ， 它 体现 所 在 网 页 的 整体 风格 。 例 如 ， 如 图 9.1 所 示 是 一 个 公司 的 主 | 
页 ， 主 页 设计 在 很 大 程度 上 决定 了 整个 网 页 的 主体 色彩 、 布 局 以 及 风格 。 因 此 ， 在 网 页 设计 时 , 一般 
应 首先 在 Photoshop 中 设计 主页 图 形 。 
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9.1 公司 首页 主 图 制作 效果 


设计 网 页 主 图 是 比较 关键 的 环节 ， 主 图 制作 得 好 坏 ， 将 直接 关系 到 能 否 吸引 浏览 者 的 注意 力 。 一 
个 优秀 的 主 图 寥寥 几 笔 就 能 生动 地 勾画 网 站 的 特点 。 一 般 来 说 ， 主 图 的 颜色 必须 与 网 页 完美 融合 、 
独特 的 创意 ， 这 是 制作 主 图 时 必须 注意 的 。 另 外 ， 网 页 中 的 主 图 不 仅 要 好 看 ， 还 应 恰当 地 表现 网 页 主 
题 思想 、 图 像 文 件 大 小 等 要 求 。 


容 提示 : 主 图 是 多 种 多 样 的 ， 它 可 以 是 一 幅 极 具 创意 的 特效 图 像 ， 也 可 以 是 一 个 特别 精致 的 小 图 ， 
或 者 干脆 整个 网 页 就 使 用 一 幅 大 图 ， 如 图 9.2 所 示 是 两 家 类 型 和 风格 明 然 不 同 的 主页 , 网 | 
站 主题 、 磊 色 和 布局 都 不 同 ， 但 主页 中 都 使 用 了 一 幅 大 图 ， 而 这 个 简单 漂亮 的 图 形 充 分 体 | 
现 出 了 其 网 页 的 特色 。 | 





儿童 乐园 类 


9.2 ”以 一 幅 大 图 作为 首页 


“31. 
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砚 贡 设计 与 网 站 建设 从 入 门 到 精通 





下 面 就 以 图 9.1 所 示 首 页 主 图 为 实例 ， 介 绍 主 图 的 一 般 制 作 方法 。 
9.1.1 制作 主页 头 部 标题 和 导航 区 域 


主页 头 部 标题 和 导航 








区 域 具体 操作 如 下 。 


第 1 步 ， 启 动 Photoshop， 新 建文 档 ， 设 置 画 布 大 小 为 1000 像素 *1000 像素 大 小 。 选 择 【 视 图 】| 
【标尺 】 命 令 ， 显 示 标尺 刻度 。 
第 2 步 ， 在 左 侧 和 顶部 分 别 拖 动 辅助 线 ， 用 辅助 线 勾画 出 页 面 布局 的 草图 ， 如 图 9.3 所 示 。 


1. 头 部 标题 、 导 航 区 
2. 广 告 区 
3. 标 题 新 闻 区 


( ， | 
< 
一、 4 路 标 指示 区 
5. 主 体内 容 区 
3 5 6 辅助 功能 区 
7. 次 要 内 容 区 
CS 8. 脚 部 区 域 


图 9.3 用 辅助 线 勾画 主页 的 布局 


第 3 步 ， 制 作 头 部 标题 和 导航 区 域 。 头 部 制作 效果 如 图 9.4 所 示 ， 共 分 4 个 小 步 又， 第 1 步 制作 
头 部 修饰 边框 ， 第 2 步 制作 头 部 渐变 背景 ， 第 3 步 制 作 主导 航 按钮 ， 第 4 步 制 作 次 导航 按钮 。 
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9.4 ”设计 头 部 标题 和 导航 区 域 效果 


第 4 步 ， 头 部 修饰 边框 需要 自 定义 一 块 纹理 图 案 , 如 图 9.5 所 示 。 然后 选择 【编辑 】| 【定义 图 案 】 
命令 ， 把 当前 图 案 图 像 定 义 为 Photoshop 图 案 。 








图 9.5 自 定义 图 案 背景 


“3 。 


第 9 章 制作 网 页 图像 ”| 


第 5 步 ， 自 定义 图 案 越 小 越 好 ， 保 存在 同一 文件 夹 中 。 
用 【和 矩形 选 框 工具 】 绘 制 一 个 1004 像素 x28 像素 的 长 条 和 矩形。 

第 6 步 ,新 建 图 层 ， 选 择 【编辑 】 | 【填充 】 命令, 在 【 填 
充 】 对 话 框 的 【使 用 】 下 拉 列 表 框 中 选择 【图 案 】 选 项 ， 然 
后 选择 上 面 定义 好 的 背景 图 案 ， 如 图 9.6 所 示 。 单 击 【 确 定 】 
按钮 ， 填 充 选 区 ， 制 作 顶 部 装饰 条 。 

第 7 步 , 用 【直线 工具 】 绘 制 一 条 直线 ， 在 工具 选项 栏 
中 设置 填充 颜色 为 #e4b5a6， 粗 细 为 4 像素 ， 然 后 按 住 Shift 
键 ， 在 顶部 拉 出 一 条 直线 ， 效 果 如 图 9.7 所 示 。 图 9.6 填充 图 案 背 景 | 

第 8 步 ， 新 建 图 层 ， 使 用 【渐变 工具 】 在 线条 的 下 方 应 | 
用 渐变 填充 ， 渐 变 类 型 为 直线 渐变 ， 颜 色 从 白色 到 浅黄 色 ， 如 图 9.8 所 示 。 | 


国 meeef 逐 立 作 pad 加 200% (copyigh: 63/87)™ | 
号 用 EN Dh 
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图 9.7 制作 直线 
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图 9.8 制作 渐变 背景 
第 9 步 ， 关 于 导航 按钮 可 以 用 文本 制作 ， 按 钮 间隔 点 为 直线 ， 并 设置 直线 点 线 线 型 ， 如 图 9.9 所 示 。 
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9.9 设置 点 线 步骤 和 效果 


9.1.2 制作 广告 区 


广告 区 主要 是 导入 事先 制作 好 的 广告 条 ， 并 输入 装饰 性 的 文字 。 
【操作 步骤 】 
第 1 步 ， 先 制作 好 两 条 广告 条 ， 效 果 如 图 9.10 所 示 。 
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图 9.10 制作 好 的 广告 条 


| 第 2 步 ， 在 Photoshop 中 ， 选择 【 文 件 】 |【 置 入 】 命令， 在 打开 的 【 置 入 】 对 话 框 中 选择 上 面 的 
| 广告 条 。 

第 3 步 ， 按 CtrltT 快捷 键 ， 调 整 置 入 的 图 像 大 小 ， 并 使 用 【移动 工具 】 调 整 位 置 。 

第 4 步 ， 用 【文本 工具 】 在 广告 条 的 图 像 中 输入 修饰 性 文本 ， 如 图 9.11 所 示 。 
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图 9.11 输入 文本 
9.1.3 ”制作 标题 新 闻 区 


标题 新 闻 区 位 于 主页 的 左 侧 ,主要 列表 显示 最 新 最 重要 的 新 闻 标题 , 单 击 链接 可 以 打开 二 级 页 面 
查看 详细 内 容 。 

【操作 步骤 】 

第 1 步 ， 先 导入 栏目 的 标题 背景 图 案 背景 图 案 可 以 事先 在 Photoshop 中 制作 完成 ， 如 图 9.12 所 示 。 

第 2 步 ， 再 导入 栏目 图 标 ， 用 文本 输入 标题 和 副标题 ， 如 图 9.13 所 示 。 
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i 四 目 
| 上 
| 下 E 
| [ow 加 em ni EGG ox E_np7 ED ra 
| 图 9.12 导入 栏目 标题 背景 图 9.13 输入 文本 


| 第 3 步 ， 在 栏目 标题 的 下 面 增加 栏目 间隔 线 和 指示 图 标 ， 其 中 间隔 线 设 置 为 虚线 显示 ， 颜 色 为 灰色 。 
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第 4 步 ， 复 制 该 间隔 线 和 指示 图 标 ， 按 向 下 方向 键 移动 位 置 ， 重 复 多 次 操作 ， 制 作 一 序列 间隔 线 
和 指示 图 标 ， 如 图 9.14 所 示 。 
第 5 步 ， 用 圆 角 矩形 绘制 两 个 功能 区 ， 并 导入 装饰 图 标 ， 用 【文本 工具 】 输 入 跳 转 按钮 ， 如 图 9.15 | 
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[er OE Ee se | 
图 9.14 设置 分 隔 线 图 9.15 绘制 圆 角 矩形 框 和 跳 转 按钮 | 


9.1.4 制作 主体 区 


主体 区 域 包括 主体 图 片 信息 和 次 要 信息 ， 浏 览 效果 如 图 9.16 所 示 。 同 时 ， 为 了 介绍 方便 ， 本 节 
把 路 标 指示 区 和 脚 部 区 域 的 设计 一 同 介绍 。 
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9.16 主体 区 域 设计 效果 


【操作 步骤 】 

第 1 步 , 用 【椭圆 工具 】 绘 制 路 标 指示 牌 前 的 图 标 ， 用 文本 输入 路 径 提示 文字 。 用 【直线 工具 】 
绘制 一 条 宽 为 69.9 像素 、 大 小 为 1 像素 的 直线 , 颜色 和 上 面 文本 颜色 一 致 , 全 部 为 土 黄色 (#D98359) 。 
再 用 【 甜 形 工具 】 绘 制 一 个 长 方形 ， 长 为 69.9 像素 ， 高 为 4 像素 ， 填 充 色 为 浅 青色 (#456A9.C) ， 
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/Wr ) 
| 让 % 
| 和 上 面 直线 紧密 排 
| 第 2 步 ， 新 建 一 
| 用 国 角 矩形 工具 给 人 

第 3 步 , 绘制 一 

















砚 贡 设计 与 网 站 建设 从 入 门 到 精通 





在 一 起 。 

个 图 层 文件 夹 ， 命名 为 “主体 区 1”。 用 【文本 工具 】 输 入 标题 和 内 容 英文 字母 ， 
区 域 边框 ， 并 导入 新 闻 图 片 。 

条 虚线 作为 信息 分 隔 线 , 用 【 圆 角 托 形 工具 】 绘 制 一 个 圆 角 和 托 形 按钮 ， 在 【属性 】 





面板 中 应 用 投影 滤 镜 效果 ， 如 图 9.17 所 示 。 





index( 尖 文件 psd @@ 200% (ft menu RGB/E 司 > ol x 





EE 


lm [so [0,, 0 [0 [rm [en 0 Tm [sm [sD [0 [0 








Title 





Title 











Content 

















0 [ys 














图 9.17 制作 图 片 新 闻 主体 区 


第 4 步 ， 全 部 设计 完毕 ， 用 鼠标 拖 动 “主体 区 1” 文 件 夹 ， 复 制 该 文件 夹 所 有 内 容 ， 并 用 方向 键 
整体 移动 复制 的 文件 夹 内 容 。 用 此 方式 制作 3 个 相同 设计 的 图 片 新 闻 区 。 
第 5 步 ， 在 次 主体 区 域 绘制 两 条 直线 ， 作 为 分 隔 线 ， 并 设置 颜色 ， 输 入 标题 。 效 果 如 图 9.18 所 示 。 








时 间 日 期 





















icmp 200% er man RGB 
| - 酌 | 击 


lol 
| 
Content Content 






























[se 画 一 aa 
图 9.18 制作 次 主体 区 域 
9.2 制作 标题 文字 
| 
| 在 网 页 设计 中 ， 标题 文字 比较 重要 ， 因 为 标题 文字 设计 得 是 否 吸引 人 ,将 直接 关系 着 网 页 的 整体 


| 效果。 而 在 设计 标题 文字 时 ， 除 了 名 字 好 听 、 吻 懂 、 富 有 情趣 之 外 ， 还 要 在 文字 效果 的 创意 上 下 一 香 


| 工夫， 这 样 才能 引起 浏览 者 的 注意 。 
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9.2.1 文字 的 输入 和 编辑 


要 制作 标题 文字 ， 首 先 要 输入 文字 内 容 ， 然 后 才能 对 文字 做 各 种 特效 处 理 。 在 Photoshop 的 工具 | 
箱 中 选择 【文本 工具 】A 。 然 后 移动 鼠标 指针 到 图 像 窗口 中 并 单 击 ， 即 可 在 窗口 中 直接 输入 文字 , 如 | 
图 9.19 所 示 。 
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图 9.19 使 用 【文本 工具 】 输 入 文字 
选择 【窗口 】 |【 字 符 】 命 令 ， 打 开 【字符 】 面 板 。 利 用 该 面板 可 以 为 文字 设置 字体 、 字 号 、 对 
齐 方式 及 颜色 等 格式 。 完 成 设置 后 ， 即 可 在 文档 窗口 中 看 到 设置 文本 格式 后 的 效果 。 
旋 提示 : 如 果 用 户 对 输入 的 文字 字体 等 格式 不 满意 ， 可 以 使 用 [文本 工具 选中 窗口 中 的 文字 对 象 ， 
然后 在 【字符 】 面 板 中 重新 设置 即 可 . 
9.2.2 ”标题 文字 制作 技巧 


在 制作 网 页 标题 文字 时 ， 要 做 到 简单 、 醒 目 ， 所 以 需 对 标题 文字 进行 一 些 简单 的 特效 处 理 ， 如 添 
加 阴影 、 发 光 及 渐变 颜色 等 效果 。 但 并 不 是 将 标题 文字 搞 得 越 复杂 就 越 漂亮 ， 往 往 是 简单 明了 的 效果 
反而 让 人 喜欢 。 如 图 9.20 所 示 是 一 些 常见 的 标题 文字 效果 。 
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图 9.20 一些 常见 的 标题 文字 效果 


se 





到 网 贡 设 计 与 网 站 建设 从 入 门 到 精通 


1 制作 阴影 效果 
| 阴影 文字 是 万 能 的 特效 文字 ， 可 适用 于 任何 页 面 。 只 要 给 文字 添加 阴影 效果 ， 就 可 以 立 竺 见 影 地 
。 收 到 奇效 。 制 作 阴影 文字 时 ， 一 般 可 按 如 下 步骤 操作 。 
| 【操作 步骤】 
| 第 1 步 ， 在 Photoshop 中 输入 文字 ， 并 设置 文本 格式 。 
第 2 步 ， 单 击 【 图 层 】 面 板 底部 的 【添加 图 层 样式 】 按 钮 ， 从 弹出 的 菜单 中 选择 【投影 】 命 令 ， 
| 并 设置 阴影 的 各 项 参数 ， 如 图 921 所 示 。 
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图 9.21 设置 投影 样式 


2， 制 作 发 光 效果 

发 光 文 字 的 效果 不 亚 于 阴影 文字 ， 其 制作 方法 与 制作 阴影 文字 相同 ， 只 要 在 输入 文字 后 单 击 【 图 
层 】 面 板 底部 的 【添加 图 层 样式 】 按 钮 ， 从 弹出 的 菜单 中 选择 【外 发 光 】 或 【内 发 光 】 命 令 ， 在 打开 
的 【图 层 样式 】 对 话 框 中 进行 设置 ， 然 后 单 击 【 确 定 】 按 钮 即 可 ， 如 图 9.22 所 示 。 
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| 9.22 设置 投影 样式 
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深 提示 : 制作 发 光 文字 时 , 文字 颜色 与 发 光 的 颜色 一 定 要 有 较 大 反差 。 如 果 文字 为 白色 ， 则 发 光 的 | 
颜色 就 必须 是 深 颜 色 ; 反之 ， 若 文字 为 黑色 ,发 光 颜 色 就 应 为 淡 颜色 . 此 外 ,还 要 考虑 背 | 


景 颜色 ， 即 背景 颜色 与 发 光 颜 色 之 间 也 要 有 较 大 的 反差 ,只 有 做 到 这 一 点 ， 才 能 使 文字 发 
光 效 果 明 显 。 

3. 制作 背景 效果 

给 标题 文字 加 入 背景 图 像 ， 也 是 在 制作 标题 文字 时 常用 的 手法 。 例 如 ， 可 以 加 入 一 些 漂亮 的 小 图 





标 ， 或 者 有 渐变 颜色 的 色 块 等 。 但 要 记 住 ， 前 景 文字 与 背景 图 像 的 颜色 及 大 小 要 拱 配 得 当 ， 否 则 就 会 | 


画蛇添足 。 

此 外 ， 在 设计 标题 文字 时 ， 要 合理 安排 文字 内 容 。 特 别 是 当 标题 中 文字 较 多 或 者 有 副标题 时 ， 更 
需要 合理 地 规划 文字 ， 如 文字 的 内 容 、 字 体 、 大 小 、 颜 色 及 排列 方式 等 。 只 有 做 到 这 些 ， 才 能 使 标题 
内 容重 点 突出 、 主 题 鲜明 。 


窒 提示 : 标题 文字 的 制作 没有 固定 的 标准 ， 是 否 成 功 ， 取 决 于 设计 者 的 创意 和 设计 思想 。 至 于 该 如 
何 制 作 ， 要 看 用 户 对 Photoshop 软件 的 熟悉 程度 。 





9.3 ”制作 网 页 按钮 


在 Photoshop 中 制作 网 页 按钮 ， 一 般 可 以 按 如 此 步骤 进行 操作 。 

【操作 步骤 】 

第 1 步 ， 在 Photoshop 中 绘制 出 按钮 形状 ， 如 和 托 形 、 圆 形 、 椭 圆 或 多 边 形 。 绘 制 按钮 形状 ， 可 以 
使 用 Photoshop 提供 的 形状 工具 ; 如 果 是 绘制 不 规则 的 形状 ， 则 可 使 用 【钢笔 工具 】 【刷子 工具 】 和 
【铅笔 工具 】)， 再 用 【自由 变形 工具 】 和 【更 改 区域 形 状 工具 】 进 行 调整 。 


第 2 步 ， 利 用 【图 层 样式 】 对 话 框 对 按钮 对 象 进行 处 理 。 例 如 ， 给 按钮 填充 渐变 颜色 ， 或 者 填 入 | 


一 些 底 纹 效果 等 。 

第 3 步 ， 给 按钮 添加 立体 效果 ， 使 其 一 看 就 是 一 个 按钮 ， 此 时 可 以 使 用 【样式 】 面 板 为 按钮 添加 
一 些 样式 效果 ， 使 按钮 具有 立体 感 。 当 然 也 可 以 使 用 其 他 效果 。 

第 4 步 ， 进 行 按钮 形状 的 编辑 ， 最 后 给 按钮 命名 。 这 样 就 完成 了 网 页 按钮 的 制作 。 

悬 停 按钮 是 一 组 按钮 的 组 合 ， 它 在 网 页 中 有 多 种 显示 状态 。 在 Photoshop 中 制作 悬 停 按钮 的 操作 
步 又 如 下 。 

【操作 步骤 】 

第 1 步 ， 新建 文档， 在 【图 层 】 面板 中 新 建 图 层 
1, 使 用 图 形 工具 绘制 一 个 圆 角 矩形, 填充 颜色 指定 ， 
如 图 9.23 所 示 。 

第 2 步 ， 选择 【窗口 ] 上 样式 】 命令， 打开 【 样 | 元 元 
式 】 面板， 从 中 选择 一 款 样式 , 单 击 为 当前 背景 图 层 。 乌有 [L ] | 
进行 应 用 ， 如 图 9.24 所 示 ， 也 可 以 自己 利用 【图 层 。 | Ba | 
样式 】 对 话 框 自 定义 设计 。 E 

第 3 步 ， 重 命名 “图 层 1” 为 “正常 ”， 然 后 按 EE 7 Ui 
Ctrl+J 快捷 键 复制 该 图 层 ， 命 名 为 “ 移 过 ”。 为 该 图 图 9.23 ”设计 悬 停 按钮 背景 
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| 层 应 用 “投影 ” 效果 ， 设 置 保持 默认 值 即 可 ， 设 置 【 不 透明 度 】 为 5096， 降 低 阴 影 度 ， 效 果 如 图 9.25 
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图 9.24 为 按钮 应 用 样式 
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图 9.25 设计 鼠标 经 过 样式 


框 中 修改 浮雕 设 置 参 数 ， 如 图 9.26 所 示 ， 
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第 4 步 ， 复制 “ 移 过 ”图 层 ， 并 命名 为 “ 按 下 ”， 双 击 图 层 缩 略 图 ， 在 打开 的 【图 层 样式 】 对 话 


完成 鼠标 按 下 时 按钮 的 效果 。 










100 


cbhsHAO 
A 有 NA 己方 时 
一 






Ed 


恒 : 











| 裁 切 掉 多 余 的 区 域 ， 如 图 9.27 所 示 。 





用 户 还 可 以 设计 更 多 的 变化 。 例 如 ， 可 以 将 鼠标 指针 移 过 状态 设 
| 成 一 个 文字 发 光 效果 。 这样 当 鼠标 指针 移 到 按钮 上 时 ,就 会 出 现 文字 发 
| 光 的 效果 。 总之， 只 要 能 够 制作 出 悬 停 按钮 的 3 种 状态 ， 悬 停 按钮 就 算 
| 制作 成 功 了 ， 即 使 只 是 一 个 简单 的 颜色 变换 或 是 位 置 的 移动 也 可 以 。 

| 第 5 步 ， 完 成 3 种 不 同 状态 的 背景 样式 ， 最 后 使 用 【文本 工具 】 
| 输入 按钮 文本 ， 选 择 【 图 像 】|【 裁 切 】 命 令 ， 打 开 【 裁 切 】 对 话 框 ， 











图 9.26 设计 鼠标 按 下 样式 


三 基于 
口 通 明 能 素 (A) 
回 左 上 前 像素 颜色 (0) 
口 右 下角 像 吉 颜色 (M) 
广 城 切 


MRT) 
回 底 (8) 

















回去 D 
加 在 R) 














图 9.27 输入 按钮 文本 
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第 6 步 ， 隐藏“ 背景 ”图 层 ， 仅 显示 “正常 ”图 层 和 “面对面 ”文字 图 层 ， 选 择 【 文 件 】|【 存 
储 为 Web 所 用 格式 】 命 令 ， 在 打开 的 【存储 为 Web 所 用 格式 】 对 话 框 中 单 击 【 存 储 】 按 钮 即 可 , 如 | 
图 9.28 所 示 。 | 








本 大 小 
1 多 tm 上 
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图 9.28 输出 悬 停 按钮 状态 图 
第 7 步 ， 以 同样 的 方式 输出 鼠标 移 过 和 鼠标 按 下 时 的 按钮 状态 图 ， 最 后 效果 如 图 9.29 所 示 。 


一 


鼠标 移 过 鼠标 按 下 
图 9.29 设计 的 悬 停 按钮 


9.4 制作 网 页 背景 图 | 


网 页 背景 既 可 以 用 简单 的 颜色 来 填充 , 也 可 以 用 一 个 背景 图 像 来 填充 。 如 果 是 使 用 背景 颜色 填充 ， 
直接 在 Dreamweaver 中 设置 即 可 ;， 如果 是 使 用 背景 图 像 填 充 ， 则 必须 使 用 Photoshop 制作 一 个 背景 图 
像 ， 才 可 以 载 入 到 Dreamweaver 中 使 用 。 

一 般 来 说 ， 背 景 图 像 的 格式 均 采 用 GIF 格式。 在 Dreamweaver 中 ， 还 可 以 使 用 GIF 动画 格式 来 
作为 网 页 背景 注意， 使 用 动画 作为 背景 会 占用 很 多 内 存 ) 。 此 外 ， 背 景 图 像 的 尺寸 不 宜 过 大 ， 否 则 
在 网 络 上 传输 太 慢 。 所 以 ， 实 际 应 用 中 经 常 是 使 用 一 小 块 背景 图 像 。 


9.4.1 制作 背景 图 像 


如 何 才能 快速 地 制作 一 张 美观 的 背景 图 像 呢 ? 最 快 的 方法 就 是 使 用 Photoshop 进行 操作 ， 下 面 以 
如 何 编辑 渐变 背景 图 像 为 例 介绍 背 景 图 像 的 制作 方法 。 
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| 【操作 步骤 】 

| 第 1 步 ， 启 动 Photoshop， 新 建 一 个 高 为 600 像素 ， 宽 为 1 像素 的 文档 。 

| 第 2 步 ,在 工具 箱 中 选择 【渐变 工具 】， 在 工具 选项 栏 中 选择 填充 类 型 为 “线性 ”渐变 。 设 置 渐 
| 变 颜 色 从 白色 到 亮 蓝 色 〈# 00cbff) ， 如 图 930 所 示 。 











9.30 设置 渐变 颜色 


第 3 步 ， 在 编辑 窗口 中 从 上 向 下 拖拉 ， 应 用 渐变 填充 ， 如 图 9.31 所 示 。 


| 国 o  S 日 | wr BE 区 他 避 EE 
































9.31 ”应 用 渐变 填充 
第 4 步 , 将 完成 的 渐变 图 像 最 优化 , 并 输出 为 GIF 格式 的 文件 , 即 可 将 此 背景 图 像 应 用 到 网 页 中 。 
< 所 注意 : 背景 图 像 的 整体 色调 都 不 宜 过 深 。 应 选用 淡色 ， 以 便 突 出 前 景 文字 的 内 容 。 不 得 已 使 用 深 
色 背 景 时 ， 前 景 内 容 (如 文字 ) 就 应 选用 淡色 调 。 
9.4.2 在 网 页 中 插入 背景 图 像 


要 在 网 页 中 应 用 背景 图 像 ， 可 进行 如 下 操作 。 
| 【操作 步骤 】 

| 第 1 步 ， 在 Dreamweaver 中 建立 一 个 新 文件 ， 并 进行 保存 。 

| 第 2 步 ， 选 择 【修改 】|【 页 面 属性 】 命 令 ， 打 开 【 页 面 属性 】 对 话 框 ， 如 图 9.32 所 示 。 
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图 9.32 设置 背景 图 像 或 背景 颜色 


第 3 步 ， 在 对 话 框 的 【背景 图 像 】 文 本 框 中 设置 网 页 背景 图 像 。 可 以 直接 在 文本 框 中 输入 文件 名 
称 ， 也 可 单 击 其 右 侧 的 【浏览 】 按 钮 ， 打 开 对 话 框 进行 指定 。 例 如 ， 将 9.4.1 节制 作 的 背景 图 像 应 用 
到 网 页 中 。 如 果 要 在 背景 中 填充 背景 颜色 ， 可 以 在 【背景 颜色 】 文 本 框 中 输入 。 只 要 单 击 【 颜 色 框 】 
图 标 辐 ， 打 开 调 色 板 ， 在 其 中 单 击 即 可 选择 。 同 时 设置 背景 图 像 和 背景 颜色 的 好 处 就 是 避免 当 背景 图 
像 找 不 到 时 ， 可 以 显示 背景 颜色 。 

第 4 步 ， 为 了 避免 背景 图 像 在 纵向 上 的 重复 显示 ， 可 以 在 【页 面 属性 】 对 话 框 中 设置 【横向 重复 】 | 
选项 


第 5 步 ， 




















图 9.33 在 网 页 中 插入 背景 图 像 


< 全 注意 : 如 果 用 户 在 【页 面 属性 】 对 话 框 中 ， 既 设置 了 背景 图 像 ， 又 选择 了 背景 颜色 ， 则 在 页 面 中 
只 会 显示 图 像 背景 ， 而 看 不 到 背景 颜色 。 


9.5 制作 LOGO 


LOGO 一 词 在 英文 中 的 意思 为 商标 或 公司 名 称 的 图 案 字 和 标识 语 。 在 网 页 设计 中 , LOGO 常常 作 
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为 网 站 的 标志 出 现 ， 起 着 非常 重要 的 作用 ， 一 个 制作 成 功 的 LOGO， 不 仅 可 以 很 好 地 树立 网 站 形象 ， 还 
可 以 传达 网 站 的 相关 信息 。 另 外 ，LOGO 作为 首先 印 入 访问 者 眼帘 的 具体 形象 ， 所 以 更 增加 了 其 重要 性 。 


| 9.5.1 认识 网 站 LOGO 


| 网 站 LOGO 的 设计 重 在 表达 一 定 的 形象 与 信息 ， 使 访问 者 通过 LOGO 就 可 以 对 网 站 有 初步 的 了 
Note 解 ， 接 着 进一步 去 了 解 相关 的 其 他 信息 。 网 站 LOGO 的 设计 ， 和 传统 设计 有 着 很 多 的 相通 性 ， 但 由 

| 于 网 络 本 身 的 限制 以 及 浏览 习惯 的 不 同 ， 它 还 带 有 许多 与 之 相 异 的 特点 。 如 网 站 LOGO 一 般 要 求 简 
| 单 醒目 ， 除 了 表达 出 一 定 的 形象 与 信息 外 ， 还 得 兼顾 美观 与 协调 。 实 际 制 作 中 ， 很 多 靠 的 是 灵感 和 仿 
效 ， 而 更 多 的 时 候 是 通过 繁琐 的 工作 与 多 次 的 尝试 完成 的 。 

1. LOGO 定义 

LOGO 是 表明 特征 的 符号 ， 主 要 由 企业 品牌 的 标准 名 称 、 标 准 图 形 (字体 图 形 和 形象 图 形 )、 标 
准 色彩 ， 按 照 标准 规范 组 合 构成 。 

企业 识别 标志 从 语义 指称 、 印 象 感染 、 色 彩 冲击 及 其 组 合 协同 方式 4 个 方面 ， 表 现 和 展示 企业 生 
产 经 营 独特 的 发 展 战略 和 行为 方式 、 开 发 和 创造 独特 的 产品 品牌 、 塑 造 和 传播 良好 形象 。 

2. LOGO 的 职能 

作为 独特 的 传媒 符号 ,标识 (LOGO) 一 直 是 传播 特殊 信息 的 视觉 文化 语言 。 现 代 洗 练 的 抽象 纹 
样 、 简 单字 标 等 都 是 在 实现 着 标识 被 标识 体 的 目的 ， 即 通过 对 标识 的 识别 、 区 别 、 引 发 联想 、 增 强 记 
忆 ， 促 进 被 标识 体 与 其 对 象 的 沟通 与 交流 ， 从 而 树立 并 保持 对 被 标识 体 的 认 知 、 认 同 ， 达 到 提高 认 知 
度 、 美 誉 度 的 效果 。 

具有 传媒 特性 的 LOGO, 为 了 在 最 有 效 的 空间 内 实现 所 有 的 视觉 识别 功能 ,一 般 是 通过 特 示 图 案 
及 特 示 文字 的 组 合 ， 达 到 对 被 标识 体 的 出 示 、 说 明 、 沟 通 、 交 流 ， 从 而 引导 受众 的 兴趣 ， 达 到 增强 美 
誉 、 记 忆 等 目的 。 

如 图 9.34 (a) 所 示 ， 天 极 网 的 LOGO 通过 一 个 抽象 的 人 顽强 攀 越 极地 给 人 一 种 强烈 的 力量 感 ， 
同时 也 传达 了 天 极 人 的 精神 风貌 ， 如 图 9.34 (b) 所 示 ，263 在 线 通过 对 “人 @” 符 号 的 造型 来 曾 释 自 
己 网 站 的 内 涵 ， 即 网 络 的 快捷 和 在 线 服务 ， 如 图 9.34〈c) 所 示 ， 新 浪 网 通过 对 字母 “i” 的 艺术 化 夸 
张 和 拟 人 造型 ， 给 人 留 下 深刻 印象 。 


伦 天 极 (@ 263 在 线 a 


c) 





图 9.34 LOGO 标识 的 作用 


一 个 LOGO 在 网 站 中 的 作用 主要 体现 在 以 下 几 个 方面 。 

加 ”树立 形象 :一 个 网 站 的 LOGO 可 以 说 就 是 这 个 网 站 的 形象 ， 它 代表 网 站 的 整体 风格 ， 特 别 
是 对 于 企业 网 站 来 说 ，LOGO 就 是 一 个 品牌 的 形象 ， 所 以 LOGO 对 树立 一 个 网 站 的 形象 起 
着 至 关 重 要 的 作用 。 

回 ”传递 信息 : 一 个 网 站 的 信息 ， 绝 大 多 数 都 需要 通过 LOGO 来 传递 。 如 常见 的 网 站 链接 ， 一 

| 个 网 站 被 链接 到 另 一 个 网 站 传递 ， 此 时 这 个 网 站 的 信息 都 需要 通过 被 链接 的 LOGO 来 达到 
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让 访问 者 了 解 的 目的 。 

品牌 拓展 : 在 网 络 中 ，LOGO 就 是 一 个 网 站 形象 的 代表 ， 一 切 主题 活动 都 要 围绕 这 个 形象 
来 进行 ， 如 在 设计 制作 一 些 宣传 页 面 时 ， 都 要 将 LOGO 放置 到 显著 的 位 置 。 另 外 ，LOGO 
也 是 网 络 广告 中 不 可 缺少 的 构成 要 素 。 


9.5.2 LOGO 的 设计 原则 

LOGO 的 设计 需要 从 很 多 方面 来 分 析 ， 它 涉及 图 形 、 文 字 、 颜 色 、 排 版 等 各 个 方面 的 内 容 ， 设 计 
LOGO 通常 从 以 下 几 个 方面 考虑 。 

1. 构成 

一 个 LOGO 的 构成 要 素 ， 一 般 由 网 站 的 英文 名 





称 、 网 站 的 网 址 、 网 站 的 标志 图 形 、 网 站 的 主题 描述 ”一 一 一 
构成 , 对 于 中 文 网 站 的 LOGO 来 说 , 它 还 会 包括 网 站 -一 一 一 二 
的 中 文 名 称 。 但 是 这 几 个 构成 要 素 并 不 一 定 同时 存 ” 三 二 二 网 汪汪 
在 , 而 是 适当 地 组 合 在 一 起 。 如 图 9.35 所 示 的 LOGO 一 
就 是 由 网 站 的 英文 名 称 和 网 站 的 标志 图 形 构成 。 

对 于 中 文 网 站 来 说 , LOGO 中 还 会 包括 网 站 中 文 ATeT 网 站 的 英文 名 称 
名 称 ， 如 图 9.36 所 示 为 赛 迪 网 的 LOGO 标识 。 图 935 英文 LOGO 


2. 形体 
对 于 一 些 企业 网 站 ， 它 们 的 LOGO 一 般 都 是 由 企业 品牌 标识 和 英文 名 称 组 成 ， 并 不 对 网 站 的 LOGO 
进行 特别 的 设计 ， 如 图 9.37 所 示 的 Adobe 公司 的 LOGO， 就 是 由 企业 品牌 标识 和 英文 名 称 组 成 。 


an 赛 迪 网 一 一 网 站 的 中 文 名 称 


网 站 的 英文 名 称 一 CCID ww ccianotcom A 一 网 站 的 标志 图 形 
网 站 的 网 址 一 一 一 一 一 一 | Adobe 一 一 网 站 的 英文 名 称 
图 9.36 中 文 LOGO 9.37 Adobe 公司 的 LOGO 


除了 上 面 的 情况 外 ， 开 始 进行 LOGO 设计 通常 都 会 有 一 些 真实 形体 作 参 考 ， 例 如 ， 以 农业 为 主 
的 网 站 可 能 会 在 网 站 的 LOGO 中 放置 农作物 形体 ， 以 书籍 为 主 的 网 站 会 在 网 站 的 LOGO 中 放置 书本 
形体 等 。 但 在 创作 过 程 中 很 少 有 直接 了 当 进 行 放置 的 ， 艺 术 创作 常常 将 自然 形体 与 设计 结合 在 一 块 ， 
网 站 LOGO 创作 则 往往 通过 技术 提取 与 朴素 制作 来 完成 。 技 术 提取 使 实际 形体 与 网 站 内 容 相 结合 ， 
用 会 意 体现 内 容 ， 用 轮廓 体现 形体 。 而 朴素 制作 则 是 据 弃 不 相关 的 元 素 信息 ， 力 图 用 最 简单 的 方式 表 
达 最 丰富 的 内 涵 。 例 如 ， 中 资源 的 LOGO 抽象 形体 使 人 联想 到 网 络 字符 @ 和 信息 查询 ， 如 图 9.38 (a) 
所 示 ; 广州 视窗 通过 简练 的 窗口 使 人 联想 到 广州 是 中 国 改革 开放 的 窗口 ， 如 图 9.38 (b) 所 示 。 


CD 次 : 源 广州 视窗 


114.com.cn gznet.com 








(a) (b) 
9.38 LOGO 形体 变化 
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| 3. 颜色 
| 在 网 站 LOGO 的 颜色 选择 中 应 尽量 少 用 颜色 。 一 方面 减 小 图 像 尺 寸 ， 另 一 方面 避免 给 入 过 于 花 
| 哨 的 感觉 。 另 外 在 颜色 的 选择 中 ， 要 与 网 站 的 整体 相关 联 。 如 微软 公司 网 站 的 LOGO， 以 蓝 色 和 白色 


国内 | 搭配 为 主 ， 符 合 微软 公司 的 形象 颜色 ， 如 图 939 所 示 。 
标准 色彩 是 标志 不 可 缺少 的 主要 构成 因素 , 以 光 色 效应 表 
加 于 3 yw 类， 一 艇 包括 了 专用 品牌 标准 字体 图 形 的 标准 色 


| 彩 和 标准 形象 图 形 的 标准 色彩 。 图 9.39 微软 公司 的 LOGO 

网 站 给 人 的 第 一 印象 来 自视 觉 冲 击 , 确定 网 站 的 标准 色彩 
是 相当 重要 的 一 步 。 不 同 的 色彩 搭配 产生 不 同 的 效果 ， 并 可 能 影响 到 访问 者 的 情绪 。 标 准 色彩 是 指 同 
LOGO 颜色 相 匹 配 ， 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 

一 般 来 说 ， 网 站 的 标准 色彩 不 超过 3 种 ， 太 多 则 让 人 眼花 练 乱 。 标 准 色彩 要 用 于 网 站 的 标志 、 标 
题 、 主 菜单 和 主 色 块 ， 给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 使 用 ， 只 是 作为 点 级 和 衬托 ， 不 
能 喧 宾 村主。 例如 ，263 网 络 集团 以 红色 为 背景 ， 衬 托 白色 字体 ， 比 较 醒目 ， 中 央 电 视 台 以 蓝 色 系 渐 
变 为 背景 ， 衬 托 红 、 白 色 文字 ， 和 电视 屏幕 相符 合 ，SUN 公司 以 蓝 紫色 为 背景 ， 衬 托 白 色 文 字 ， 符 
合 企业 文化 ，IBM 以 深蓝 色 为 背景 ， 衬 托 白色 文字 ， 显 示 该 公司 的 厚重 ， 如 图 9.40 所 示 。 


AY 


microsystems 





9.40 LOGO 的 色彩 


色彩 组 合 具有 物理 、 生 理 、 心 理 、 认 知 、 审 美 五 大 效应 ， 不 仅 凝聚 和 积淀 了 民族 文化 传统 的 情感 
倾向 和 理性 意味 ， 而 且 引 发 和 激励 人 们 的 情感 性 接受 和 迪 辑 辨识 认定 。 
色彩 与 文字 和 图 形 同 频 共振 ,丰富 了 文字 和 图 形 的 形象 感 和 氛围 感 ， 获 得 了 文字 和 图 形 所 赋予 的 
时 代 精 神 及 其 情感 倾向 和 理性 意味 。 另 一 方面 ， 色 彩 与 人 们 心理 、 思 维 、 审 美 需要 共 频 共振 ， 感 染 力 
将 超越 既定 的 文字 和 图 形 , 潜移默化 地 把 人 们 导入 情景 交融 的 审美 意境 。 正 因为 如 此 , 在 文字 、 图形、 
色彩 中 ， 色 彩 传播 被 人 感知 、 辨 识 、 区 别 是 最 为 迅速 和 准确 的 。 
设计 专用 品牌 标准 色彩 必须 注意 以 下 方面 。 
回 “ 在 标志 标准 名 称 、 标 准 图 形 、 标 准 色彩 三 大 构成 要 素 中 ， 首 先 突出 标准 色彩 及 其 组 合 。 
加 ”充分 发 挥 色彩 之 间 多 重 的 鲜明 对 比 和 强烈 反差 作用 ， 加 快 信息 传播 速度 ， 加 大 信息 传播 力度 。 
加 ”深层 次 开发 和 运用 标准 色彩 组 合 的 情感 倾向 和 理性 意味 ， 强 化 企业 识别 标志 、 企 业 识 别 系 
统 的 吸引 力 和 传播 力 ， 而 且 极 大 地 促进 企业 对 自身 独特 发 展 战略 、 运 行 实 态 的 约束 力 和 激 
励 力 。 
4. 字体 
| 在 网 站 LOGO 设计 中 , 文字 是 设计 中 非常 重要 的 一 环 , 很 多 要 传递 的 信息 都 是 通过 文字 来 表达 的 。 
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首先 文字 的 字体 选择 ， 对 于 一 种 字体 ,不 仅 要 了 解 其 历史 ， 还 要 和 弄 清楚 它 的 应 用 场合 。 哪 一 种 字 
体 具 有 古典 风范 ， 哪 一 种 字体 比较 新 颖 ， 哪 一 种 字体 在 这 种 场合 中 更 便于 阅读 ， 都 是 在 设计 中 应 该 考 


虑 到 的 。 字 体 的 选择 起 着 相当 重要 的 作用 ， 但 选择 的 标准 却 是 没有 定式 的 ， 对 于 一 个 LOGO, 永远 不 | 


知道 到 底 哪 种 字体 才 是 最 贴切 的 ， 只 有 不 断 地 尝试 ， 才 能 找到 让 大 家 满意 的 字体 。 


如 图 9.41 所 示 的 字体 风格 各 自 不 同 ， 上 海 热线 是 行书 字体 ， 爽 快 ; 凤凰 网 〈 凤 凰 卫视 ) 字体 是 ， 


隶书 ， 就 具有 古典 的 风范 ， 也 符合 网 站 的 主题 ， 人 民 网 (人 民 日 报 ) 字体 模仿 毛泽东 手书 ， 和 人 民 日 
报 标题 风格 保持 一 致 。 


上 拓 才 统 D) 网 回 网 _ 人 所 VJpeople 


rich.online.sh.cn ml www.people.com.cn 





图 9.41 LOGO 的 字体 


另外 关于 字体 大 小 写 的 问题 。 一 般 地 ， 无论 是 字体 还 是 图 像 都 得 保持 风格 的 一 致 性 ， 因 此 在 字体 
大 小 写 的 选择 上 也 要 遵循 下 面 的 原则 。 
回 ”选择 大 写 给 人 以 整齐 的 感觉 。 
回 ”选择 小 写 主要 使 用 其 起 伏 性 。 
回 “ 在 大 小 写 混用 时 ， 因 为 大 小 写 的 字体 ， 无 论 是 宽度 还 是 高 度 ， 以 及 整个 字体 风格 都 会 有 区 
别 ， 所 以 一 定 要 注意 整齐 性 。 
文字 的 抽象 在 网 站 LOGO 的 制作 中 十 分 重要 ， 对 文字 进行 适当 的 抽象 处 理 ， 可 以 使 LOGO 看 起 
来 更 加 的 人 性 化 。 例 如 ， 熟 悉 的 太平 洋 电 脑 网 ， 将 PConline 中 的 字母 “o” 抽 象 成 一 个 地 球 ， 和 背景 
中 的 圆 形 地 球 相 呼 应 ， 如 图 9.42 所 示 。 
LOGO 合成 字体 是 一 种 表象 表意 的 综合 ， 指 文字 与 图 案 结合 的 设计 ， 兼 具 文字 与 图 案 的 属性 ， 但 
都 导致 相关 属性 的 影响 力 相对 弱化 ， 为 了 不 同 的 设计 取向 ， 制 作 偏 图 案 或 偏 文字 的 LOGO， 会 在 表达 
时 产生 较 大 的 差异 。 有 两 种 情况 : 只 对 印刷 字体 作 简单 修饰 ， 或 把 文字 变 成 一 种 装饰 造型 让 大 家 去 猜 。 
例如 ， 百 度 中 的 “du” 进 行 图 形 艺术 化 ; QQ 网 中 “QQ” 用 两 个 可 爱 的 卡通 图 形 代替 ， 如 图 9.43 所 示 。 


PCc 作 is ee AQQ 
太平 音 电 量 同 Bai E 度 人 全 全 
图 9.42 LOGO 的 字体 抽象 图 9.43 LOGO 的 字体 合成 





完整 的 LOGO 设计 ， 尤 其 是 有 中 国 特色 的 LOGO 设计 ， 在 国际 化 的 要 求 下 ， 一 般 都 应 考虑 至 少 | 


有 中 英文 双语 的 形式 ， 要 考虑 中 英文 字 的 比例 、 措 配 ， 一 般 要 有 图 案 中 文 、 图 案 英文 、 图 案 中 英文 及 
单独 的 图 案 、 中 文 、 英 文 的 组 合 形式 。 有 的 还 要 依据 实际 用 途 考虑 繁体 、 其 他 特定 语言 版 本 等 。 


5. 图案 


LOGO 特 示 图 案 属于 表象 符号 ， 独 特 、 醒 目 ; 图 案 本 身 易 被 区 分 、 记 忆 ; 通过 隐 富 、 联 想 、 概 括 、 
抽象 等 绘画 表现 方法 表现 被 标识 体 ， 对 其 理念 的 表达 概括 而 形象 。 
如 果 与 被 标识 体 关联 性 不 够 直接 , 观众 容易 记忆 图 案 本 身 而 模糊 微 标 含义 。 认 知 需要 相对 较 曲 折 
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CD 
Kh 


| 的 过 程 ， 但 一 旦 建立 联系 ， 就 会 对 被 标识 体 记忆 相对 持久 。 所 以 对 持久 记忆 要 求 高 时 应 设计 良好 的 特 


| 示 图 案 形象， 如 图 9.44 所 示 ， 下 面 这 些 LOGO 都 是 一 些 大 家 较 熟 悉 的 标志 ， 由 文字 会 联想 到 它 的 图 
案 ; 或 由 图 案 联 想到 文字 。 


TSINGHUA TONGFANG COMPUTER: 


L 正 抹 团 www.QQ.com 


py QR 


Tsinghua University 家 二 二 ,OLYMPIC,ORG 


@ 中 国 组 行 人 @) 中 国 工商 银行 


BANK OF CHINA INDUSTRIAL AND COMMERCIAL BANX OF CHINA 


4 罗 清 华 同 方 电脑 AQQ 





图 9.44 LOGO 的 图 案 

另外 ， 如 果 希 望 在 较 短期 限 内 建立 形象 的 ， 还 应 该 设计 相应 的 吉祥 物 ， 以 便 公司 形象 让 用 户 耳 熟 
能 详 、 藉 以 强化 沟通 和 理解 。 

6. 版 式 

其 实 LOGO 的 版 式 设计 并 没有 定式 ， 因 为 它 的 设计 前 提 都 是 在 尽 可 能 简单 的 情况 下 表达 出 其 所 
代表 的 形象 和 要 传递 的 信息 。 下 面 介绍 几 个 典型 的 LOGO。 如 图 9.45 所 示 的 LOGO 采用 左 侧 图 标 右 
侧 文 字 的 版 式 ， 这 个 版 式 是 最 常用 也 是 最 容易 接受 的 版 式 。 

与 之 相反 ， 有 的 网 站 LOGO 在 设计 时 ， 将 图 标 放置 在 右 侧 ， 如 图 9.46 所 示 的 网 站 LOGO。 

另外 ， 有 的 LOGO 采用 上 下 放置 的 版 式 ， 将 图 标 放置 在 上 面 ， 将 文字 放置 在 下 面 ， 如 图 9.47 所 
示 的 网 站 LOGO。 


中 国 少儿 美术 教育 网 
A Www,ccartedu,com 
图 9.45 文字 放 在 右边 


ERICSSON 三 WINDOWS NT. 


图 9.46 文字 放 在 左边 图 9.47 文字 放 在 下 边 
LOGO 版 式 完全 由 用 户 根据 具体 情况 来 设置 ， 下 面 列 出 一 些 不 同 板式 的 图 标 ， 如 图 9.48 所 示 。 
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文字 圆 形 
图 9.48 文字 不 同 放置 


9.5.3 LOGO 的 设计 技巧 


设计 LOGO 应 该 遵循 访问 者 的 认识 规律 ， 突 出 主题 、 引 人 注目 。 按 照 从 上 到 下 ， 从 左 到 右 ， 从 | 
小 到 大 ， 从 远 到 近 的 视觉 习惯 以 及 思维 习惯 、 审 美能 力 和 审美 心理 等 要 求 ， 力 争 使 LOGO 做 到 主题 | 
突出 ， 引 和 注目。 在 实际 的 设计 制作 中 ， 一 般 通 过 以 下 几 个 方面 来 把 握 : | 
在 版 式 设 计 上 ， 要 保持 视觉 平衡 、 讲 究 线条 的 流畅 ， 使 得 整体 形状 美观 大 方 。 | 
通过 运用 反差 、 对 比 或 边框 等 ， 使 要 表达 的 主题 得 到 突出 。 
选择 恰当 的 字体 ， 使 字体 在 符合 整体 风格 的 基础 上 具有 独特 性 。 | 
版 式 的 设计 要 注意 留 白 ， 给 访问 者 提供 想象 空间 。 | 
合理 地 运用 色彩 。 因 为 访问 者 对 色彩 的 反映 比 对 形状 的 反映 更 为 敏锐 和 直接 ， 更 能 激发 情 | 
感 ， 在 色彩 选择 方面 ， 基 色 要 相对 稳定 ， 要 强调 色彩 的 记忆 感 和 感情 规律 ， 合 理 使 用 色彩 
的 对 比 关 系 ， 因 为 色彩 的 对 比 能 产生 强烈 的 视觉 效果 ， 而 色彩 的 调和 则 构成 空间 层次 。 


9.5.4 LOGO 实例 制作 


为 了 便于 网 上 信息 传播 一 个 统一 的 国际 标准 是 需要 的 。 实际 上 已 经 有 了 这 样 的 一 整套 标准 。 关 
于 网 站 LOGO 现在 主要 有 3 种 规格 。 

回 88x31 像素 : 这 是 目前 最 普遍 的 LOGO 规格 。 

120x60 像素 : 这 种 规格 用 于 中 型 大 小 的 LOGO。 

加 ”120x90 像素 : 这 种 规格 用 于 大 型 LOGO。 

下 面 就 以 Disco Style 为 站 名 来 设计 LOGO， 设 计 效果 如 图 9.49 所 示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Photoshop， 新 建文 档 ， 设 置 画布 大 小 为 
88x31 像素 。 为 便于 操作 和 观察 效果 ， 在 制作 时 可 以 设置 
实际 大 小 为 500x300 像素 ， 当 设计 完成 后 再 缩放 或 剪 切 。 

第 2 步 ， 新 建 图 层 ， 选 择 【渐变 工具 】， 设 置 渐变 类 
型 为 直线 渐变 ， 颜 色 为 #6a0037 和 #3f000c， 在 编辑 窗口 中 
从 上 向 下 拖拉 ， 应 用 渐变 填充 ， 效 果 如 图 9.50 所 示 。 

第 3 步 ， 使 用 【直线 套 索 工具 】 义 选 一 个 选区 , 然后 。 图 949 Disco Style 站 点 LOGO 效果 
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新 建 图 层 ， 使 用 白色 填充 选区 ， 如 图 9.51 所 示 。 
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图 9.50 应 用 渐变 效果 图 9.51 新 建 白色 区 域 
| 第 4 步 ， 选 择 【 滤 镜 】|【 模 糊 】|【 高 斯 模糊 】 命 令 ， 设 置 模糊 半径 为 6 像素 ， 应 用 高 斯 模糊 。 
| 再 选择 【 滤 镜 】| 【模糊 】| 【动感 模糊 】 命 令 ， 打 开 【 动 感 模糊 】 对 话 框 ， 设 置 角 度 为 0， 距离 为 559 
| 像素， 确定 应 用 动感 模糊 ， 则 设计 效果 如 图 9.52 所 示 。 
| 第 5 步 ， 在 【图 层 】 面 板 中 设置 该 图 层 的 混合 模式 为 “加”， 则 此 时 效果 如 图 9.53 所 示 。 


















NM 


图 9.52 ”模糊 图 层 图 9.53 县 加 图 层 


第 6 步 , 使 用 【文本 工具 】 输 入 文字 “Disce”。 设置 字体 颜色 为 白色 , 字体 类 型 为 Lucida Sans Unicode， 
字体 大 小 为 48 点 ， 如 图 9.54 所 示 。 
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图 9.54 输入 LOGO 字体 


和 渐变 释 加 样式 。 在 【图 层 】 面 板 底部 单 击 【 添 加 图 层 样式 】 按 钮 ， 
车 加 】 命令， 设置 投影 距离 为 4 像素， 投影 颜 色 为 # 60012d; 渐变 车 加 










第 7 步 ， 为 该 文字 应 用 投 
然后 分 别 选择 【投影 】 和 【渐变 
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! 
的 渐变 色 为 #DF7E8F 和 #91003E， 具体 设置 如 图 9.55 所 示 。 应 用 图 层 样式 后 的 文字 效果 如 图 9.56 所 示 。 | 
TT 3 SR a 
cs Es i 
hb a 可 HR ys | 
和 上 
me 国 图 
“于 二 
和 村 | 
i | 
| 
| 
投影 样式 渐变 又 加 样式 


图 9.55 应 用 图 层 样式 


oprd ® 100% CE RE [xh 
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图 9.56 应 用 图 层 样式 后 的 文字 效果 

第 8 步 ， 新 建 一 层 ， 使 用 【椭圆 选 框 工具 】 画 一 个 椭圆 ， 再 选择 【渐变 工具 】 设置 渐变 类 型 为 
直线 渐变 ， 渐 变 颜 色 为 白色 到 透明 ， 然 后 设计 透明 到 白色 的 渐变 填充 ， 如 图 9.57 所 示 。 


加 -|[ 回 o 
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图 9.57 应 用 渐变 填充 效果 
第 9 步 ， 按 住 Ctrl 键 ， 单 击 文字 图 层 ， 调 出 文字 选区 ， 再 按 ShiftrCtrl+T 组 合 键 反 选 ， 切 换 到 渐 
变 填充 图 层 ， 按 Delete 键 删除 多 余 的 部 分 ， 所 得 效果 如 图 9.58 所 示 。 
第 10 步 ， 在 【图 层 】 面 板 中 ， 设 置 该 图 层 为 柔 光 模式 ， 则 所 得 效果 如 图 9.59 所 示 。 
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East ww 加 
图 9.58 删除 多 余 的 渐变 填充 颜色 图 9.59 设置 混合 模式 为 柔 光 模式 


| 第 11 步 ， 选 择 【文件 】|【 置 入 】 命 令 ， 导 入 ballpng 素材 文件 ， 按 Ctrl+T 快捷 键 调整 大 小 和 位 
| 置 ， 得 到 如 图 9.60 所 示 的 效果 。 
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图 9.60 应 用 渐变 填充 效果 

第 12 步 ， 为 导入 的 素材 图 像 应 用 投影 样式 ， 角 度 为 20”， 距 离 为 5 像素 ， 大 小 为 5 像素 ， 设 
| 置 和 效果 如 图 9.61 所 示 。 
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图 9.61 应 用 投影 样式 
第 13 步 ， 使 用 【椭圆 选 框 工具 】 绘 制 一 个 小 椭圆 ， 然 后 新 建 图 层 ， 使 用 白色 填充 椭圆 ， 效 果 如 
图 9.62 所 示 。 
第 14 步 ， 按 CtrltJ 快捷 键 复制 椭圆 图 层 ， 按 Ctrl+T 快捷 键 调整 大 小 ， 并 拖 移 到 不 同位 置 。 以 同 
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样 的 方式 复制 很 多 个 小 球 , 并 有 规律 地 排列 在 一 起 , 注意 大 小 渐变 缩小 , 设计 一 种 立体 平面 排列 效果 ，| 
如 图 9.63 所 示 。 
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文 们 695K/335W 。。》 E 了 HN 
图 9.62 绘制 白色 椭圆 图 9.63 ”设计 椭圆 小 球 和 矩阵 效果 
第 15 步 , 按 Ctrl+E 快捷 键 ， 逐 一 合并 这 些 图 层 。 在 【图 层 ] 面板 中 设置 该 图 层 的 混合 模式 为 “过 
加 ”， 则 所 得 效果 如 图 9.64 所 示 。 
第 16 步 ， 放 大 图 像 ， 在 工具 箱 中 选择 【 套 索 工具 】， 按 住 Shift 键 ， 勾 选 部 分 小 球 ， 如 图 9.65 | 
所 示 。 











! 
! 
! 
! 


国 (e9 e101% EE5 no 所 









Er EEE 


文档 洒 9363358 Dn 
图 9.64 设计 县 加 效果 图 9.65 勾 选 部 分 小 球 
第 17 步 ， 按 Shift+F6 快捷 键 ， 打 开 【 羽 化 选区 】 对 话 框 ， 设 置 羽化 半径 为 1 像素 ， 羽 化 选 
然后 新 建 图 层 ， 使 用 颜色 #ff768d 进行 填充 ， 效 果 如 图 9.66 所 示 。 
第 18 步 , 使 用 【文本 工具 】 输 入 字母 : Style, 大 小 为 24 点 , 颜色 为 #f768d, 字体 类 型 为 Britannic 
Bold， 在 【图 层 】 面 板 中 设置 该 字体 图 层 的 不 透明 度 为 50%， 调 整 字体 颜色 深浅 ， 效 果 如 图 9.67 所 示 。 


区 -= ol 二 sl x 图， le pony» Leol xj 








区 








六 全 "95N373 5 














图 9.66 ”填充 部 分 小 球 颜色 图 9.67 输入 并 设置 字体 样式 
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9.6 ”制作 Banner 


Banner 一 词 在 英文 中 的 意思 为 旗帜 ， 也 就 是 常 说 的 广告 条 ， 主 要 用 于 传递 一 些 信息 ， 起 到 广 而 千 
加 时 3 wtn， 网 站 要 开展 的 活动 、 网 站 的 新 动向 、 商 品 信息 等 。Banner 与 LOGO 在 传 北 信 息 广 
| 面 的 区 别 在 于 网 站 的 Banner 可 以 用 于 非 本 网 站 的 信息 传递 


9.6.1 网 站 Banner 


相信 大 家 对 网 站 的 Banner 都 很 熟悉 ， 因 为 在 浏览 网 页 时 ， 经 常会 被 各 种 各 样 设计 独特 、 色 彩 艳 
丽 的 Banner 所 吸引 。 由 于 网 站 Banner 的 作用 就 是 向 广大 的 访问 者 传递 信息 ， 而 且 随 着 网 络 的 发 展 
网 站 Banner 已 经 成 为 网 络 广告 的 重要 途径 ， 也 是 一 些 以 广告 为 盔 利 目的 网 站 的 重要 手段 ， 所 以 在 设 
计 网 站 Banner 时 应 该 注意 以 下 几 点 。 

加 ”具有 鲜明 的 色彩 

网 站 Banner 只 有 有 具有 鲜明 的 色彩 ， 才 能 在 第 一 时 间 吸 引 访问 者 的 注意 ， 色 彩 的 选用 ， 应 该 尽量 
使 用 红 、 橙 、 蓝 、 绿 、 黄 等 艳丽 的 颜色 ， 如 图 9.68 所 示 的 Banner 使 用 了 4 种 颜色 组 合 。 











we 上 [= 了 


\ 尼 所 润 眼 电脑 





图 9.68 鲜明 的 颜色 
加 ”语言 具有 号 召 力 
日 常生 活 中 做 广告 的 目的 , 就 是 要 使 消费 者 去 购买 所 宣传 的 产品 ,在 消费 者 的 心中 树立 该 产品 的 
形象 。 如 熟悉 的 雪碧 饮料 的 广告 语 “ 唱 晶 亮 ， 透 心 凉 ”， 奥 柯 玛 冰柜 的 广告 语 “ 没 有 最 好 ， 只 有 更 好 ” 
| 等 ， 这 些 广告 都 是 通过 具有 号 召 力 的 语言 而 深入 人 心 。 在 网 站 的 Banner 中 也 同样 具有 这 个 特点 ， 让 
文字 给 访问 者 很 强 的 号 召 力 、 吸 引力 ， 如 图 9.69 所 示 的 Banner 所 使 用 的 语言 。 





温泉 也 符 醋 


开工 工 了 了 工 | 


新 空港 公园 里 温 泉 别 院 


限量 特惠 房 5 套 95 折 


400-890-0000 转 628137 





图 9.69 语言 具有 号 召 力 
文字 的 字体 
Banner 的 设计 初 更 就 是 要 最 大 限度 地 吸引 访问 者 的 注意 力 , 所 以 字体 的 字号 不 能 过 小 , 字体 的 间 
| 隙 也 不 能 过 于 拥挤 ， 一 般 来 说 选择 的 字体 要 大 小 适中 , 字体 之 间 要 用 足够 的 间隙 ， 使 其 能 够 清晰 地 展 
| 现在 访问 者 的 视线 中 。 如 图 9.70 所 示 的 Banner 的 字体 就 十 分 清晰 ， 使 访问 者 能 很 直观 地 了 解 其 所 传 
| 递 的 信息 。 
! 
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图 9.70 文字 的 字体 醒目 
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回 ”图形 
在 Banner 设计 中 ， 主 体 图 形 一 般 都 会 放置 在 Banner 的 左 侧 ， 这 样 符合 浏览 的 习惯 ， 因 为 人 在 看 
物体 时 ， 都 是 按照 视觉 习惯 ， 从 左 到 右 浏览 ， 所 以 将 图 形 放置 到 Banner 的 左 侧 ， 更 能 吸引 访问 者 的 | 
注意 ， 如 图 9.71 所 示 。 

















9.71 图 形 的 使 用 


9.6.2 ”Banner 实例 制作 


Banner 和 LOGO 一 样 也 有 一 定 的 标准 ，1999 年 美国 报 业 协 会 第 一 次 公布 了 网 络 广告 (Banner) 标准 。 
回 “横幅 广告 长 宽 为 468x60 像素 。 
导航 广告 长 宽 为 392x9.2 像素 。 
半幅 广告 长 宽 为 234x60 像素 。 
竖 幅 广告 长 宽 为 120x240 像素 。 
2001 年 美国 互联 网 广告 联合 会 公布 了 新 网 络 广告 标准 。 
“摩天 大 楼 ” 形 长 宽 为 120x600 像素 。 
“ 宽 摩 天 大 楼 ” 形 长 宽 为 160x600 像素 。 
长 方形 长 宽 为 180x150 像素 。 
中 级 长 方形 长 宽 为 300x250 像素 。 
大 长 方形 长 宽 为 336x280 像素 。 
竖 长 方形 长 宽 为 240x400 像素 。 
“正方 形 弹出 ” 式 广 告 长 宽 为 250x250 像素 。 
目前 ， 制 作 Banner 所 使 用 的 工具 主要 包括 Flash、Photoshop 等 。Flash 适合 制作 超 眩 动 态 效 果 的 
网 页 广告 ， 而 Photoshop 仅 能 够 制作 静态 图 像 广告 ， 不 过 其 适应 范围 和 适应 能 力 都 比较 强 。 
下 面 通过 一 个 实例 介绍 在 Photoshop 中 制作 广告 条 的 一 般 方法 和 步 又， 显示 效果 如 图 9.72 所 示 。 
设计 思路 : 本 作品 是 一 个 温泉 广告 ， 温 泉 总 是 给 人 一 种 温暖 的 、 放 松 的 感觉 ， 这 种 感觉 好 像 人 沐 
浴 在 春风 里 一 样 。 这 让 人 想到 了 春天 ， 和 春天 里 面 的 桃花 。 同 时 ， 洗 温泉 时 ， 需 要 用 到 的 木 桶 木 盆 。 
所 用 素材 : 雪山 大 地 、 一 枝 桃花 、 一 个 木 贫 ， 一 个 木 勺 。 
【操作 步骤 】 
第 1 步 ， 启 动 Photoshop， 新 建 一 个 宽 为 372 像素 ， 高 为 188 像素 的 文档 ， 保 存 为 bannerpsd。 
第 2 步 ， 选 择 【 文 件 】|【 置 入 】 命 令 ， 导 入 素材 文件 1jpg。 调 整 大 小 和 位 置 ， 使 完全 覆盖 文档 上 
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窗口 ， 如 图 9.73 所 示 。 使 用 冰天雪地 营造 一 个 蓝天 的 背景 。 


天 























图 9.72 制作 的 温泉 Banner 广告 效果 图 9.73 导入 素材 图 像 


第 3 步 ， 由 于 蓝 色 和 白色 分 明 ， 对 其 进行 高 斯 模糊 ， 突 出 前 景 的 桃花 ， 设 计 层次 感 和 对 比 感 。 选 
择 【 滤 镜 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 打 开 【 高 斯 模糊 】 对 话 框 ， 设 置 模糊 半径 为 25 像素 ， 单 击 
【确定 】 按 钮 ， 效 果 如 图 9.74 所 示 。 

















图 9.74 高 斯 模糊 素材 图 像 


第 4 步 ， 按 Ctrl+U 快捷 键 ， 打 开 【 色 相 /饱和 度 】 对 话 框 ， 调 整 背景 图 像 的 饱和 度 和 亮度 ， 让 它 
的 颜色 变 得 淡 一 些 、 亮 一 些 ， 设 计 一 种 天 空 的 感觉 。 然 后 按 Ctrl+M 快捷 键 ， 打 开 【 曲线】 对 话 框 ， 
调整 曲线 ， 让 整体 变 得 更 加 亮 一 些 。 设 置 和 效果 如 图 9.75 所 示 。 
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9.75 ”调整 素材 图 像 色 调 


第 5 步 ， 打 开 素材 文件 2jpg， 该 图 的 背景 颜色 比较 统一 ， 抠 图 就 很 简单 。 在 工具 箱 中 选中 【 魔 
棒 工 具 】 设置 【 容 差 】 为 20 像素 ， 按 住 Shift 键 ， 多 次 单 击 ， 选 中 背景 ， 然 后 按 ShiftrCtrl+I 组 合 键 
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反选 选区 ， 获 取 桃花 的 选区 范围 ， 如 图 9.76 所 示 。 
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图 9.76 抠 取 素材 图 像 


第 6 步 ， 把 桃花 抠 出 来 后 ， 按 Ctrl+C 快捷 键 ， 把 它 复制 到 bannerpsd 文件 中 ， 调 整 大 小 和 位 置 ， 
如 图 9.77 所 示 。 
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图 9.77 调整 桃花 的 位 置 和 大 小 


第 7 步 ， 调 整 桃花 的 饱和 度 和 亮度 。 按 Ctrl+U 快捷 键 ， 打 开 【 色 相 /饱和 度 】 对 话 框 ， 按 图 9.78 
左 图 进行 调整 ， 使 桃花 更 鲜亮 ， 按 CtrlHM 快捷 键 ， 打 开 【 曲 线 】 对 话 框 ， 适 当 向 上 调整 曲线 ， 设 计 
较 亮 的 桃花 效果 ， 如 图 9.78 右 图 所 示 。 











9.78 ”调整 桃花 饱和 度 和 亮度 
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第 8 步 ， 对 桃花 进行 局 部 模糊 处 理 ， 在 工 

具 箱 中 选择 【模糊 工具 〗 涂抹 远景 花 辩 ， 让 
| 前 景 主题 的 大 花 条 清晰 ， 背 景 的 小 花 采 模糊 ， 

会 内 | 同时 也 形成 一 个 对 比 , 突出 重点 , 效果 如 图 9.79 
| 所 示 。 

Note | 第 9 步 ， 打开 素材 文件 6jpg， 抠 出 其 中 的 
| 人 物 和 木 桶 对 象 到 bannerpsd， 然 后 按 CtrH+T 
| 快捷 键 缩放 大 小 , 并 调整 位 置 , 如 图 9.80 所 示 。 

| 第 10 步 ， 使 用 【钢笔 工具 】 绘 制 一 个 任 2 

| 意 形状 的 封闭 路 径 ， 然 后 在 【路 径 】 面 板 中 单 图 9.79 模糊 处 理 局 部 细节 

击 底部 的 【将 路 径 作为 选区 载 入 】 按 钮 ， 把 路 
径 转换 为 选区 。 新 建 图 层 ， 使 用 #d70d47 颜色 填充 选区 ， 效 果 如 图 9.81 所 示 。 
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图 9.80 复制 素材 图 像 图 9.81 绘制 图 形 并 填 色 


第 11 步 ,使 用 【文本 工具 】 输 入 LOGO 标识 文字 ， 并 在 【字符 】 面 板 中 设置 字体 颜色 为 白色 ， 
字体 类 型 为 新 宋体 ， 字 体 大 小 为 12 点 ， 字 体高 度 为 80%， 如 图 9.82 所 示 。 

第 12 步 ， 继 续 输 入 文字 “温泉 ” 设置 字体 类 型 为 华文 隶书 ， 字 体 大 小 为 36 点 ， 字 体 颜色 为 黑 
色 ， 调 整 字符 排列 位 置 ， 效 果 如 图 9.83 所 示 。 
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9.82 设计 LOGO 标识 9.83 设计 LOGO 文 字 


第 13 步 ， 继 续 使 用 【文本 工具 】 输 入 详细 宣传 信息 ， 字 体 大 小 为 14 点 ， 颜 色 为 红色 (#d70d47)， 
| 字体 类 型 为 黑体 ， 然 后 放 在 LOGO 标识 的 下 面 ， 效 果 如 图 9.84 所 示 。 
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9.7 用 CSS 控制 背景 图 像 


! 

! 

! 

| 

| 

CSS 可 设置 背景 图 片 的 样式 。 任 何 一 个 页 面 ， 都 有 它 的 背景 色 或 背景 图 来 突出 其 基调 ， 本 节 将 通 

过 实例 介绍 背景 图 片 的 样式 设置 。 
| 
! 
| 


9.7.1 定义 背景 图 片 


CSS 使 用 background-image 属性 来 定义 背景 图 片 样式 ， 该 属性 用 法 如 下 : 

其 作用 是 给 页 面 添加 背景 图 片 ， 其 中 url 是 图 片 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 
导入 的 图 片 其 默认 属性 是 在 横向 和 纵向 上 重复 ， 如 果 不 希 望 重复 ， 则 需要 设置 no-repeat 属性 ， 其 具 
体 用 法 会 在 下 面 讲 到 。 

【示例 1】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 输 入 以 下 内 容 : 

<ldoctype html> 

<html> 


<head> 
<meta charset="utf-8"> 


<title></title> 
<title> 背 景 图 片 </title> 


<style> 
body { background-image: url(images/bg.jpg); /页 面 背景 图 片 #/ } 
</style> 
</head> 
<body> 
</body> 
</html> 


以 上 代码 中 ， 图 片 默认 会 在 横向 和 纵向 上 重复 ， 本 例 中 图 片 的 原型 如 图 9.85 所 示 。 
其 在 网 页 中 平 铺 的 效果 如 图 9.86 所 示 。 
如 果 网 页 中 使 用 的 背景 图 片 是 GIF 格式 的 透明 图 片 ， 那 么 此 时 如 果 再 设置 网 页 的 背景 颜色 
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background-color， 则 背景 图 片 和 背景 颜色 将 同时 生效 。 





图 9.87 同时 设置 背景 图 片 和 背景 颜色 
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9.7.2 ”背景 图 片 的 重复 


CSS 使 用 background-repeat 属性 来 定义 背景 图 片 的 重复 ， 该 属性 用 法 如 下 : 
IT | 

background-repeat 属性 的 3 个 取 值 作用 如 下 。 Er 

Tepeat-x: 图 片 在 x 轴 方 向 上 重复 。 

Tepeat-y: 图 片 在 y 轴 方向 上 重复 。 

no-repeat: 不 平 铺 ， 图 片 只 显示 一 次 。 

【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 输 入 以 下 内 容 : 








显示 结果 如 图 9.88 所 示 ， 背 景 图 片 在 纵向 上 进行 了 重复 显示 。 背 景 的 原 图 如 图 9.89 所 示 。 其 实 
际 高 度 为 1 像素 ， 这 里 为 了 让 读者 看 得 清楚 ， 因 此 将 其 放大 了 。 








图 9.88 背景 图 片 的 纵向 重复 
图 9.89 背景 图 片 原 图 
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eg 网 放 计 与 网站 秆 设 人 入门 天皇 关 


| 座 提示 : 如 果 是 要 设置 两 个 方向 上 的 平 销 ， 就 不 需要 设置 属性 值 ， 这 时 CSS 会 采用 默认 的 向 横向 
| 和 纵向 两 个 方向 重复 的 效果 。 但是， 如 果 手 动 地 设置 repeat-x 和 repeat-y 的 两 个 值 的 话 ， 
| 那么 系统 会 自动 认定 后 设 的 一 种 平 铺 方式 有 效 ， 只 会 向 一 个 方向 平 铺 。 


| 9.7.3 ”定义 背景 图 片 的 位 置 


vote | 默认 情况 下 ， 背 景 图 片 都 是 从 设置 了 background 属性 的 标记 的 左上 角 开 始 出 现 ， 但 实际 制作 网 
页 过 程 中 ， 可 能 希望 图 片 出 现在 指定 的 位 置 。 在 CSS 中 使 用 background-position 来 调整 图 片 的 位 置 ， 
该 属性 用 法 如 下 : 
background-position : position| 数 值 
其 中 ，position 可 以 是 center、center center、 top left、 top center、 top right、center left、center right、 
| bottom left、bottom center、bottom right; 数值 可 以 是 百分数 ， 如 background-position:40% 60%， 表 示 
背景 图 片 的 中 心 点 在 水 平方 向 上 处 于 40% 的 位 置 ， 在 竖 直 方向 上 处 于 60% 的 位 置 ， 此 时 如 果 改 变 浏 
览 器 的 大 小 ， 背 景 图 片 也 会 相应 地 调整 ， 但 始终 处 于 40% 和 60% 的 位 置 ， 除 了 百分数 ， 还 可 以 是 具 
体 的 数值 ， 如 background-position:200px 40px， 表 示 距 离 页 面 左 侧 200px， 距 离 页 面 顶部 40px， 但 是 
| 此 时 如 果 浏 览 器 大 小 改变 ， 图 片 不 会 做 出 相应 调整 ， 可 能 会 出 现 图 片 显示 不 全 的 现象 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添加 <style 
type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 : 
body{ /* 页 面 基 本 属性 */ 
padding:0px: 
margin:0PX: 
background-image:url(images/1.jpg): /背景 图 片 #/ 
background-repeat:no-repeat: 让 不 重复 */ 
background-position:bottom right: 背景 位 置 ， 右 下 */ 
background-color#0066CC: 


p{ 人 * 段 沙 样式 */ 
line-height:1.6em:; 
margin:Opx: font-size: 14px: 
padding-top:10px: 
Ppadding-left:6px: padding-right:8px: 
} 


然后 在 <body> 标 签 中 输入 如 下 代码 : 


<h1l> 可 爱 的 企鹅 </hl> 

| <p> 去 南极 ， 第 一 个 想到 的 就 是 企鹅 ， 那 毛 昔 昔 的 肉 嘟 嘟 的 样子 非常 可 爱 。 我们 第 一 次 登陆 就 是 去 看 它 ， 兴 
| 奋 的 心情 和 期 待 的 心情 交织 在 一 起 , 但 是 , 真正 踏 上 南极 半岛 的 一 瞬间 不 是 因为 看 到 企鹅 而 兴奋 ,而 是 因为 企鹅 
| 在 自己 的 脚 边 而 惊讶 。 


| 显示 结果 如 图 9.90 所 示 。 从 图 中 可 以 看 出 ， 图 片 位 于 页 面 右 下 方 。 
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图 990 设置 图 片 位 置 
9.7.4 国定 背景 图 片 


对 于 大 幅 的 背景 图 片 ， 当 浏览 器 出 现 滚动 条 时 ， 通 常 希望 图 片 不 要 随 着 文字 的 移动 而 移动 ， 而 是 
固定 在 一 个 位 置 上 。CSS 使 用 background-attachment 属性 来 定义 背景 图 片 的 固定 ， 该 属性 用 法 如 下 : 
background-attachment: scroll | fixed 


其 中 ，scroll 指 背景 图 片 随 着 对 象 内 容 滚动 ，fixed 则 是 将 背景 图 片 固定 。 
【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 签 内 添加 <style type= 
"text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 一 个 类 样式 。 


body { /* 网 页 属性 样式 */ 
padding: 0: 
margin: 0; 
background-image: url(images/1.jpe): 
background-position: right center:; 
background-repeat: no-repeat: 
background-attachment: fixed: 
height: 1000px: 


} 

Pp {必定 义 段 落 样式 */ 
line-height: 1.6em: 
font-size: 18px: 


} 
然后 在 <body> 标 签 中 输入 以 下 段落 文本 ， 并 应 用 上 面 定义 的 类 样式 。 


<p> 古 代 有 一 位 农夫 女儿 名 叫 明 姑 ， 她 节 厚 老实 ， 长 得 俊俏 ， 却 被 后 娘 “ 女 霸王 ” 视 为 眼中 钉 ， 受 到 百般 凌 
辱 虐待 。 一 次 ， 因 一 件 小 事 ， 项 撞 了 后 娘 一 句 ， 惹 怒 了 后 娘 ， 使 用 皮革 抽打 她 ， 可 一 下 失手 打 到 了 前 来 劝解 的 亲 
生 女 儿 身 上 ， 这 时 后 娘 又 气 又 恨 ， 夜 里 趁 明 姑 熟 睡 之 际 挖 掉 了 她 的 眼睛 。 明 姑 疼 痛 难 忍 ， 破 门 出 逃 ， 不 久 死去 ， 
死 后 在 她 坟 上 开 着 一 盘 鲜 丽 的 黄花 ， 终 日 面向 阳光 ， 它 就 是 向 日 葵 。 表 示 明 姑 向 往 光 明 ， 厌 恶 黑暗 之 意 ， 这 传说 
激励 人 们 痛恨 暴力 、 黑 暗 ， 追 求 光明 。 这 向 日 蓉 便 繁衍 至 今 。</p> 


在 浏览 器 中 预览 ， 如 图 9.91 所 示 ， 从 其 显示 效果 可 以 看 出 ， 当 拖 动 浏览 器 的 滚动 条 时 ， 背 景 图 
片 是 固定 的 ， 不 会 随 着 滚动 条 的 移动 而 改变 。 
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古代 有 一 位 农夫 女儿 名 叫 明 姑 ， 她 整 厚 老实 ， 长 得 俊俏 ， 部 被 后 娘 " 女 霸王 " 视 为 眼中 条， 受到 百般 竣 
等 虐待 。 一 次 ， 因 一 件 小 事 ， 顶 考 了 后 娘 一 句 ， 车 怒 了 后 娘 ， 使 用 皮 和 车 抽打 她 ， 可 一 下 失手 打 到 了 前 
全 站 | 来 劝解 的 亲生 女儿 身上 ， 这 时 后 娘 又 气 又 恨 ， 夜 里 趁 明 好 熟睡 之 际 挖 掉 了 她 的 上 6 

一 一 破门 出 运 ， 不 和 久 死去 ， 死 后 在 她 坟 上 开 着 一 胡 鲜 丽 的 黄花 向 阳 3 





图 9.91 设置 固定 背景 图 片 


【拓展 】 与 font 和 border 属性 一 样 ，background 属性 也 可 以 将 各 种 关于 背景 的 设置 集中 到 一 个 
| 语句 中 来 ， 这 样 不 但 可 以 减少 代码 量 ， 还 可 以 加 快 网 页 的 下 载 速度 。 例 如 有 如 下 设置 背景 的 语句 : 


以 上 代码 可 以 统一 将 其 用 一 句 语句 代 蔡 : 
Background:#7876ea url(bg.ipg) repeat-x 10px Spx fixed; 


两 种 属性 声明 的 方法 在 显示 效果 上 完全 一 样 ， 第 一 种 方法 代码 长 , 但 是 可 读 性 好 ,第 二 种 代码 简 
洁 ， 提 高 页 面 下 载 速度 ， 所 以 两 种 方法 各 有 优点 ， 读 者 可 以 根据 自己 喜好 进行 选择 。 


98 案例 实战 


本 节 将 通过 实例 的 形式 帮助 读者 设计 CSS 的 图 片 样式 ， 以 提高 实战 技法 和 技巧 ， 快 速 理解 CSS 
图 片 属性 的 应 用 。 


9.8.1 ”设置 带 花 纹 边框 


为 页 面 添加 边框 ， 只 要 使 用 border 属性 就 可 以 做 到 , 但 是 ， 如果 想 要 给 页 面 添 加 一 个 带 花 纹 的 边 
| 框 ， 使 用 border 属性 是 无 法 完成 的 ， 本 例 利用 图 片 背景 ， 来 实现 为 页 面 添加 带 花纹 的 边框 ， 示 例 效果 
| 如 图 9.92 所 示 。 
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屎 务 指南 合作 伙伴 联系 我 们 


Note 








图 9.92 设置 带 花 纹 的 边框 


【操作 步骤 】 
第 1 步 ， 构 建 网 页 结构 。 在 本 例 中 首先 用 <div> 标 记 设 置 container 容器 ， 在 此 页 面 中 ， 所 有 内 容 
分 为 4 个 部 分 ， 分 别 用 <div> 定 义 为 header、menu、content 和 footer。 
<div id="container"> 
<div id="header"> 
<div class="logo"><img src="images/logo.gif"></div> 
<div id="title"> 高 质 .高 效 <span> 是 我 们 一 直 的 追求 </span> </div> 
</div> 
<div id="menu container"> 
<div id="menu"> 
<ul> 
<li><a href="#" class="current"><span></span> 首 页 </a></li> 
<li><a href="#" target="_parent"><span></span> 新 产品 </a></li> 
<li><a hre 仁 "#" target="” blank"><span></span> 服 务 指南 </a></li> 
<li><a hre 仁 "#"><span></span> 合 作 伙伴 </a></li> 
<li><a hre 仁 "#"><span></span> 联 系 我 们 </a></li> 
</ul> 
</div> 
</div> 
<div id="content_container"> 
<div id="content"> 
<h2> 奔 腾 信 息 资 询 〈 北 京 》 有 限 公 司 简介 </h2> 
<p> 信 息 咨 询 〈 北 京 ) 有限 公 司 是 中 国 领先 的 营销 解决 方案 和 信用 解决 方案 提供 商 。 我 们 收集 、 
分 析 和 管理 关于 市 场 、 消 费 者 和 商业 机 构 的 信息 ， 通 过 信息 、 服 务 和 技术 的 整合 ， 提 供 市 场 研究 、 商 业 信息 、 咨 
询 和 数据 库 营销 服务 ， 协 助 您 做 出 更 好 的 营销 决策 和 信贷 决策 并 发 展 盈 利 的 客户 关系 。 我 们 在 北京 、 上 海 和 广州 
拥有 近 600 名 员工 ， 为 各 行业 的 机 构 客 户 提供 专业 服务 ， 包 括 汽车 、 金 融 、 保险、 零售 、 电 信 、IT、 制 造 业 、 消 
费 品 和 贸易 。 
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</div> 
<div id="footer_container"> 
<div id="footer"> Copyright@ 2015 | Designed by us <a href="#W#" target=" parent"> 联 系 我 们 </a> 


<div> 
<div> 
<div> 
此 时 的 显示 效果 如 图 9.93 所 示 ， 可 以 看 到 ， 网 页 的 基本 结构 已 经 措 建 好 了 ， 但 是 由 于 没有 进行 
| CSS 样式 设置 ， 界 面 中 只 是 把 图 片 和 文字 内 容 罗 列 起 来 ， 没 有 任何 修饰 。 
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市 声 碘 守 咨 询 服 务 报 供 关于 市 场 环境 和 清 划 用 生 为 和 开工 御 信息 和 分 析 ， 协 员 你 在 市 场 诗 入 、 市 场 细 分 、 产 吕 宇 位、 俐 格 第 申 、 营 销 执 广 、 污 组 
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9.93 ”构建 网 页 的 基本 结构 


您 提示 : 在 本 例 中 ， 网 页 的 结构 是 : 在 container 容器 中 包含 了 header、menu、content 和 footer 4 
部 分 , 设计 带 花 纹 边 框 的 原理 就 是 container 的 宽度 设置 比 header、menu、content 和 footer 
的 宽度 多 ， 并 让 这 4 部 分 居中 显示 ， 那 么 container 中 的 背景 图 片 就 会 在 左右 各 露出 一 部 
分 ， 我 们 所 看 到 的 似乎 就 是 页 面 左右 各 有 两 条 带 花纹 的 边框 ， 如 果 是 设置 上 、 下 、 左 、 右 
边框 ， 道 理 是 一 样 的 。 本 例 示意 图 如 图 9.94 所 示 。 


带 花纹 的 边框 


带 花纹 的 边框 





9.94 ”网 页 结构 示意 图 
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第 2 步 ， 定 义 网 页 基本 属性 、container 容器 的 样式 以 及 所 有 段落 的 共有 样式 。 





以 上 代码 中 , * fmargin:0px:padding:0px} 将 网 页 中 所 有 标签 的 padding 和 margin 都 设 定 为 0px, 在 
body 中 定义 了 页 面 的 背景 颜色 ， 在 container 中 设置 了 容器 宽度 为 810px， 并 为 其 添加 了 图 片 背景 。 
此 时 的 显示 效果 如 图 9.95 所 示 。 





图 9.95 设置 网 页 基本 属性 | 
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第 3 步 ， 定 义 网 页 header 部 分 样式 。 





#header { 
width: 790px: /*header 部 分 div 块 的 宽度 */ 
全 | height: 200px: 庆 高 宽 记 
一 | margin: 0 auto; /*header 居中 */ 
| background:#3f4857: /# 背 景 颜色 村 
Note | border-top:#FFFFFF 2px solid: /*header 上 边框 3/ 

| b 
| #header logof /logo 图 片 样式 */ 
| float-left: 证 左 对 齐 */ 
| margin-top:40px: 证 顶端 补 白 */ 
| margin-left:20px: 请 左 侧 补 白 所 
| 
| } 
| header #title { 
| float: right: 
| color: #ffF 
| font-size: 34px; 
| font-weight: bold: /文字 粗细 所 
| letter-spacing: Spx: 证 字 间 距 六 
| font-family: 黑 体 ; 
| Iargin-top:S0px: 
| margin-right:60px: 
| 昌 
|! 
| #header #title span { 
| display: block: 族 定 义 为 块 级 元 素 */ 
| margin: 10px 0 0 Spx: 
| font-size: 14px: 
| color: #TEF 
| font-weight: bold: 
| letter-spacing: Spx: 

bh 


| 以 上 代码 中 ， 首 先 定义 了 header 样式 ， 其 宽度 为 790px， 这 样 设置 正 是 实现 页 面 两 侧 带 花纹 边框 
| 的 关键 ， 因 为 图 片 背景 (container) 的 宽度 是 810px， 也 就 是 说 在 header 的 左右 两 侧 会 各 显示 10px 
的 背景 图 片 ， 这 就 是 带 花纹 边框 ; 在 logo 中 设置 了 logo 图 片 的 样式 ; title 中 定义 了 文字 “高 质 .高 效 ” 
的 样式 ;在 span 样式 中 定义 了 文字 “是 我 们 一 直 的 追求 ”的 样式 ， 由 于 <span> 标 记 是 行内 元 素 ， 但 
是 在 这 里 需要 按 块 级 元 素来 设置 其 样式 ， 所 以 display:block 表示 将 <span> 标 记 中 的 内 容 定义 为 块 级 
元 素 。 

块 级 元 素 的 特点 如 下 : 

总 是 在 新 行 上 开始 。 

行 间距 以 及 项 和 底 边 距 都 可 以 控制 。 

加 ”如 果 不 设置 宽度 ， 则 其 宽度 会 默认 为 整个 容器 的 100%; 而 如 果 设 置 了 宽度 ， 其 宽度 为 设置 

的 值 。 

<p>、<h1>、<form>、<ul>、<] 户 标签 都 是 块 级 元 素 。 
| 此 时 网 页 的 显示 效果 如 图 9.96 所 示 。 
| 上 一 步 实现 了 header 部 分 的 设置 ， 但 是 网 页 的 菜单 部 分 还 是 如 图 9.97 所 示 的 样式 。 
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会 生生 
EER 
奔腾 信息 蛮 询 (北京 》 有 限 公司 简介 

信息 闪 订 (北京 ) 用 取 公司 是 中 国 每 的 过 铺 贷 决 万 才 和 备用 解闷 万 守 盘 代 高 。 入 们 站 华 、 分 析 困 各 理 关 于 
商业 机 本 的 信 拉 通过 信息 、 好 务 和 本 术 的 整 ， 提 供 记 所 研究 、 凋 业 作 所 、 咨 雪 i 提 但 三 下 务 ， 协 
销 录 策 和 信贷 决策 发展 量 利 的 客户 关系 。 伐 们 在 北 X， 上 海 和 三 计 下 和 600 名 员工 ， 为 各 
让 括 年 ， 全 到， 健 这 地 舍 . 电信 、IT， 制 适 业 、 滑 机 局 和 寅 号 。 在 华 们 《财富 》 世 乔 so 了 
同 六 吕 和 也 务 ，2007 年 年 初 ， 全 于 全 #1 下 此 有 和 疝 业 信息 、 入 位 名 关 万 素 各 秆 前 决 方 末 者 3 人 
roup》 全 进 j 了 区 下 失 珊 ， 包 居 固 导入 先 全 产品 和 读 术 入 到 有 洗 信 的 各 个 业务 估 城 
提高。 

场 欠 癌 语 妥 务 提供 关于 丰 场 环境 和 清 司 者 行为 和 丰 度 的 信息 和 分 析 ， 
和 、 豆 失 广汉 注 织 和 全 第 太 面 和 出现 是 的 商业 决 第 ， 

商业 信息 潜 调 各 务 拉 供 企业 入 所 扩 吉 、 企 业 关 撞 计 产品 ,行业 交手 报 告 ， 

bla 


,由 
图 9.96 header 部 分 的 CSS 设置 
下 可 


人 | 


9.97 ”没有 添加 CSS 的 菜单 样式 
第 4 步 ， 为 menu 部 分 添加 CSS 样式 。 








#menu {/*menu 容器 样式 */ 
clear: both: 证 清除 左 浮动 和 右 浮动 */ 
width: 790px: /*menu 宽度 */ 
margin: 0 auto: /*menu 容器 居中 所 
height:36px: /*menu 容器 的 高 度 */ 
b 
#menu ul { /*ul 样式 */ 
float: left: 
width:790px: /*ul 宽度 */ 
height:36px: 
list-style: none: 让 不 显 示 项 目 符号 */ 
border-top:#FFFFFF 2px solid: 履 设 置 菜 单 的 上 边框 */ 
border-bottom:#FFFFFF 2px solid: 履 设 置 菜 单 的 下 边框 */ 
background:#f7f392: /*ul 的 背景 颜色 */ 
} 
#menu ul lia { /* 设 置 链 接 样 式 */ 
float: left: 片 左 浮动 */ 
height: 28px: 
width: 100px: 
padding: 10px 0 0 10px: 
font-size: 16px: 
font-weight: bold: 
text-decoration: none: 
color: #f54f06: /# 字 体 颜 色 所 
} 
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aa 
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| 以 上 代码 中 , 首先 设置 了 menu 的 宽度 为 790px, 同样 比 container 容器 的 宽度 左右 两 侧 各 少 10px， 

| 目的 同样 是 为 了 显示 出 container 的 背景 图 片 ，clear:float 语句 是 为 了 清除 浮动 ， 由 于 前 面 的 代码 中 使 

| 用 了 浮动 , 所 以 为 了 消除 左右 浮动 的 影响 , 使 用 此 语句 ; 在 忆 样 式 中 定义 了 菜单 的 样式 , 其 中 用 border 
全/ | 语句 定义 了 岂 的 上 下 边框 ; 在 a 中 定义 了 菜单 的 链接 样式 ， 其 中 float:left 语句 在 这 里 的 作用 是 使 列 
| 表 项 目 横向 显示 。 此 时 的 显示 效果 如 图 9.98 所 示 。 


服务 指南 。 合作 伙 件 联系 我 们 
奔腾 信息 将 询 〈 北 京 ) 有限 公司 简介 
有 和 突 有 本 次 方 案 提 人 次， 


信息 咨询 《北京 有 由 公司 是 中 辐 令 先 的 车 请 才 志方 


emp) 7 把 其 国 奈 领先 的 产品 和 技术 钴 详 利 新 生 信 的 各 个 业务 入 权 
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痢 丘 于 完 记 询 职 务 提供 关于 市 场 环 志和 浓 和 者 行为 和 恋 度 的 信息 和 分 忻 ， 协 吕 克 在 市 声 进入、 
和 0. 营销 推广 ， 虑 过 后 织 和 管理 等 方面 仙 出 更 好 的 商业 贿 菏 、 

rt 全 二 类 报 认 产品 、 行 业 风 及 报告， 信 月 否 询 ， 相 类 尖 反 避 深 坟 十 邱 各 全 活动 天职 
秀 ,为 您 的 信贷 忆 理 、 行业 分 析 以 及 育 生 总 测 守 提供 充分 的 信息 ， 决 条 和 技术 : 
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9.98 ”menu 部 分 的 CSS 设置 
第 5 步 ， 从 图 9.98 中 可 以 看 出 ， 网 页 已 初 见效 果 ， 接 下 来 定义 content 样式 和 <h2> 标 题 样式 。 


#content { /* 正 文 样式 */ 
clear: both: 证 清除 浮动 */ 
width: 790px: 
Iargin: 0 auto: 
padding-bottom:20px: 
padding-top:20px: 让 顶端 内 边 距 */ 
background:#FFFFFF: 正文 部 分 背景 颜色 */ 


} 
h2{/* 标 题 样式 */ 
padding:40px auto: 证 标题 内 边 距 */ 
} 
在 content 中 定义 了 正文 容器 的 样式 ， 用 clear:both 语句 清除 了 左右 浮动 ， 然 后 设置 正文 容器 的 宽 
度 为 790px。 在 h2 中 定义 了 标题 样式 。 此 时 的 显示 效果 如 图 9.99 所 示 。 
第 6 步 ， 设 置 网 页 footer 部 分 的 样式 。 


| #footer { /*footer 部 分 样式 */ 

| margin: 0 auto: /# 居 中 刀 

| width: 790px: /*footer 部 分 的 宽度 */ 
height:50px: 

| color: #033a5d: /# 字 体 颜 色 */ 

| font-size:14px: 

| background:#999999; /*footer 部 分 的 背景 颜色 */ 


。350 。 


第 9 章 制作 网 页 图 像 


border-bottom:2px #FFFFFF solid: /*footer 部 分 的 下 边框 */ 
border-top:2px #FFFFFF solid: /*footer 部 分 的 上 边框 */ 
padding-top:20px: 证 内 边 距 */ 
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服务 指南 言 作 伙伴 联系 我 们 


以 及 直 货车 销 职务 ， 芭 助 





图 9.99 设置 正文 部 分 样式 
9.8.2 设置 圆润 的 栏目 模块 


在 网 页 中 常常 可 以 看 到 整个 页 面 或 者 是 某 些 模块 是 圆 角 的 ,这 使 网 页 和 模块 显得 更 圆润 ， 本 例 运 
用 <div> 块 的 圆 角 化 ， 实 现 使 模块 看 起 来 更 圆润 的 方法 ， 示 例 演示 效果 如 图 9.100 所 示 。 
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~ 砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


【操作 步骤 】 
第 1 步 ， 构 建 网 页 基本 结构 。 在 本 例 中 首先 用 <div> 标 记 设置 container 容器 ， 在 此 容器 中 ， 分 别 
用 <div> 定 义 了 header、menu、content 和 footer 4 部 分 。 


| <div class="header"></div> 


= 
! <ul> 


| <1i> 首 页 </li> 
<1i> 热 门 推荐 <i> 
<li> 精 华 帖 <i> 
<l 记 交流 区 </li> 
<1i> 经 典 收藏 <1i> 
<li> 历 史记 录 </i> 
<! 记 通讯 录 </li> 
<li> 关 于 我 们 <4li> 
| </ul> 
| </div> 
| <div class="content"></div> 

<div class="footer">@2015 版 权 所 有 | 关于 我 们 | 联系 我 们 |</div> 
</div> 


此 时 在 没有 CSS 样式 设置 时 的 显示 结果 如 图 9.101 所 示 。 
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9.101 网 页 基本 结构 
第 2 步 ， 定 义 网 页 基本 属性 、container 容器 的 样式 。 


| body{/* 网 页 基本 属性 */ 

| text-align:center: 让 居中 对 齐 */ 
| background-color#CCCCCC: /* 背 景 颜色 所 
| font-family: 黑 体 : 

| } 

| .container{  /#container 容器 样式 */ 

| width:800px: 

| margin:0 auto: 人 * 居 中 沁 

: } 

| 以 上 代码 中 ， 首 先 设置 了 body 的 背景 颜色 ， 在 container 中 设置 了 容器 宽度 为 800px。 此 时 的 显 
| 示 效 果 如 图 9.102 所 示 。 


-2 
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9.102 设置 网 页 基本 属性 
第 3 步 ， 定 义 网 页 header 部 分 的 样式 。 





以 上 代码 中 , 首先 定义 了 header 样式 , 其 宽度 为 相对 宽度 , 父 标记 的 100%, border-top-left-radius: 
10px 和 border-top-right-radius:10px 两 句 定义 了 header 模块 的 左上 角 和 右上 角 显 示 为 圆 角 。 虽 然 这 种 
方法 比 其 他 实现 圆 角 的 方法 简单 ， 但 是 由 于 此 方法 的 兼容 性 差 ，Firefox 支持 ， 所 以 请 读者 还 是 谨慎 
使 用 为 好 。 此 时 网 页 的 显示 效果 如 图 9.103 所 示 。 从 图 中 可 以 看 到 ，header 部 分 的 左上 和 右上 角 变 为 
贺 角 ， 使 header 显得 圆润 了 许多 。 


CSS 知 识 交流 与 学 习 








图 9.103 header 部 分 的 CSS 设置 
第 4 步 ， 第 3 步 实现 了 header 部 分 的 设置 ， 接 下 来 为 menu 部 分 添加 CSS 样式 。 
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border-left:green 2px solid: 片 左 侧 边框 */ 


在 以 上 代码 中 , 首先 设置 了 menu 的 宽度 为 800px; 在 ud 中 定义 了 菜单 的 样式 , 其 中 用 list-style- 
type:none 语句 定义 列表 不 显示 项 目 符号 ; 在 中 定义 了 标签 <li> 的 样式 ， 其 中 float 语句 的 作用 是 使 
项 目 列表 中 的 各 项 左 浮动 ,在 这 里 使 用 此 语句 ， 可 以 达到 使 原本 纵向 排列 的 列表 各 项 横向 排列 。 此 时 
的 显示 效果 如 图 9.104 所 示 。 


全 | border-right:green 2px solid; 片 右 侧 边框 */ 
"| background-color-#f0d835; 人 # 背 景 颜色 % 
} 
ote | 
| Padding:Opx; 
| list- :none; 人 # 不 显示 项 目标 记 #/ 
| } 
| 
| float:left: 族 左 浮动 */ 
| padding:0px 20px: 族 内 边 距 */ 
| 
| 
| 
| 
| 
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9.104 mennu 部 分 的 CSS 设置 
第 5 步 ， 从 图 9.104 中 可 以 看 出 ， 网 页 的 菜单 部 分 已 经 设置 完毕 ， 接 下 来 定义 content 样式 。 


.content{ /+ 正文 样式 */ 
| width:800px: 
| height:200px: 
| background-color#FFFFFF: /# 正 文部 分 背景 颜色 所 
| borderleftgreen 2px solid: 刻 左 侧 边框 */ 
| borderrightgreen 2px solid: 证 右 侧 边框 */ 
| border-top:green 2px solid: /# 顶 部 边框 所 
| 国生 
| 


| 在 content 中 定义 了 正文 容器 的 样式 。 此 时 的 显示 效果 如 图 9.105 所 示 。 
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图 9.105 设置 正文 部 分 样式 
第 6 步 ， 设 置 网 页 footer 部 分 的 样式 。 


.footer{/*footer 部 分 样式 */ 
width:800px:; 
height:80px: 
background:url(images/footer bg.jpe): /*footer 部 分 的 背景 图 片 */ 
border-bottom-left-radius: 10px: 上 设置 左下 边框 的 圆 角 化 */ 
border-bottom-right-radius:10px: 店 设 置 右 下 边框 的 圆 角 化 */ 
border:green 2px solid: 让 边框 */ 
padding-top:20px; 


容 提示 : 以 上 网 页 由 于 使 用 了 border-radius 属性 ， 所 以 对 浏览 器 的 兼容 性 有 一 定 要 求 ， 在 下 浏览 
器 中 无 法 显示 圆 角 ， 所 以 请 读者 在 Firefox 浏览 器 中 浏览 。 
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第 | |/ 章 
网 页 色彩 设计 


网 页 给 人 的 第 一 印象 来 自 于 视觉 ， 在 网 页 设计 中 ， 合 适 的 色彩 能 给 网 页 作品 带 来 妊 活 的 生 
命 力 。 它 既是 界面 设计 的 语言 ， 又 是 视觉 信息 传达 的 手段 和 方式 ， 是 网 页 界面 设计 中 不 可 或 缺 
的 重要 元 素 。 色 彩 的 选择 和 搭配 相当 重要 ， 不 同 的 色彩 搭配 产生 不 同 的 效果 ， 从 而 呈现 给 访问 
者 以 不 同 的 视觉 效果 ， 吸 引 访问 者 的 注意 。 作 为 一 个 网 页 设计 者 ， 要 在 网 页 设计 中 灵活 、 巧 妙 
地 运用 色彩 ， 使 网 页 达到 各 种 精彩 效果 ， 就 必须 对 色彩 的 相关 知识 有 深入 的 了 解 


【 学 习 重 点 】 

色彩 原理 
色彩 的 对 比 
色彩 的 温 合 
色彩 的 心理 效应 
网 页 色彩 搭配 应 用 


至 至 至 至 至 





第 10 章 网 页 色彩 役 计 § 


10.1 网 页 色彩 基础 


最 先 使 访问 者 注意 的 就 是 网 页 的 颜色 ， 其 次 才 是 图 像 和 文字 。 下 面 介绍 色彩 的 相关 原理 。 
10.1.1 色彩 形成 


色彩 的 形成 离 不 开光 的 作用 ， 当 光 刺 激 眼睛 时 ， 就 会 使 视觉 产生 色彩 的 概念 ， 也 就 有 了 现在 的 这 
个 被 色彩 演 染 得 五 颜 六 色 的 世界 ， 简 单 地 说 ， 色 彩 是 一 种 视 知觉 ， 是 光 作 用 于 眼睛 的 结果 。 

如 果 让 一 东 白 光 从 狭 缝 射 入 黑色 的 房间 , 并 且 使 光 穿 过 三 棱镜 , 这 时 会 发 现 白光 被 分 离 成 红 、 橙 、 
黄 、 绿 、 青 、 蓝 、 紫 等 各 种 颜色 的 光 ， 这 就 是 能 看 到 各 种 不 同 颜色 物体 的 原因 ， 如 图 10.1 所 示 。 





直射 光线 


一 站 对 妹 晤 建英 片 





图 10.1 三 棱镜 对 白光 的 分 解 


当 被 分 解 的 红 、 橙 、 黄 、 绿 、 青 、 蓝 、 紫 等 颜色 的 光 再 次 经 过 三 棱镜 时 不 再 发 生 光 的 分 解 现象 
这 样 的 光 就 被 称 为 单 色 光 。 而 红色 、 绿 色 、 蓝 色 的 光 被 称 为 三 原色 光 。 自 然 界 的 任何 色光 都 可 以 由 一 
定 比例 的 三 原色 光 组 合 而 成 , 如 红色 光 和 绿色 光 混 和 可 以 产生 黄色 光 , 红色 光 和 蓝 色光 混和 可 以 产生 
品 红色 光 ， 蓝 色光 和 绿色 光 混和 可 以 产生 青色 光 ,， 红 橙 





黄 绿 青 蓝 紫光 、 绿 色光 、 蓝 色光 三 者 等 量 混 和 可 以 产生 
白色 光 ， 如 图 10.2 所 示 。 
紫红 、 黄 、 蓝 绿 3 种 颜色 称 为 色彩 三 原色 ， 自 然 界 这 
的 任何 色彩 都 可 以 由 一 定 比 例 的 色彩 三 原色 组 合 而 成 。 Y 辐 
理论 上 色彩 三 原色 等 量 混和 可 以 得 到 黑色 , 紫红 色 和 黄 
色 混 和 可 以 得 到 红色 , 紫红 色 和 蓝 绿色 混和 可 以 得 到 蓝 图 102 三 原色 


色 ， 蓝 绿色 和 黄色 混和 可 以 得 到 绿色 。 
10.1.2 色彩 特征 


颜色 可 以 分 为 非 彩 色 和 彩色 两 大 类 。 非 彩色 指 黑色 、 白 色 和 各 种 深浅 不 一 的 灰色 ， 而 其 他 所 有 颜 
色 均 属于 彩色 。 从 心理 学 和 视觉 的 角度 出 发 ， 彩 色 具 有 3 个 属性 : 色相 、 明 度 、 纯 度 〈 彩 度 ) 。 明 度 
表现 了 色彩 的 深浅 ， 色 相 表 现 了 色彩 的 种 类 ， 纯 度 表 现 了 色彩 的 鲜艳 程度 。 
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在 五 彩 缤纷 的 生活 中 , 色彩 赋予 了 这 个 世界 更 多 的 活力 。 人 对 色彩 相当 敏感 , 在 浏览 一 个 网 页 时 ，! 





A 


1. 明度 (Value) 

明度 也 叫 亮度 ， 指 颜色 的 深浅 、 明 暗 程度 没有 色相 和 饱和 度 的 区 别 。 不 同 的 颜色 ,反射 的 光量 
| 强 弱 不 一 ， 因 而 会 产生 不 同 程度 的 明暗 。 非 色彩 的 黑 、 灰 、 白 较 能 形象 地 表达 这 一 特质 。 
| 光量 越 多 ， 明 度 越 高 ， 反 之 明度 越 低 。 色 彩 的 明度 则 取决 于 混 色 中 白色 和 黑色 含量 的 多 少 。 关 于 
明度 的 变化 如 图 10.3 所 示 。 








10.3 明度 变化 


在 网 页 的 设计 中 如 果 底 色 是 黑 的 ， 而 文字 也 选用 了 较 深 的 色彩 ， 那 么 由 于 色彩 的 明度 比较 接近 ， 
访问 者 在 浏览 时 ， 眼 睛 就 会 感觉 很 吃力 ， 影 响 浏览 的 效果 。 当 然 ， 色 彩 的 明度 也 不 能 变化 太 大 ， 和 否则 
| 屏幕 上 的 亮度 反差 太 强 , 同样 也 会 使 访问 者 在 浏览 时 感觉 到 刺眼 。 国 际 上 日 本 色 研 配色 体系 (Practical 
| Color Co-ordinate System) 用 9 级 来 表示 明暗 ， 门 赛 尔 则 用 11 级 来 表示 明暗 ， 两 者 都 用 一 连 串 数字 表 
示 明 度 的 增 减 变化 。 

【示例 1】 明 度 网 页 示例 截图 如 图 10.4 所 示 。 





图 10.4 ”明度 网 页 效果 


| 【分 析 】 
| R223 G227 B200 
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R207 G221 B221 


R247 G246 B2225 
人 JR247 G247 B247 


从 图 10.4 所 示 的 网 页 所 选取 的 4 个 主要 色 块 的 RGB 数值 来 看 ， 这 4 块 色彩 组 合 显示 RGB 数值 | 


很 高 ， 接 近 于 最 高 值 255。RGB 相互 间 数 值 相近 ， 由 于 有 RG 的 高 数值 与 B 高 数值 混合 ， 整 个 网 页 给 
人 的 感觉 非常 协调 ， 柔 和 和 雅致， 心情 愉悦 。 
【点 评 】 


3 
) 六 





RGB 同时 呈现 相近 的 高 数值 时 ， 相 近 等 量 的 色彩 相互 混合 ， 页 面 呈 高 明度 灰色 段 ， 协 调 的 柔和 | 


状态 ， 令 人 遐想 ， 对 视觉 刺激 是 缓慢 的 ， 适 合 长 时 间 观 看 。 但 由 于 数值 接近 ， 因 此 色 阶 平稳 ， 同 时 存 
在 着 不 够 醒目 的 状态 。 


2. 色相 (Hue) 


色彩 的 色相 也 叫 色 调 ， 简 单 地 说 就 是 指 色彩 的 种 类 。 色 相 和 色彩 的 强 弱 及 明暗 没有 关系 ， 只 是 纯 | 


粹 表示 色彩 相貌 的 差异 。 最 初 的 基本 色相 为 红 、 橙 、 黄 、 绿 、 蓝 、 紫 。 在 各 色 中 间 加 插 一 两 个 中 间 色 ， 
其 头 尾 色相 ， 按 光谱 顺序 为 红 、 橙 红 、 黄 橙 、 黄 、 黄 绿 、 绿 、 绿 蓝 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 、 红 
和 紫 中 再 加 个 中 间 色 ， 可 制 出 12 基本 色相 ， 如 图 10.5 所 示 。 


色 轮 是 表示 最 基本 色相 关系 的 色 表 。 色 轮 上 90” 角 内 的 几 种 色彩 称 作 同 类 色 ， 也 叫 近邻 色 或 姐 | 


妹 色 。90” 角 以 外 的 色彩 称 为 对 比 色 。 色 轮 上 相对 位 置 的 色 叫 补 色 ， 也 叫 相 反 色 ， 如 图 10.6 所 示 。 
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图 10.5 12 色相 环 图 10.6 色 轮 


一 般 来 说 ， 在 网 页 设计 中 选择 暖色 相 ， 即 红色 、 橙 色 、 黄 色 、 赭 色 等 色彩 的 搭配 ， 可 以 使 网 站 显 
得 温馨 、 和 购 、 热 情 。 在 网 页 设计 中 选择 冷色 相 ， 即 青色 、 绿 色 、 紫 色 等 色彩 的 搭配 ， 可 以 使 网 站 显 
得 宁静 、 清 凉 、 高 雅 。 在 网 页 设计 中 选择 对 比 色相 ， 即 把 色 性 完全 相反 的 色彩 搭配 在 同一 个 空间 里 ， 
如 红 与 绿 、 黄 与 紫 、 橙 与 蓝 等 的 搭配 ， 可 以 产生 强烈 的 视觉 效果 。 

3. 纯度 

纯度 (Chroma)〉 也 叫 饱和 度 ， 指 色彩 的 鲜艳 程度 。 原 色 最 纯 ， 颜 色 的 混合 越 多 则 纯度 逐渐 减低 。 
如 某 一 鲜亮 的 颜色 ， 加 入 了 白色 或 者 黑色 ， 使 得 它 的 纯度 低 ， 颜 色 趋 于 柔和 、 沉 稳 。 

一 种 色相 纯度 ， 也 有 强 弱 之 分 ， 拿 正 红 来 说 ， 有 鲜艳 无 杂质 的 纯 红 ， 也 有 较 淡薄 的 粉红 ， 但 它们 
的 色相 都 相同 ， 只 是 强 弱 不 一 。 纯度 常用 高 低 来 描述 ,纯度 越 高 ， 色 越 纯 ， 越 艳 ; 纯度 越 低 ， 色 越 涩 ， 
越 间 。 纯 色 是 纯度 最 高 的 一 级 。 色 彩 纯度 的 高 低 受 物体 表面 结构 、 照 射 光 源 的 特点 以 及 视觉 生理 特性 
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! NN 
! 起 
| 的 影响 。 关 于 色彩 纯度 的 变化 如 图 10.7 所 示 。 
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图 10.7 色彩 纯度 的 变化 


掌握 明度 、 色 相 和 纯度 3 个 方面 的 知识 ， 能 产生 良好 的 色彩 感 ， 如 图 10.8 所 示 展 示 明 度 、 色 相 
和 纯度 不 同 推移 变化 。 
【示例 2】 纯度 网 页 示例 截图 如 图 10.9 所 示 。 


minimalweb 


明度 推移 


| 全 


色相 推移 


纯度 推移 
图 10.8 色彩 推移 变化 比较 10.9 纯度 页 面 效果 


【分 析 】 

二 H213 so9% B79% 

坑 H327 s85% B97% 

图 10.9 所 示 的 网 页 中 选取 了 主要 的 两 种 色 系 为 组 合 。 运 用 HSB 数值 模式 更 易于 理解 分 析 该 网 页 
的 纯度 情况 ， 我 们 看 到 蓝 色 S 数值 呈现 100% 具 有 相当 高 的 饱和 度 ，B 明度 为 80%， 玫 瑰 色 S 饱和 度 
数值 为 85%, B 明度 为 97%。 当 饱和 度 和 明度 同时 呈 最 高 值 时, 色彩 对 视觉 的 刺激 强度 达到 最 高 状态 。 
由 于 蓝 色 的 明度 稍 低 ， 饱 和 度 较 高 ， 而 玫瑰 色 的 明度 较 高 ， 该 颜色 纯度 随 之 加 强 ， 因 此 玫瑰 色相 对 蓝 
| 色 对 人 的 视觉 刺激 更 强烈 。 

【点 评 】 

HSB 模式 中 S 和 B 呈现 的 数值 越 高 ， 饱 和 度 明 度 越 高 ， 页 面色 彩 强烈 艳丽 ， 对 视觉 刺激 是 迅速 
的 ， 醒 目的 效果 ， 但 不 易于 长 时 间 的 观看 。 以 上 两 种 颜色 的 S 数值 接近 ， 是 强烈 的 状态 。H 显示 的 度 
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是 代表 在 色 轮 表 里 某 个 角度 所 呈现 的 色相 状态 ， 相 对 于 SB 来 说 ， 意 义 不 大 。 
10.1.3 认识 RGB 与 HSB 


在 实用 美术 中 ， 常 有 “ 远 看 色彩 近 看 花 ， 先 看 颜色 后 看 花 ， 七 分 颜色 三 分 花 ” 的 说 法 。 这 说 明 在 | 


任何 设计 中 ， 色 彩 对 视觉 的 刺激 起 到 第 一 信息 传达 的 作用 。 因 此 ， 人 掌握 好 色彩 的 基础 知识 ， 在 网 页 设 


计 中 才能 做 到 游 思 有 余 。 为 了 使 下 面 的 网 页 配色 分 析 更 易于 理解 ， 先 来 了 解 色 彩 的 RGB 模式 和 HSB | 


模式 。 

RGB 

RGB 表示 红色 、 绿 色 、 蓝 色 ， 又 称 为 三 原色 光 ， 英 文 为 R (Red) 、G (Green) 、B (Blue) ， 
在 电脑 中 ，RGB 的 所 谓 “多少” 就 是 指 亮度 ， 并 使 用 整数 来 表示 。 

通常 情况 下 ，RGB 各 有 256 级 亮度 ， 用 数字 表示 为 从 0、1、2 至 255。 虽 然 数 字 最 高 是 255, 但 
0 也 是 数值 之 一 ， 因 此 共 256 级 。 按 照 计算 ，256 级 的 RGB 色彩 总 共 能 组 合 出 约 1678 万 种 色彩 ， 即 
256x256x256 二 16777216。 通 常 也 被 简称 为 1600 万 色 或 千 万 色 ， 也 称 为 24 位 色 (2 的 24 次 方 ) 。 

对 于 单独 的 有 或 G 或 B 而 言 ， 当 数值 为 0 时 ， 代 表 这 种 颜色 不 发 光 ; 如 果 为 255， 则 该 颜色 为 
最 高 亮度 。 因 此 当 RGB 3 种 色光 都 发 到 最 强 的 亮度 ， 纯 白 的 RGB 值 就 为 255,255,255。 屏 幕 上 黑 的 
RGB 值 是 0.0.0.R, 意 味 着 只 有 红色 存在 , 且 亮 度 最 强 ,G 和 B 都 不 发 光 。 因 此 最 红色 的 数值 是 255,0,0。 
同 理 , 最 绿色 就 是 0,255,0; 而 最 蓝 色 就 是 0.0.255。 黄 色 较 特殊 , 是 由 红色 加 绿色 而 得 , 就 是 255,255,0。 

RGB 模式 是 显示 器 的 物理 色彩 模式 。 这 就 意味 着 无 论 在 软件 中 使 用 何 种 色彩 模式 ， 只 要 是 在 显 
示 器 上 显示 的 ， 图 像 最 终 就 是 以 RGB 方式 出 现 。 

回 HSB 

颜色 分 为 色相 、 饱 和 度 、 明 度 3 个 因素 。 英 文 为 H (Hue) 、S (Saturation) 、B (Brightness)， 
饱和 度 高 色彩 较 艳 丽 ， 饱 和 度 低 色彩 就 接近 灰色 。 亮 度 高 色彩 明亮 ， 亮 度 低 色 彩 暗淡 ， 亮 度 最 高 得 到 
纯 白 ， 最 低 得 到 纯 黑 。 一 般 浅 色 的 饱和 度 较 低 ， 亮 度 较 高 ， 而 深 色 的 饱和 度 高 而 亮度 低 。 


10.1.4 网 页 色调 搭配 


在 网 页 页 面 中 总 是 由 具有 某 种 内 在 联系 的 各 种 色彩 ， 组 成 一 个 完整 统一 的 整体 ， 形 成 画面 色彩 总 
的 趋向 , 称 为 色调 。 也 可 以 理解 为 色彩 状态 。 色彩 给 人 的 感觉 与 氛围 , 是 影响 配色 视觉 效果 的 决定 因素 。 

为 了 使 网 页 的 整体 画面 呈现 稳定 协调 的 感觉 ,以便 充 分 地 掌握 其 规律 来 更 好 地 分 析 学 习 , 我 们 把 
视觉 角色 主 次 位 置 分 为 如 下 几 个 概念 ， 以 便 在 网 页 设计 配色 时 更 容易 操纵 主动 权 。 

回 ” 主 色调 

页 面色 彩 的 主要 色调 、 总 趋势 、 其 他 配色 不 能 超过 该 主要 色调 的 视觉 面积 。 背 景 白 色 不 一 定 根据 
视觉 面积 决定 ， 可 以 根据 页 面 的 感觉 需要 而 定 。 

回 ” 辅 色调 

仅 次 于 主 色调 的 视觉 面积 的 辅助 色 ， 是 烘托 主 色调 、 支 持 主 色 调 、 起 到 融合 主 色调 效果 的 辅助 色调 。 

回 点睛 色 

在 小 范围 内 点 上 强烈 的 颜色 来 突出 主题 效果 ， 使 页 面 更 加 鲜明 生动 。 

回 ”背景 色 

衬托 环抱 整体 的 色调 ， 协 调 、 支 配 整 体 的 作用 。 

一 个 页 面 的 色彩 角色 主要 是 根据 其 面积 多 少 来 区 别 主 次 关系 、 达 到 最 终 目 的 的 。 

当 不 同 的 颜色 使 用 的 面积 相当 ， 这 个 页 面容 易 呈 现 枯燥 单调 之 感 ， 而 没有 局 部 细节 的 变化 。 当 一 
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eh 
个 页 面 使 用 的 颜色 过 多 、 面积 大 小 用 得 过 于 琐碎 , 这 个 页 面容 易 呈 现 花哨 、 主 次 不 分 没有 整体 的 感觉。 

为 页 面 设 计 配 色 时 ， 应 根据 主题 内 容 主 次 需要 ， 各 颜色 有 其 各 自 的 功能 角色 : 面积 使 用 最 多 的 、 
最 少 的 、 不 多 不 少 的 ， 加 上 冷暖 的 适度 安排 纯度 明度 的 合理 变化 ， 遵 循 这 条 原则 ， 网 页 配色 定 能 得 
心 应 手 。 





10.2 网 页 色彩 对 比 


将 两 个 或 者 两 个 以 上 的 色彩 放 在 一 起 (包括 在 尽 可 能 接近 的 时 间 和 空间 里 , 也 就 是 说 在 同一 视 域 ， 
最 好 在 同一 视 域 中 心 之 内 ) ， 能 准确 地 发 现 色彩 的 异同 ， 才 能 最 充分 地 显示 出 应 有 的 对 比 效果 。 充 分 
地 理解 和 运用 色彩 的 对 比 ， 对 设计 制作 网 页 尤为 重要 。 


10.2.1 明度 对 比 


明度 对 比 是 指 色彩 明暗 程度 的 对 比 ， 也 称 色彩 的 黑白 度 对 比 。 明 度 对 比 是 色彩 构成 中 最 重要 的 因 
素 之 一 ， 色 彩 的 层次 与 空间 关系 主要 依靠 色彩 的 明度 对 比 来 表现 。 
用 黑色 和 白色 按 等 差 比例 相 混 ， 建 立 一 个 含 11 个 等 级 的 明度 色 标 ， 如 图 10.10 所 示 。 


0 5 10 
10.10 ”明度 色 标 


根据 明度 色 标 可 以 划分 为 3 个 明度 基调 。 

低 明 基调 : 由 0~3 级 的 暗色 组 成 的 基调 。 具 有 沉静 、 厚 重 、 迟 钝 、 忧 郁 的 感觉 。 

中 明基 调 : 由 4~7 级 的 中 明 色 组 成 的 基调 。 具 有 柔和、 甜美 、 稳 定 的 感觉 。 

高 明基 调 : 由 8~10 级 的 亮色 组 成 的 基调 。 具 有 优雅 、 明 亮 、 寒 冷 、 软 弱 的 感觉 。 

明度 对 比 的 强 弱 决定 于 色彩 明度 差别 的 大 小 。 

加 ”明度 弱 对 比 : 相差 3 级 以 内 的 对 比 ， 又 称 短 调 。 具 有 含蓄 、 模 糊 的 特点 。 

加 ”明度 中 对 比 ， 相差 4~5 级 的 对 比 ， 又 称 中 调 。 具 有 明确 、 夹 快 的 特点 。 

回 ”明度 强 对 比 : 相差 6 级 以 上 的 对 比 ， 又 称 长 调 。 具 有 强烈 、 刺 激 的 特点 。 

色彩 匹配 时 ， 只 有 色相 的 对 比 而 无 明度 的 对 比 ， 图 形 的 轮廓 难以 辨认 ; 只 有 纯度 的 区 别 而 无 明度 
的 对 比 ， 图 形 轮廓 更 为 模糊 。 可 见 ， 色 彩 的 明度 对 比 在 色彩 构成 中 起 主导 作用 。 将 相同 的 色彩 ， 放 在 
黑色 和 白色 上 ， 比 较 色彩 的 感觉 ， 会 发 现 黑色 上 的 色彩 感觉 比较 亮 ， 放 在 白色 上 的 色彩 感觉 比较 暗 ， 
这 就 是 明度 对 比 的 结果 。 

明暗 的 对 比 效果 非常 强烈 明显 ， 对 配色 结果 产生 的 影响 ， 明 度 差 异 很 大 的 对 比 ， 会 让 人 有 不 安 的 
感觉 。 对 于 网 页 设计 中 的 色彩 的 应 用 来 说 ， 明 度 对 比 的 正确 与 否 ， 是 决定 配色 的 光 感 、 明 快感 、 清 晰 
感 以 及 心理 作用 的 关键 。 


10.2.2 色相 对 比 
色相 对 比 是 基于 色相 差别 而 形成 的 对 比 。 色 相 的 差别 虽然 是 由 于 可 见 光波 长 的 长 短 差别 所 形成 ， 
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但 不 能 完全 根据 波长 的 差别 来 确定 色相 的 差别 和 确定 色相 的 对 比 程度 。 

色相 对 比 的 强 弱 ， 决 定 于 色相 在 色相 环 上 的 距离 。 色 相距 离 在 13” 以 内 的 对 比 ， 一 般 看 作 色相 
的 不 同 明度 与 纯度 的 对 比 ， 因 为 距离 15” 的 色相 属于 模糊 的 、 较 难 区 分 的 色相 ， 这 样 的 色相 对 比 称 
为 邻接 色相 对 比 ， 是 最 弱 的 色相 对 比 。 色 相距 离 在 15” 以 上 、45” 左 右 的 对 比 ， 称 为 邻近 色相 对 比 ， 
或 近似 色相 对 比 ， 是 软弱 的 色相 对 比 。 色 相距 离 在 130” 
左右 的 对 比 ， 一 般 称 为 对 比 色相 对 比 ， 是 色相 中 对 比 。 


色相 距离 在 180” 左 右 的 对 比 ， 称 互补 色相 对 比 ， 是 色 
相 强 对 比 。 色 相距 离 如 果 大 于 180”， 从 余下 的 弧度 来 | \ 
看 ， 必 然 小 于 180”， 所 以 距离 恰好 在 180” 的 对 比 ， 称 
最 强 色相 对 比 。 色 相对 比 的 强 弱 可 以 由 色相 环 上 的 距离 


来 表示 ， 如 图 10.11 所 示 。 





在 色相 对 比 中 邻接 色 、 类 似 色 为 色相 弱 对 比 ， 中 差 邻近 色 对 比 补 色 对 比 
色 为 色相 中 对 比 ， 对 比 色 为 色相 强 对 比 ， 互 补 色 为 色相 图 10.11 色相 对 比 
最 强 对 比 。 


加 


加 


邻接 色相 对 比 : 邻接 色相 差 很 小 ， 色 彩 对 比 非常 微弱 ， 因 此 配色 易于 单调 ， 必 须 借助 明度 、 
纯度 对 比 的 变化 来 弥补 色相 感 的 不 足 。 

类 似 色 相对 比 : 红 与 楼 、 橙 与 黄 、 黄 与 绿 、 绿 与 青 、 青 与 紫 、 紫 与 红 等 在 24 色相 环 上 间隔 
15”~60” 色 组 的 对 比 为 类 似 色 对 比 。 类 似 色相 对 比 要 比邻 接 色相 对 比 明显 些 ， 但 是 仍然 比 
较 接近 。 类 似 色 相 都 含有 共同 的 色素 ， 它 既 保持 了 邻接 色 的 单纯 、 统 一 、 柔 和 和 主 色调 明 
确 的 特点 ， 同 时 又 具有 含蓄 耐看 的 优点 ， 但 运用 类 似 色 配色 如 不 注意 明度 和 纯度 变化 ， 也 
容易 流 于 单调 。 为 了 改变 色相 对 比 不 足 的 弊病 ， 一 般 需 要 运用 小 面积 的 对 比 色 或 比较 鲜艳 
的 色 作 点 组 ， 以 增加 色彩 生气 。 

中 差 色相 对 比 : 黄 与 红 、 红 与 蓝 、 蓝 与 绿 等 在 24 色相 环 上 间隔 60”~120” 的 色相 为 中 差 色 
相对 比 。 它 介 于 类 似 色相 和 对 比 色 相 之 间 。 色 相差 比较 明确 ， 色 彩 对 比 效果 比较 明快 ， 是 
色彩 设计 中 常用 的 配色 。 

对 比 色相 对 比 : 色相 环 上 间隔 120”~160” 的 三 色 如 : 品 红 、 黄 、 青 ， 红 、 黄 、 绿 青 ， 橙 、 
绿 、 青 紫 ， 黄 橙 、 青 绿 、 紫 ， 黄 、 绿 青 、 红 紫 等 色相 形成 的 色彩 对 比 为 对 比 色 相对 比 。 色 
相 环 上 的 品 红 、 黄 、 青 称 为 三 原色 的 对 比 。 色 环 上 橙 、 绿 、 青 紫 是 由 第 一 次 色 混 合 而 得 的 
间 色 的 对 比 。 间 色 的 对 比较 三 原色 的 对 比 缓和 。 色 相 环 上 间隔 90” 左 右 的 4 色 如 : 红 、 黄 、 
青绿 、 青 紫 ， 橙 、 黄 绿 、 绿 青 、 紫 ， 黄 橙 、 绿 、 青 、 红 紫 等 色 组 也 属于 对 比 色相 对 比 。 对 
比 色 相对 比 的 色 感 要 比 类 似 色相 鲜明 强烈 ， 具 有 饱满 、 华 丽 、 欢 乐 、 活 跃 的 感情 特点 ， 容 
易 使 人 兴奋 、 激 动 。 

互补 色相 对 比 : 色相 环 上 距离 180” 左 右 的 色相 为 互补 色相 对 比 , 是 最 强 的 色相 对 比 。 如 红 、 
青绿 ， 黄 、 青 紫 ， 绿 、 红 紫 ， 青 、 构 等 色 组 。 互 补 色 相配 ， 能 使 色彩 对 比 达 到 最 大 的 鲜明 
程度 ， 并 强烈 地 刺激 感官 ， 从 而 引起 人 们 视觉 的 足够 重视 和 达到 生理 上 的 满足 。 互 补 色相 
对 比 的 特点 是 强烈 、 鲜 明 、 充 实 、 有 运动 感 ， 但 是 容易 产生 不 协调 、 杂 乱 、 过 分 、 刺 激 、 
动荡 不 安 、 粗 俗 生硬 等 缺点 。 要 想 把 互补 色相 对 比 组 织 得 倾向 鲜明 、 统 一 与 调和 ， 配 色 技 
术 的 难度 就 更 高 了 。 在 运用 同 种 色 、 邻 接 色 或 类 似 色 配色 时 ， 如 果 色 调 平 淡 乏 味 、 缺 乏 生 
气 ， 那 么 恰当 地 借用 补 色 对 比 的 力量 将 会 使 色彩 效果 得 到 改善 。 


网 页 设计 中 ， 在 使 用 色相 对 比 时 ， 应 该 先 确定 主 色 调 ， 然 后 明确 其 他 色彩 与 主 色调 是 什么 关系 
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| 这 两 个 色彩 之 间 的 对 比 效果 就 比较 弱 , 黄色 


a 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 
要 表现 内 容 和 情感 ， 增 强 构成 色调 的 计划 性 、 明 确 性 与 目的 性 。 
10.2.3 纯度 对 比 


纯度 对 比 是 由 纯度 差 引起 的 对 比 ， 是 指 较 鲜 艳 的 色 与 模糊 的 浊 色 的 对 比 。 一 般 来 说 ， 对 比 色彩 间 
纯度 差 的 大 小 ， 决 定 彩 度 对 比 的 强 弱 ， 对 比 
色彩 之 间 的 纯度 差 越 大 ， 对 比 就 越 强 ， 就 会 
显得 鲜明 。 如 红色 与 橙色 的 纯度 比较 接近 ， 


与 橙色 的 纯度 差 较 大 ， 两 个 色彩 之 间 的 对 比 
效果 比较 强烈 ， 如 图 10.12 所 示 。 
每 种 色彩 可 以 用 4 种 方法 降低 其 纯度 。 
回 ”加 白 : 纯色 混合 白色 ,可 以 降低 纯 图 10.12 纯度 对 比 
度 ， 提 高 明度 ， 同 时 色 性 偏 冷 。 曙 
红 加 白 呈 带 蓝 味 的 浅 红 ， 黄 加 白 变 冷 的 浅黄 ， 各 种 色 混合 白色 以 后 都 会 产生 色 性 偏 冷 。 
回 ”加 黑 : 纯色 混合 黑色 ， 即 降低 了 纯度 ， 又 降低 了 明度 。 各 种 颜色 加 黑 以 后 ， 会 失去 原 有 的 
光彩 ， 而 变 得 沉着 、 幽 暗 ， 同 时 大 多 数 色 性 转 暖 。 
加 ”加 灰 : 纯色 混入 灰色 以 后 ， 纯 度 逐 步 降低 ， 色 味 迅速 变 得 混浊 。 相 同 明 度 的 纯色 与 灰色 混 
合 ， 可 以 得 到 丰富 的 相同 明度 、 不 同 纯度 的 含 灰 色 。 含 灰色 有 具有 和 柔和、 软弱 的 特点 。 
加 互补 色 : 任何 纯色 都 可 以 用 相应 的 补 色 来 使 其 变 淡 。 纯 色 混 合 补 色 ， 实 际 上 相当 于 混合 
无 色 系 的 灰 ， 因 为 一 定 比例 的 互补 色 混 合 也 会 产生 灰 ， 如 黄 加 紫 可 以 得 到 不 同 的 灰 黄 。 如 
果 互 补 色相 混合 ， 再 用 白色 淡化 ， 可 以 得 到 各 种 微妙 性 格 的 含 灰色 调 。 
在 应 用 色彩 中 ,单纯 的 纯度 对 比 很 少 出 现 ， 其 主要 表现 为 包括 明度 、 色 相对 比 在 内 的 以 纯度 为 主 
的 对 比 ， 可 构成 极其 丰富 的 色调 ， 但 是 凡 以 纯度 对 比 为 主 构成 的 色调 ， 其 最 大 特点 就 是 含蓄 、 柔 和 、 
耐人寻味 。 凡 过 分 生硬 、 刺 激 ， 过 分 的 模糊 、 脏 、 灰 、 粉 的 配色 都 应 在 纯度 对 比方 面 查 找 原因 。 因 此 ， 





加 


| 在 网 页 设计 中 当 色 调 发 生 苍白 无 力 和 干枯 乏味 的 现象 时 ,除了 调整 色彩 间 明度 对 比 关系 以 外 ,使 用 纯 
| 度 对 比 也 是 增添 生气 的 重要 手段 。 


10.2.4 冷暖 对 比 


因 冷 暖 差 别 而 形成 的 色彩 对 比 称 为 冷暖 对 比 。 色 彩 的 冷暖 感觉 并 非 为 肌肤 的 温度 感觉 ， 而 是 人 们 
视觉 色彩 的 一 种 心理 反应 ， 它 与 人 们 的 生活 经 验 相 联系 ， 是 联想 的 结果 。 

一 般 来 说 ， 红 色 、 黄 色 、 森 色 往 往 使 人 联 想起 阳光 、 火 花 ， 从 而 与 温暖 的 感觉 联系 起 来 。 青 色 、 
蓝 色 会 使 人 联想 起 晴空 大 海 、 夜 晚 及 阴影 ， 从 而 与 清凉 的 感觉 联系 起 来 。 色彩 的 冷暖 感觉 也 与 生理 的 


| 刺激 有 关 , 红色 、 橙 色 的 刺激 能 加 快 血液 循环 ， 青色、 
| 蓝 色 的 刺激 能 降低 血液 循环 速度 ， 前 者 因 血 液 循环 加 


快 而 体温 上 升 ， 后 者 因 血 液 循环 减 慢 而 体温 下 降 ， 从 
而 使 人 有 了 冷暖 的 感觉 。 
色彩 的 冷暖 感 主要 由 色相 决定 ， 红 、 橙 、 黄 为 暖 
色 系 ; 青绿 、 青 、 蓝 为 冷色 系 ; 绿 、 紫 为 中 性 色 系 ， 
如 图 10.13 所 示 。 不 同色 相 的 冷暖 以 含有 红 橙 和 青 蓝 暖色 调 冷色 调 
的 比例 而 定 。 其 次 ， 在 同一 色相 中 ， 明 度 的 变化 也 会 图 10.13 冷暖 色调 对 比 


*364 . 


第 10 章 网 页 色 和 彩 设计 一 3 1 

引起 冷暖 倾向 的 变化 ， 凡 掺 和 白 而 提高 明度 者 色 性 趋向 冷 ， 凡 掺 和 黑 降低 明度 者 色 性 趋向 上 暖 。 色彩 的 
冷暖 性 质 不 是 绝对 的 ， 它 往往 与 色 性 的 倾向 有 关 ， 同 为 暖色 系 ， 偏 青 光 者 相对 倾向 于 冷 ， 偏 红 光 者 则 
相对 倾向 于 暖 。 同 为 冷色 系 ， 偏 青 光 者 相对 倾向 于 冷 ， 偏 红 光 者 相对 倾向 于 暖 ， 因 此 色彩 的 冷暖 感觉 | 
常常 由 偏离 基本 色 的 倾向 色 所 决定 。 | 

色彩 的 冷暖 对 比 在 色彩 艺术 中 具有 丰富 的 表现 力 ， 冷 暖色 可 以 用 一 些 相 对 应 的 术语 来 表示 。 

冷色 : 透明、 镇静、 阴影、 稀薄 、 空 气 感 、 遥 远 、 轻 的 、 潮 湿 。 

回暖 色 : 不 透明 、 刺 激 、 日 光 、 浓 密 、 土 质感 、 重 的 、 干 燥 。 | 

在 网 页 设计 中 , 适当 地 运用 色彩 的 冷暖 对 比 不 仅 可 以 增强 远近 距离 感 ， 而 且 可 以 加 强 色彩 的 艺术 | 
感染 力 。 色 彩 的 明暗 对 比 虽 然 能 强化 素描 层次 ， 但 是 易于 单调 乏味 ， 如 果 同 时 采用 冷暖 转换 、 冷 暖 调 
节 等 方法 ， 那 么 色彩 效果 就 会 显得 更 加 生动 活泼 。 

色彩 对 比 运用 得 是 否 得 当 ， 是 网 页 配色 成 功 与 否 的 关键 。 用 户 在 学 习 这 部 分 内 容 时 ， 可 以 借助 于 | 
互联 网 上 配色 比较 好 的 网 页 作品 和 一 些 平面 广告 作品 ， 从 视觉 的 角度 来 加 深 对 知识 的 理解 。 | 


10.3 基本 配色 实例 分 析 








在 实用 美术 中 ， 常 有 “ 远 看 色彩 近 看 花 ， 先 看 颜色 后 看 花 ， 七 分 颜色 三 分 花 ”的 说 法 。 这 也 就 说 
明 ， 在 任何 设计 中 ， 色 彩 对 视觉 的 刺激 起 到 第 一 信息 传达 的 作用 。 因 此 ， 对 色彩 的 基础 知识 的 良好 掌 
控 ， 在 网 页 设计 中 才能 做 到 游 思 有 余 。 


10.3.1 红 黄 蓝 三 原色 配色 


原色 也 叫 “ 三 原色 ”， 即 红 、 黄 、 蓝 3 种 基本 颜色 。 自 然 界 中 的 色彩 种 类 繁多 ， 变 化 丰富 ， 但 这 
3 种 颜色 却 是 最 基本 的 原色 ， 原 色 是 其 他 颜色 调配 不 出 来 的 。 除 白色 外 ， 把 三 原色 相互 混合 ， 可 以 调 | 
和 出 其 他 种 颜色 。 根 据 三 原色 的 特性 做 出 相应 的 色彩 搭配 ， 有 最 迅速 、 最 有 力 、 最 强烈 的 传达 视觉 信 | 
【示例 1】 黄色 网 页 示例 截图 如 图 10.14 所 示 。 
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图 10.14 黄色 页 面 效 果 
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a 提 页 统计 与 网 站 建设 从 入 门 到 将 通 
! v 
| 【分 析 】 
| R255 G255 BO H60 S100% B100% 
| 选取 了 主 色调 黄色 为 示例 , RGB 数值 中 RG 呈现 较 高 值 255 和 255 时 , HSB 数值 中 的 SB 也 呈现 
| 最 高 值 100%、100%, 页 面 呈现 较 高 纯度 亮度 : 较 纯 黄色 。 因 此 黄色 在 三 原色 中 也 是 亮度 最 高 的 颜色 。 
Sg 【点 评 】 
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Note | HSB 中 SB 呈现 的 数值 越 高 ， 饱 和 度 明度 越 高 ， 页 面色 彩 强烈 攀 丽 ， 由 于 黄色 是 亮度 最 高 的 颜 

| 这 一 特性 ， 也 给 人 视觉 产生 强烈 刺激 的 状态 ， 对 视觉 刺激 是 迅速 的 、 警 戒 、 醒 目的 效果 ， 但 不 易于 长 
| 时 间 观 看 。 
【示例 2】 红 色 网 页 示例 截图 如 图 10.15 所 示 。 








” MUSIC 
DIG MT OR DIS IT 


x 
De on vow 


10.15 ”红色 页 面 效果 





| 【分 析 】 
| 二 R227 G30 B40 H357 s87% Bg9% 
| 选取 了 主 色调 红色 为 示例 ,RGB 中 R 的 数值 是 227， 混 合 了 G30、B40， 因 此 红色 的 纯度 轻微 降 
| 低 ， 颜 色 稍 偏 深 红 。HSB 数值 中 S 显示 的 饱和 度 为 87%，B 为 89%， 因 此 颜色 还 是 较为 饱和 明亮 。 
| 【点 评 】 
| 主 色 R227 数值 较 高 时 ， 由 于 混合 了 G30、B40 少许 颜色 ， 饱 和 度 明度 稍微 降低 ， 视 觉 刺 激 减弱 ， 
| 红色 特性 显得 较 沉稳 。 但 由 于 红色 是 最 温暖 最 有 视觉 冲击 力 的 颜色 特性 ， 该 网 页 整体 看 来 仍然 厚重 而 
| 热烈 地 表达 了 主题 。 

【示例 3】 蓝 色 网 页 示例 截图 如 图 10.16 所 示 。 
| 【分 析 】 
| 才 R2 G83 B131 H203 so98% B51% 
| 选取 了 主 色调 蓝 色 为 示例 , RGB 数值 中 B 蓝 色 的 数值 是 131 与 R2、G83 相 混合 ， 蓝 色 的 纯度 降 
| 低 。 结 合 HSB 中 数值 也 色相 目前 显示 的 是 203”， 而 三 原色 的 纯 蓝 为 240” 来 看 ， 蓝 色 的 色相 偏离 
| 较 大 ， 加 上 B 为 51% 的 明度 ， 颜 色 偏 暗 ， 因 此 视觉 冲击 力 较 弱 。 页 面 沉稳 、 凝 重 。 
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图 10.16 蓝 色 页 面 效果 


【点 评 】 
当 蓝 色色 相 偏离 于 三 原色 的 纯 蓝 时 ， 视 觉 冲 击 力 削 弱 。 页 面 呈 沉稳 、 平 静 的 感受 。 蓝 色 在 三 原色 | 
里 是 视觉 传递 速度 最 慢 的 颜色 特性 ， 适 合用 于 表达 成 熟 、 稳 重 、 安 静 的 网 页 设计 主题 。 在 网 页 设计 里 | 
蓝 色 也 是 使 用 得 较 频繁 的 颜色 。 | 


10.3.2 间 色 、 复 色 、 补 色 


1， 间 色 

间 色 又 叫 “ 二 次 色 ”。 它 是 由 三 原色 调配 出 来 的 颜色 ,是 由 两 种 原色 调配 出 来 的 。 红 与 黄 调 配 出 
橙色 ， 黄 与 蓝调 配 出 绿色 ， 红 与 蓝调 配 出 紫色 ， 橙 、 绿 、 紫 3 种 颜色 又 叫 “ 三 间 色 ”。 在 调配 时 ， 由 
于 原色 在 分 量 多 少 上 有 所 不 同 ， 所 以 能 产生 丰富 的 间 色 变化 。 

【示例 1】 间 色 网 页 示例 截图 如 图 10.17 所 示 。 
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图 10.17 间 色 页 面 效 果 
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| 【分 析 】 
| R189 G208 B18 H66 S91% B82% 
| 人 Rls G8 B17 H258 S49% B67% 
全 内 | 二 R250 G27 Blo9 H338 S89% Bo9s% 
| 二 R255 Gl45 B34 H30 S87% B100% 

Note | 以 上 网 页 示例 截图 4 种 间 色 搭 配 一 起 非常 明快 、 鲜 亮 。 以 上 4 组 颜色 RGB 数值 的 共同 点 是 以 两 
| 色 混 合 为 主 ， 都 是 3 位 数值 ， 另 外 一 色 分 量 较 少 ， 为 两 位 数值 ， 因 此 饱和 度 较 高 ， 色 相 倾 向 明显 。 
| HSB 数值 的 共同 点 是 ， 除 了 紫色 ， 其 他 三 色 的 S 饱和 度 相 当 ， 属 较 高 数值 ， 因 此 视觉 刺激 也 强 。 

从 RGB 数值 显示 上 看 ， 绿 色 含 量 较 高 达到 208， 混 合 了 R189 的 黄色 光 ， 因 此 颜色 偏 黄 绿色 ， 由 

于 添加 了 B18， 饱和 度 相 对 降低 。 玫 瑰 色 中 R 的 含量 最 高 ， 与 B109 混合 为 主要 组 成 色 ， 添 加 了 少量 

的 G27 黄 ， 纯 度 偏 高 。 检 色 中 R 的 含量 很 高 为 255， 混 合 了 G145 黄 为 主要 组 成 色 ， 添 加 了 第 三 色 

B34， 饱 和 度 稍 降低 。 紫 色 是 由 蓝 色 和 红色 调配 而 成 ，B 为 170，R 为 148， 混 色 分 量 相当 也 就 成 为 了 

组 合 紫色 这 一 间 色 的 主要 成 分 , 但 是 由 于 添加 了 G87, 也 是 4 组 颜色 中 的 间 色 混合 第 三 色 数 值 最 高 的 ， 

HSB 中 S 数值 相对 其 他 三 色 ， 降 低 很 多 ， 因 此 颜色 相对 于 其 他 3 种 较 沉 稳 、 组 和。 

【点 评 】 

间 色 是 由 三 原色 中 的 两 原色 调配 而 成 的 , 因此 在 视觉 刺激 的 强度 相对 三 原色 来 说 缓和 不 少 。 属于 
| 较 易 搭配 之 色 。 间 色 尽 管 是 二 次 色 ， 但 仍 有 很 强 的 视觉 冲击 力 ， 容 易 带 来 轻松 、 明 快 、 愉 悦 的 气氛 。 

2， 复 色 

也 叫 “复合 色 ”。 复 色 是 由 原色 与 间 色 相 调 或 由 间 色 与 间 色 相 调 而 成 的 “三 次 色 ”， 复 色 是 纯度 
最 低 的 ， 含 灰色 成 分 。 复 色 包 括 了 除 原色 和 间 色 以 外 的 所 有 颜色 。 

【示例 2】 复 色 网 页 示例 截图 如 图 10.18 所 示 。 
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图 10.18 复 色 页 面 效果 





(分析 ] 
| 二 R35 G124 B59 H66 S53% B49% 
| 二 Rlls G7 B6l HII S48% B46% 


-608° 





第 10 章 网 页 色彩 设计 





Do 
| 
R255 G247 B186 | 
二 R255 Gll0 B56 | 
以 上 4 种 颜色 中 深 绿色 和 赤石 色 为 复 色 , 之 所 以 还 选择 其 他 两 种 颜色 ,为 的 是 更 好 地 配合 说 明 复 | 
色 的 特性 ， 如 果 没 有 另外 两 种 非 复 色 搭 配 ， 页 面 配色 就 可 能 出 现 肪 脏 等 不 舒服 的 感觉 。 | 
深 绿 和 赭石 这 两 种 复 色 的 数值 都 是 一 个 分 量 最 多 的 3 位 数 ， 另 外 两 者 成 分 相当 ， 都 为 两 位 数组 合 | 
而 得 。RGB 之 间 的 数值 差距 较 接近 、 不 明显 ， 色 阶 较 趋 于 直线 平稳 ， 呈 灰 阶 。HSB 中 SB 显示 的 数 
值 也 非常 接近 ， 成 为 符合 复 色 特性 的 必须 条 件 。 
【点 评 】 
复 色 是 由 两 种 间 色 或 原色 与 间 色 混合 而 成 ， 因 此 色相 倾向 较 微妙 、 不 明显 ， 视 觉 刺激 度 缓 和， 如 
果 搭 配 不 当 ， 页 面 便 呈 现 易 脏 或 易 灰 蒙蒙 的 效果 ， 沉 闽 、 压 抑 之 感 ， 属 于 不 好 搭配 之 色 。 但 有 时 复 色 
加 深 色 拱 配 能 很 好 地 表达 神秘 感 、 纵 深 感 和 空间 感 ， 明度 高 的 多 复 色 多 用 来 表示 宁静 柔和 、 细 腻 的 情 
感 ， 易 于 长 时 间 的 浏览 。 
3. 补 色 
补 色 是 广义 上 的 对 比 色 。 在 色 环 上 划 直 径 ， 正 好 相对 《〈 即 距离 最 远 ) 的 两 种 色彩 互 为 补 色 。 如 红 
色 是 绿色 的 补 色 ; 橙色 是 蓝 色 的 补 色 ;黄色 是 紫色 的 补 色 。 补 色 的 运用 可 以 造成 最 强烈 的 对 比 。 
【示例 3】 补 色 网 页 示例 截图 如 图 10.19 所 示 。 











图 10.19 补 色 页 面 效果 


【分 析 】 

[ R95 G124 B59 H66 S51% B48% 

| BI G72 B61l H354 S85% B67% 

选用 了 一 组 红 绿 对 比 色 ， 极 赋 视 觉 冲 击 力 ， 所 表现 出 的 性 格 异常 鲜明 。 我 们 看 到 RGB 中 绿色 的 
数值 显示 情况 符合 复 色 的 条 件 ， 因 此 注定 了 该 颜色 明度 稍 暗 、 纯 度 较 低 的 特性 ， 而 红色 R 数值 118 
构成 了 该 色 的 主要 成 分 ， 其 他 G72、B61 数值 接近 ， 纯 度 和 亮度 相对 绿色 较 高 ， 因 此 2 色 在 构成 色彩 
空间 差距 上 拉 大 。HSB 中 2 色 的 S 数值 也 显示 出 ， 它 们 的 饱和 度 相 差 较 大 。 
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| 【点 评 】 
| 补 色 最 能 传达 强烈 、 个 性 的 情感 。 纯 度 稍 低 的 绿色 为 背景 的 大 面积 使 用 ， 对 比 并 突出 了 前 景 纯度 
| 明度 较 高 的 面积 较 小 红色 的 图 形 ， 形 成 了 视觉 中 心 重点 突出 ， 达 到 主 次 分 明 的 主题 效果 。 
天 六 | 红 绿 、 棒 蓝 、 黄 紫 这 3 组 补 色 中 ， 前 两 种 使 用 得 最 频繁 。 这 三 组 补 色 措 配 出 的 最 终 效 果 和 目的 ， 
可 以 用 两 个 字 来 概括 一 一 强烈。 


| 10.3.3 ”邻近 色 、 同 类 色 


1， 邻 近 色 
| 邻近 色 在 色 环 上 表示 任 一 颜色 同 其 毗邻 之 色 。 邻 近 色 也 是 类 似 色 关系 ， 只 是 范围 缩小 了 一 点 。 例 
| 如 红色 和 黄色 ， 绿 色 和 蓝 色 ， 互 为 邻近 色 。 
| 【示例 1】 邻近 色 网 页 示例 截图 如 图 10.20 所 示 。 








10.20 ”邻近 色 页 面 效果 


二 R204 Go B!1 Ho sil00% B80% 
HI18 S100% B100% 
二 R255 G150 Bo H35 sl100% B100% 
R252 G178 BO H43 S100% B100% 
R253 G238 B138 H42 S46% B100% 
图 10.20 选用 了 红色 、 黄 色 为 邻近 色 示 例 ， 主 要 在 色相 上 做 区 别 丰富 了 页 面色 彩 上 的 变化 。 从 
| RGB 数值 上 看 ， 以 上 5 色 尺 的 数值 都 很 高 ， 仅 是 微妙 的 不 同 。 其 中 浅黄 色 的 B 为 138， 因 此 在 HSB 
| 数值 中 纯度 S 显示 最 低 ， 为 46%; 5 色 RGB 中 G 的 数值 都 不 同 ， 色 相 、 明 度 也 产生 相应 的 不 同 。 从 
| 数值 上 分 析 整 体 看 来 ，5 色 都 有 在 同一 频率 的 变化 。 
| 【点 评 】 
} 由 于 是 相 邻 色 系 ， 视 觉 反 差 不 大 ， 统 一 、 调 和 ， 形 成 协调 的 视觉 韵律 美 ， 相 较 显 得 安定 、 稳 重 的 
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同时 不 失 活力 ， 
2. 同类 色 


比邻 近 色 更 加 接近 的 颜色 ， 它 主要 指 在 同一 色相 中 不 同 的 颜色 变化 。 例 如 ， 红 颜色 中 有 紫红 、 深 | 
红 、 玫 瑰 红 、 大 红 、 朱 红 、 橘 红 等 种 类 ， 黄 颜色 中 又 有 深 黄 、 土 黄 、 中 黄 、 橘 黄 、 淡 黄 、 柠 树 黄 等 区 | 


是 一 种 恰到好处 的 配色 类 型 。 
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别 。 它 起 到 色彩 调和 统一 ， 又 有 微妙 变化 的 作用 。 
【示例 2】 同 类 色 网 页 示例 截图 如 图 10.21 所 示 。 







【分 析 】 

大 R23l 
二 R23 
R24 


R251 


选用 红色 系 4 种 同类 色 示 例 ， 主 要 在 明度 上 做 区 别 变化 。 由 于 是 红色 系 ，4 色 RGB 数值 中 的 R， 
数值 都 很 高 且 相 当 。 从 HSB 数值 看 出 ， 明 度 越 高 的 颜色 饱和 度 越 低 。 从 这 4 种 同类 色相 来 看 ， 明 度 


上 = 


图 10.21 


G76 B33 HI13 S86% 
G89 B105 H352 S62% 
G174 B165 H351 S29% 
G225 B229 H349 Sl1% 


在 强 中 弱 的 节奏 中 缓和 地 进行 变化 。 


【点 评 】 


第 一 眼看 上 去 给 和 人 温柔、 雅致 、 安 宁 的 心理 感受 ， 
类 色 系 配 色 ， 是 十 分 谨慎 稳妥 的 做 法 ,但 是 有 时 会 有 单调 感 。 添 加 少许 相 邻 或 对 比 色 系 ， 可 以 体现 出 


页 面 的 活跃 感 和 强度 。 
10.3.4 暖色 、 冷 色 


1. 上 暖色 


暖色 指 的 是 红 、 梅 、 黄 这 类 颜色 。 上 暖色 系 的 饱和 度 越 高 ， 其 温暖 特性 越 明显 。 可 以 刺激 人 的 兴奋 
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同类 色 页 面 效果 
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便 可 知 该 组 同类 色 系 非常 调和 统一 。 只 运用 同 








砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 
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性， 使 体温 有 所 升 高 。 
| 【示例 1】 暖色 网 页 示例 截图 如 图 10.22 所 示 。 
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图 10.22 暖色 页 面 效果 


【分 析 】 
坊 R204 Go Bo Ho sloo% B100% 
二 R255 G150 Bo H35 sl00% B100% 
| R255 G255 BO H60 S100% B100% 
| 由 于 是 暖色 系 ， 以 上 面 3 种 颜色 RGB 数值 中 R 的 含量 为 主导 ，B 都 为 0， 暧 度 强 度 倾向 在 G 的 
| 添加 黄色 成 分 变化 中 可 以 看 到 ， 较 规律 的 数值 变化 、 较 有 视觉 节奏 感 。HSB 中 纯度 S 和 明度 B 都 达 
到 最 高 值 ， 是 鲜艳 夺目 的 搭配 色 组 合 。 

【点 评 】 

高 明度 高 纯度 的 色彩 搭配 ， 把 页 面 表达 得 鲜艳 炫目 ， 有 非常 强烈 刺激 的 视觉 表现 力 ， 充 分 体现 了 
暖色 系 的 饱和 度 越 高 ， 其 温暖 特性 越 明 显 的 性 格 。 


2. 冷色 
| 冷色 指 的 是 绿 、 青 、 蓝 、 紫 等 颜色 ， 冷 色 系 亮度 越 高 ， 其 特性 越 明 显 ， 能 够 使 的 心情 平静 、 清 
| 来 、 刁 雅 。 
| 【示例 2】 冷色 网 页 示例 截图 如 图 10.23 所 示 。 

【分 析 】 


二 R17 G13 B132 Hl94 S64% B52% 
二 R90 G173 B197 Hl94 S54% B77% 
二 R15 G204 B219 HI193 S30% B86% 
二 R157 G208 B4 H75 S98% B82% 

R175 G232 B4 H75 S98% B91l% 
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图 10.23 冷色 页 面 效果 


该 网 页 示例 主要 选用 了 邻近 色 系 蓝 色 绿色 和 同类 色 的 明度 变化 。 其 中 3 种 蓝 色 系 的 RGB 数值 从 
两 位 数 到 3 位 数 ， 随 着 明度 递增 的 同时 ， 由 低 到 高 在 有 规律 、 有 节奏 地 变化 。HSB 的 数值 SB 也 相对 
随 着 同比 变化 ， 纯 度 S 的 含量 都 不 大 ， 因 此 这 几 组 色彩 相对 含 蔓 柔和 。 绿 色 系 RGB 数值 G 的 色相 明 
显 ,相应 添加 了 高 亮度 的 黄色 R, 使 色彩 较 鲜艳 明快 。HSB 数值 SB 也 显示 出 其 高 纯度 高 亮度 的 特性 。 

【点 评 】 

冷色 系 的 亮度 越 高 ， 其 特性 越 明显 。 单 纯 冷色 系 搭配 视觉 感 比 暖色 系 合适 ， 不 易 造成 视觉 疲劳 。 
蓝 色 、 绿 色 是 冷色 系 的 主要 系 ， 是 设计 中 较 常 用 的 颜色 ， 也 是 大 自然 之 色 ， 带 来 一 股 清新 、 祥 和 安宁 
的 空气 。 


10.3.5 小结 


从 本 节 示 例 可 以 看 出 三 原色 视觉 冲击 力 最 强 ， 也 是 最 刺 目 的 ， 容 易 制造 冲突 、 烦 燥 、 不 舒适 的 心 
情 ， 所 以 是 较 难 掌握 的 配色 ， 大 面积 大 范围 使 用 要 慎重 。 

间 色 是 由 三 原色 中 的 两 色调 配 两 次 , 间 于 原色 和 复 色 之 间 ， 属 于 中 性 色 ,视觉 冲击 力 次 之 , 颜色 
的 刺激 缓和 不 少 , 给 人 舒适 、 愉悦 的 心情 ,是 较 容易 掌握 的 配色 ,也 是 在 设计 中 使 用 得 比较 多 的 颜色 。 
复 色 是 由 两 种 间 色 或 原色 与 间 色 相 混合 而 产生 的 颜色 ， 呈 灰色 阶 , 视觉 冲击 力 更 弱 ， 柔 和 但 是 使 人 沉 
问 压抑 。 复 色调 配 好 了 ,能 体现 出 高 层次 、 高 素养 的 成 熟 特性 魅力 ， 也 称 为 高 级 灰 ， 是 很 耐看 的 颜色 。 
因此 ， 颜 色相 互 混合 得 越 多 ， 饱 和 度 越 低 ， 视 觉 冲 击 力 越 弱 。 

色彩 运用 到 一 定 程度 后 ， 应 该 逐渐 认识 到 在 一 个 环境 、 区 域 范围 里 ,色彩 的 属性 、 性 能 特性 是 相 | 
对 的 。 例 如 ， 黄 色 在 蓝 色 、 绿 色 这 两 个 区 域 环境 下 ， 黄 色 可 以 说 这 个 时 候 是 呈 暖 色 ， 而 出 现在 桶 红 、 | 
朱红 、 深 红 这 几 个 区 域 环境 下 ， 黄 色 可 以 说 在 这 个 时 候 是 呈 冷 色 。 同 样 地 ， 蓝 色相 对 绿色 是 冷色 , 紫 | 
色相 对 蓝 色 是 暖色 等 。 可 根据 网 页 设计 主题 的 目的 要 求 、 环 境 协 调度 的 需要 等 做 相应 的 搭配 调整 。 

RGB 三 者 的 数值 越 接近 ， 色 阶 较 趋 于 直线 平稳 ， 呈 灰 阶 ， 网 页 对 视觉 的 刺激 性 越 缓慢 、 和 柔和; 
RGB 三 者 的 数值 相互 间 差 距 越 大 ， 色 阶 曲 线 波动 就 大 ， 网 页 对 视觉 的 刺激 性 越 迅 速 、 强 烈 。HSB 数 
值 中 SB 相应 数值 越 高 ， 视 觉 刺 激 度 越 强烈 。 抓 住 以 上 这 些 规律 及 色彩 特性 ， 在 以 后 的 网 页 设计 配色 
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中 ， 根 据 不 同 的 需要 配置 不 同 的 颜色 ， 来 达到 某 些 不 同 的 目的 和 效果 。 

通过 RGB 数值 和 HSB 数值 的 计算 ， 有 助 于 更 科学 理性 的 分 析 判 断 ， 更 准确 地 研究 分 析 网 页 设计 
配色 的 协调 性 、 合 理性 ， 掌 握 其 规律 性 。 有 经 验 的 设计 师 通常 仅仅 凭 目测、 直觉， 就 能 随心 所 欲 地 掌 
控 色 彩 的 配置 。 


10.4 灰色 页 面 配 色 


灰色 介 于 黑色 和 白色 之 间 ， 中 性 色 、 中 等 明度 、 无 色彩 、 极 低 色彩 的 颜色 。 灰 色 能 够 吸收 其 他 色 
彩 的 活力 ， 削 弱 色 彩 的 对 立 面 ， 能 够 制造 出 融合 的 作用 。 
灰色 也 是 一 种 中 立 色 , 具有 中 良 、 平凡 、 温 和 、 谦 让 、 中 立 和 高 雅 的 心理 感受 ,也 被 称 为 高 级 灰 ， 


| 是 经 久 不 衰 、 最 耐看 的 颜色 。 


任何 色彩 加 入 灰色 都 能 显得 含蓄 而 柔和 。 但 是 灰色 在 给 人 高 品味 、 含 蕾 、 精 致 、 ee 
同时 ， 也 容易 给 人 英 废 、 苑 凉 、 消 极 、 泪 丧 、 沉 闷 的 感受 ， 如 果 搭配 不 好 ， 页 面容 易 显得 灰暗 、 

从 色彩 学 上 分 析 ， 灰 色调 又 泛 指 所 有 含 灰色 度 的 复合 色 ， 而 复合 Eee 
色彩 可 以 有 红 灰 、 黄 灰 、 蓝 灰 等 上 万 种 彩色 灰 ， 这 都 是 灰色 调 ， 而 并 不 单 指 纯正 的 灰色 。 
10.4.1 浅 灰色 


【示例 】 明 度 浅 灰色 示例 截图 如 图 10.24 所 示 。 


10.24 ”明度 浅 灰 色 页 面 效 果 


【分 析 】 

加 ” 主 色调 OO R251 G251 B251 HO S0% B98% 

回 “” 辅 色调 R226 G226 B226 HO S0% B89% (人 ) 白色 
点 晴 色 志 R217 G9 Bo H2 sloo% B85% Oe 
背景 色 () 白色 
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从 页 面 所 呈现 的 明度 色调 来 看 ， 整 个 页 面 偏 浅 灰 色调 ,柔美 高 雅 的 灰 调 子 。 主 色调 及 背景 色 是 接 
近 于 明度 白色 且 非 常 浅 的 灰 调 ， 辅 色调 的 灰 调 子 明度 上 较 主 色调 稍 深 些 ， 另 一 辅 色调 为 白色 。 

RGB 模式 显示 点 睛 色 红 色 R217 及 G9 来 看 不 是 正 红 色 ， 在 如 此 灰 调子 的 页 面 来 看 ， 如 果 不 参 考 
RGB 模式 肉眼 几乎 看 不 出 来 。 如 果 没 有 点 睛 色 的 加 入 ， 整 个 页 面 呈 毫 无 生气 的 灰色 系 ， 略 有 些 脏 的 
感觉 平淡 且 乏 味 ， 没 能 使 大 家 对 它 产生 过 多 的 印象 。 红 色 的 特性 把 以 上 的 这 些 平淡 的 感受 打破 了 ， Xote 





让 人 愿意 细 品 灰色 所 带 来 的 悠长 韵味 。 
HSB 模式 的 B 也 能 看 出 浅 灰色 在 明度 上 较 高 ， 部 分 渐变 的 深 灰 色 在 页 面 上 所 占用 的 面积 也 不 少 ，| 
另 一 点 睛 色 黑 色 的 作用 就 是 使 明度 色 阶 跨度 加 深 、 明 确 ， 整 个 页 面 呈现 灰 蒙 蒙 的 感觉 得 以 减弱 。 
【点 评 】 
从 整体 上 看 ， 该 页 面 看 起 来 只 有 两 种 色彩 措 配 ， 即 非 色彩 系 黑白 灰 和 色彩 系 红色 ， 页 面 显得 非常 
简洁 而 含蓄 。 点 睛 色 的 加 入 减少 了 非 色调 浅 灰 色 有 可 能 产生 的 单调 感觉 。 


10.4.2 同类 灰 
【示例 】 同 类 灰色 页 面 〈 灰 色 + 橙色 ) 示例 截图 如 图 10.25 所 示 。 





图 10.25 ”同类 灰色 页 面 效果 


【分 析 】 

主 色调 久 壤 R1l94 G194 B194 HO S0% B76% 

回 ” 辅 色调 全 R1l6 G170 B170 Hi80 Sl1% B67% 

回 点 睛 色 纺 R255 G128 B0 H30 S100% B100% () 白色 

回 背景 色 久 R194 G194 B194 HO S0% B76% 

该 页 面 主要 以 大 面积 的 灰色 系列 为 主 ， 主 色调 为 背景 色 非常 明确 。 部 分 灰色 只 在 明度 上 加 深 了 ， 
增强 灰色 的 空间 感 。 

从 RGB 所 呈现 的 均衡 数值 及 HSB 模式 的 HS 都 为 0 来 看 ， 主 色调 的 浅 灰色 属于 非常 纯净 的 非 色 
彩 ， 没 有 掺 杂 其 他 色 系 进去 。 而 辅 色调 的 两 个 模式 上 就 有 些 差异 ，HSB 模式 的 互 显示 180” 色 相 上 
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| 这 和 


| 偏 青 蓝 色 ， 有 及 其 微弱 的 饱和 度 ， 明 度 也 较 低 。 
| 点 睛 色 的 SB 显示 为 正 桥 红 色 且 饱和 度 和 明度 都 为 10096， 应 该 是 及 其 耀眼 的 颜色 ， 然 而 在 大 面 


| 积 背 景 主 色 调 下 ， 此 种 耀眼 的 颜色 得 到 缓解 ， 这 正 是 与 灰色 配色 后 显示 出 灰色 最 强烈 的 特性 : 削弱 组 


| 和 刺激 怒 眼 的 颜色 。 


点 睛 色 橙 色 和 白色 点 绥 下 打破 了 平面 平淡 的 配色 格局 ， 眼 前 顿时 一 亮 的 感觉 。 





ed 【点 评 】 
| 灰色 调 非 色 彩 所 构成 的 页 面 颇具 有 独特 的 魅力 ， 整 个 页 面 呈 现 出 平稳 缓和 的 气质 。 两 个 点 睛 色 橙 


| 色 和 和 白色 起 到 调动 配色 页 面 的 作用 。 
| 10.4.3 同类 色 + 多 彩色 





【示例 】 灰 色 措 配 应 用 〈 同 类 灰色 + 多 种 颜色 ) 网 页 示例 截图 如 图 10.26 所 示 。 





10.26 ”同类 色 + 多 彩色 页 面 效果 
| 【分 析 】 
主 色 调 才 R93 G9 B93 Ho S0% B36% 
辅 色调 时 R70 G70 B70 HO S0% B27% 
回 ”点睛 色 H50 S80% B100% 出 Ho90 Ss64% B77% 

H357 S24% B99% H196 S39% B92% ( ) 白色 
回 背景 色 各 号 
| 这 是 一 个 灰色 阶 变化 较 多 的 页 面 ,形成 较 有 节奏 块 面 分 明 的 韵律 美感 。 这 一 变化 改善 了 灰色 容易 
| 形成 的 呆板 单调 特性 。 
| 从 HSB 模式 数值 来 看 ， 主 色调 、 辅 色调 都 是 非 色彩 的 正 灰 色 ， 没 有 掺 杂 其 他 色彩 进去 。 点 睛 色 
黄色 、 绿 色 互 数值 上 显示 有 些 色 相 偏 移 都 略 向 暖色 色 环 靠 拢 ， 这 两 种 颜色 的 特性 属于 较 显 眼 的 颜色 
另外 ,两 点 睛 色 粉 红 和 粉 蓝 色 在 色相 上 已 经 较 接近 于 正 色 系 ， 明 度 较 高 饱和 度 降 低 。 这 4 种 颜色 尽管 
| 所 使 用 的 面积 非常 少 , 但 结合 了 面积 上 相对 使 用 较 多 的 非 色 彩 白色 , 让 整个 页 面 配色 雅致 的 同时 不 乏 
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生动 活跃 。 
【点 评 】 
不 同 灰色 背景 的 变化 , 前 景 使 用 面积 较 少 的 纯净 色 点 级 , 这 几 种 颜色 还 同样 出 现在 右上 角 产 生平 | 

衡 色 彩 的 呼应 作用 ， 整 个 页 面 产生 雅致 和 谐 的 视觉 美感 。 | 


10.4.4 灰色 + 对 比 色 
【示例 】 灰 色 与 对 比 色 措 配 网 页 示例 截图 如 图 10.27 所 示 。 


入 和 mm 
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10.27 灰色 + 对 比 色 页 面 效果 


【分 析 】 

主 色调 SS R117 G110 B102 H32 S13% B46% 

加 ” 辅 色调 [ R142 G142 B142 HO SO0% B56% 

回 点睛 色 S R166 G115 B36 H36 S78% B65% 

【 R43 G199 B147 H206 S71% B56% 
R242 G242 B194 H60 S20% B95% ( ) 白色 

回 ”背景 色 者 R51 G51 B20 HO S0% B20% 

从 RGB 和 HSB 模式 上 可 看 出 主 色 调 不 是 纯正 的 非 色 系 ， 里 面 挫 杂 了 其 他 色彩 ， 肉 眼 识别 及 五 
色相 为 32 范围 上 都 能 看 出 含有 微弱 的 黄色 调 在 里 面 ， S13%、B46% 分 别 显示 该 种 颜色 含 浓重 的 灰色 ， 
有 少量 的 黄色 加 入 结合 整个 页 面 的 配色 是 比较 调和 的 搭配 。 辅 色调 则 是 运用 了 比较 正 的 浅 灰色 。 

点 睛 色 主 要 是 由 一 组 榴 色 、 蓝 色 对 比 色 构 成 ， 从 双方 的 瑟 色 相 上 也 能 看 出 来 。RGB 模式 上 看 到 
这 两 种 颜色 都 或 多 或 少 地 掺 杂 了 其 他 的 颜色 在 里 面 ， 所 以 明度 纯度 上 呈 灰 色 阶 倾向 。 另 一 点 睛 色 浅 黄 
色相 上 呈现 正 黄色 , 但 由 于 明度 非常 高 因此 色彩 呈 不 饱和 状态 ， 尽 管 如 此 ， 在 主 色调 灰色 的 背景 下 还 
是 比较 突出 的 。 

【点 评 】 

该 页 面 依旧 以 灰色 为 主导 位 置 , 虽然 主 色调 灰色 少量 掺 杂 了 黄色 , 与 页 面 其 他 黄色 色彩 元 素 较 统 
一 调和 。 点 睛 色 主 要 是 以 两 对 比 色 做 主导 ， 相 对 其 他 颜色 饱和 度 较 高 且 面 积 使 用 得 不 少 ， 较 响亮 和 突 
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一 人 网 和 和 计 与 网 站 填 设 从 入 门 到 精通 
| 出 产品 目的 。 在 主 色调 灰 黄 色 特 性 掌控 下 却 也 达到 醒目 又 和 谐 的 目的 。 
| 
| 10.4.5 灰色 + 青 蓝 色 


【示例 】 灰 色 搭配 青 蓝 色 应 用 网 页 示例 截图 如 图 10.28 所 示 。 








10.28 ”灰色 + 青 蓝 色 页 面 效果 


【分 析 】 

主 色 调 才 R63 G63 B69 Hi80 s9% B27% 

回 ” 辅 色调 人 ) 白色 

回 ”点睛 色 R197 G247 B247 H180 S20% B97% 

背景 色 者 黑色 

直观 看 去 能 够 识别 到 深 灰色 主 色调 有 青 蓝 色 倾向 ， 从 HSB 模式 上 能 够 看 到 色相 为 180”， 该 深 
灰色 饱和 度 和 明度 都 比较 低 。 点 睛 色 是 浅 青 蓝 色 ，HSB 模式 H 色相 所 呈现 的 色相 与 主 色调 的 数值 一 
致 ， 属 高 明度 低 饱和 度 色 系 。 

主 色调 是 明度 较 低 的 深 隶 色 , 是 必 于 较 沉 间 的 颜色 ; 而 点 晴 色 是 浅 青 蓝 色 ， 在 深 灰 色 的 背景 下 略 
呈现 有 些 暗淡 ， 并 没有 改善 和 带 来 明快 的 感觉 ， 辅助 色 是 白色 大 面积 的 介入 而 因此 使 得 整个 页 面 得 到 
一 定 的 透亮 缓解 ， 这 是 该 页 面 至 关 重要 的 一 色 。 





【点 评 】 
该 页 面 用 色 不 多 ， 深 灰 、 浅 青 蓝 、 白 ， 但 合理 地 运用 这 3 种 颜色 的 配色 角色 ， 能 使 页 面 焕发 与 众 
不 同 的 气质 魅力 。 


10.4.6 ”灰色 + 棕 黄 色 
【示例 】 灰 色 拱 配 棕 黄色 应 用 网 页 示例 截图 如 图 10.29 所 示 。 
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图 10.29 灰色 + 棕 黄色 页 面 效果 


【分 析 】 

加 主 色 调 埠 R47 G4 B47 HO so Bil8% 

rR;; B35 B35 HW S0% B14% 

回 辅 色调 瞩 R110 G104 B45 H54 S59% B43% 

名 点 晴 色 二 R52 G138 B52 HI120 S62% B54% 白色 

回 背景 色 力 中 | 

主 色调 是 由 两 种 明度 较 接近 的 灰色 构成 从 RGB 和 HSB 模式 上 能 看 到 这 两 种 灰色 属于 纯正 的 非 | 
色彩 ， 没 有 其 他 的 颜色 挫 杂 进去 。 | 

辅助 色 为 复 色 , 我 们 知道 复 色 是 由 两 种 间 色 或 者 原色 和 间 色 混合 产生 ,通常 所 混合 产生 的 颜色 色 | 
相 不 明显 ， 当 某 种 颜色 所 占 的 比重 大 时 ， 该 颜色 的 色相 才 相 较 突出 。 从 五 色相 上 看 颜色 稍 偏 黄色 
由 于 混合 其 他 颜色 且 明 度 较 低 ,因此 呈 棕 黄色 。 复 色 棕 黄色 在 背景 深 灰 的 衬托 下 低调 不 张扬 ， 能 很 好 
地 与 之 融 为 一 体 。 

点 睛 色 卫 显示 120*。 是 正 绿色 。 该 绿色 选择 了 明度 适中 纯度 不 高 的 配色 ， 既 表达 了 主题 ， 又 能 与 
整个 页 面 灰 调 子 很 好 地 调和 在 一 起 。 另 一 点 睛 色白 色 让 所 有 颜色 的 特性 都 得 以 很 好 地 发 挥 ， 并 起 到 拉 
开 色 阶 层次 的 作用 。 

【点 评 】 

深 灰 色 具 有 谦虚 、 平 凡 、 沉 默 、 中 庸 、 寂 寞 、 忧 邦 、 消 极 的 心理 感受 。 主 色调 主要 集中 在 背景 的 
运用 和 变化 上 , 增强 页 面 的 空间 感 ,视觉 元 素 颇 有 时 尚 现代 的 气息 , 与 前 景 的 色彩 明度 纯度 稍 有 变化 ， 
又 在 视觉 上 达到 风格 统一 。 


10.4.7 无 彩色 


【示例 】 灰 色 配 色 以 无 彩色 搭配 为 主 的 应 用 网 页 示例 截图 如 图 10.30 所 示 。 
【分 析 】 

主 色调 才 R77 G27 B27 HO S0% B11% 

回 “” 辅 色调 R175 G175 B175 HO S0% B65% 
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图 10.30 无 彩色 页 面 效果 

回 ”点睛 色 ( ) 白色 

回 背景 色 三 8 

整个 页 面 效果 如 同 古老 的 黑白 照 。 初 看 该 页 面容 易 把 背景 的 深 灰 色 误 认为 是 黑色 ， 再 仔细 观看 就 
感觉 到 了 此 种 深 灰 色 不 凡 的 作用 ， 假 如 背景 色 使 用 了 黑色 ， 页面 的 主体 人 物 和 空间 感 的 相互 作用 就 变 
得 僵硬 且 呆 板 。 

从 RGB 和 HSB 模式 上 可 知 主 色调 深 灰色 为 纯正 的 非 色彩 ,明度 很 低 。 但 与 人 物 的 毛发 对 比 就 能 
看 出 它们 明度 之 间 的 差异 。 

辅助 色 取 的 是 照片 的 肤色 , 也 是 纯正 的 浅 灰色 , 该 人 物 占据 了 该 页 面 三 分 之 一 的 面积 , 主 次 鲜明 。 








尽管 点 睛 色 是 明度 最 高 的 白色 , 但 是 由 于 只 在 小 文字 上 小 面积 地 使 用 ,因此 只 起 到 了 点 级 一 下 页 面 细 
节 突 显 主 次 关系 的 作用 。 

【点 评 】 

根据 主 色调 、 辅 色调 、 点 睛 色 所 使 用 的 面积 比例 来 看 ， 该 页 的 例子 得 到 了 很 好 的 诠释 。 由 于 该 页 


面 是 非 色彩 黑白 灰 构 成 ， 页 面 配色 分 析 就 变 得 简单 化 了 不 少 ， 因 此 在 其 他 页 面 实例 中 出 现 的 主 色调 、 
辅 色 调 、 点 睛 色 不 同 的 色彩 内 全 与 张扬 的 特性 在 这 里 也 就 涉及 不 到 了 。 


10.4.8 小 结 


以 上 灰色 页 面 配色 示例 不 难看 出 ,都 是 非 色彩 系 灰色 为 主 色调 点 缓 极 少 面积 的 色彩 系 ,色彩 运用 
的 面积 反差 越 大 ， 页 面 所 呈现 的 独特 魅力 也 就 越 强烈 。 灰 色 的 特性 在 于 能 把 刺激 耀眼 的 颜色 柔和 化 ， 
这 将 是 调和 多 个 页 面 配色 的 利器 , 但 是 也 要 注意 不 同 明度 灰色 所 起 到 的 配色 作用 ,不同 明度 的 灰色 拱 
配 不 同 的 彩 度 颜色 时 ， 所 得 到 的 结果 差别 很 大 ， 根 据 整体 页 面 配色 应 在 灰色 明度 上 反复 地 调整 。 

灰色 谦和 内 敛 的 特性 决定 了 不 同 明度 的 灰色 扮演 的 是 辅佐 陪衬 的 角色 。 灰 色相 对 黑色 、 白 色 要 多 
些 变 化 ， 因 为 它 能 通过 明度 来 表达 不 同 的 性 格 特征 。 灰色 与 其 他 彩 度 色彩 搭配 时 能 降低 张扬 粹 眼 的 颜 
色 ， 是 调和 色彩 的 方法 之 一 。 两 种 或 两 种 以 上 的 色彩 混合 ， 如 能 配 上 灰色 ， 这 两 个 色调 本 身 必 能 相互 
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彩 度 的 黑白 灰 不 同 面积 的 使 用 ， 相 对 彩 度 色 系 来 说 是 比较 容易 的 颜色 措 配 ， 且 能 包容 所 有 的 





10.5 黑色 页 面 配 色 





黑色 是 暗色 ， 是 纯度 、 色 相 、 明 度 最 低 的 非 彩 色 。 黑 色 象征 着 力量 ， 有 时 
感觉 庄严 肃穆 ， 有 时 又 意味 着 不 吉 Me 自古 以 来 ， 世界 各 族 都 公认 黑色 代表 死亡 ，; 
有 能 吸收 光线 的 特性 ， 别 有 一 i | 
黑色 能 和 许多 色彩 构成 良好 的 对 比 调和 关系 , 运用 范围 很 广 。 黑色 给 人 深沉 、 神 秘 、 和 寂静、 悲哀 、 | 
压抑 的 感受 。 黑 色 是 最 有 力 的 搭配 色 ， 常 用 来 表示 英俊 的 男人 


10.5.1 黑色 + 白色 
【示例 】 黑 色 系 明度 对 比 : 黑色 + 白色 ， 黑 色 网 页 示例 截图 如 图 10.31 所 示 。 


HAN 












图 10.31 黑色 + 白色 页 面 效 果 


【分 析 】 

名 主 色 调 力 黑色 

回 “ 辅 色调 白色 

回 ”点 睛 色 白色 

回 背景 色 三 号 色 

从 RGB 和 HBS 模式 可 以 看 出 ，3 组 数字 显示 没有 挫 杂 任何 的 数字 ， 都 统一 到 最 高 级 0 到 255， 
即 纯 黑 和 纯 白 。 | 
色白 色 属于 没有 色相 和 饱和 度 、 只 在 明度 两 极 的 非 色 彩 。 两 种 极端 强烈 对 比 的 只 在 明度 上 有 区 | 
别 的 颜色 , 与 前 面 所 说 的 三 原色 、 对 比 色 的 对 比 还 是 有 较 大 区 别 的 。 该 页 面 只 有 两 种 非 色 彩 搭配 ， 即 | 
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黑色 白色 , 衬 映 得 该 页 面 的 设计 元 素 也 非常 干净 简练 , 旁边 点 级 大 小 得 当 的 文字 元 素 减 小 该 页 面 有 可 
| 能 因此 产生 的 单调 感觉 。 
| 【点 评 】 

黑白 纯色 在 明度 上 反差 非常 大 ， 视 觉 冲 击 强烈 ， 主 次 分 明 ， 全 站 的 贯穿 运用 ， 构 成 特色 鲜明 的 设 
计 风格 ， 散 发 迷人 的 高 品位 的 贵族 气息 。 黑 白 两 种 颜色 的 搭配 使 用 通常 可 以 表现 出 都 市 化 的 感觉 ， 常 
用 于 现代 派 页 面 设计 中 。 


| 10.5.2 黑白 + 深 灰 
【示例 】 非 色彩 系 : 黑白 + 深 灰 色 ， 黑 色 网 页 示例 截图 如 图 10.32 所 示 。 











图 10.32 ”黑白 + 深 灰 色 页 面 效果 


【分 析 】 

回 主 色调 埠 黑色 
回 畏 色 调 才 R93 G93 B93 Ho S0% B36% 
回 点睛 色 【 ) 白色 
显 名 短 R2l G21 B21 HO S100% B 8% 
| ”该 页 面 与 上 页 配色 类 似 ,只 是 多 了 、 灰 、 白 这 3 种 非 色 及 
| 运用 到 了 。 从 该 页 整体 效果 可 以 看 到 ， 多 了 辅助 色 灰色 ， 令 该 页 面 层次 感 更 丰富 
| 感觉 增强 。 左 上 部 点 睛 色白 色 块 面 的 运用 ， 使 得 这 种 空间 感 差 距 拉 大 ， 增 强 视觉 层次 感 ， 同 时 突出 标 

志 品 牌 、 主 题 思想 。 另 一 作 文字 的 功能 运用 。 

| “背景 深 灰 色 明度 非常 低 ， 接 近 于 黑色 ， 稍 不 留心 有 可 能 会 被 忽略 。 结 合 辅助 色 灰 色 再 整体 上 看 该 
| 色 配 色 ， 主 要 起 到 丰富 视觉 层次 感 ， 缓 和 主 色调 黑色 有 可 能 带 来 的 僵硬 感 。 











该 页 面 里 都 


空间 























| 引 = 色彩 色调 所 构成 的 页 面 较 具 特 色 ， 尤其 灰色 的 加 入 更 增添 层次 感 。 结 合 黑白 图 形 ， 营 造 
| 出 - 段 二 典 的 故事 场景 契合 该 网 站 所 体现 的 内 容 思想 。 
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10.5.3 大 黑色 


【示例 】 黑 色 背 景 应 用 网 页 示例 截图 如 图 10.33 所 示 。 





图 10.33 ”大 黑色 页 面 效果 
【分 析 】 
回 “ 主 色调 葡 黑色 
回 ” 辅 色调 R41 G192 B75 Hl134 S79% B75% 
【] R94 G77 B144 H268 S32% B45% 白色 

回 点 睛 色 SS R174 G22 B61 H345 S87% B68% 
回 黑色 | 
背景 黑色 下 ， 除 了 白色 ,还 有 其 他 3 种 颜色 绿色 、 紫 色 、 红 色 分 布 在 不 同 的 位 置 。 其 中 绿色 和 紫 | 
然 被 称 之 为 辅助 色 ， 但 它们 使 用 的 面积 仍然 不 多 ， 只 是 相对 于 点 睛 色 红 色 来 说 。 绿 色 主 3 | 
文字 方面 ， 紫 色 用 于 图 形 方面 ， 所 指向 的 分 工 明确 。 从 RGB 模式 RGB 3 个 数值 上 看 到 紫色 混合 数值 | 
上 较 接近 ， 因 此 纯度 降低 ， 相 对 于 绿色 、 红 色 来 说 为 中 间 色 ， 能 上 呈 低 调 缓和 状态 。 | 

从 HSB 模式 S 数值 来 看 ， 绿 色 虽 然 纯 度 上 比 红色 稍 低 些 ， 也 许 是 因为 使 用 面积 较 多 的 原因 ， 看 | 
起 来 似乎 比 红色 醒目 些 。 红 色 在 这 里 主要 起 到 的 是 点 明 目 前 所 属 的 状态 这 一 功能 性 作用 , 在 黑色 的 背 | 
景 下 尽管 使 用 面积 非常 小 ， 但 依旧 容易 被 浏览 者 注意 到 。 | 





























【点 评 】 | 
黑色 的 背景 下 所 使 用 的 颜色 面积 虽然 不 多 , 但 由 于 黑色 这 一 衬托 放大 的 特性 ， 其 他 颜色 较 容易 引 | 
起 浏览 者 的 注意 ， 充 分 发 挥 其 设计 意图 。 | 


10.5.4 黑白 + 浅 灰 


【示例 】 黑 白 浅 灰 配 色 网 页 示例 截图 如 图 10.34 所 示 。 
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图 10.34 黑白 + 浅 灰 页 面 效果 


【分 析 】 

回 主 色 调 葡 黑色 

回 “” 辅 色调 白色 

回 点 睛 色 白色 

回 ”背景 色 R234 G234 B234 HO S0% B92% 

该 页 面 无 论 从 设计 上 还 是 配色 上 都 非常 简 ; 
白色 边框 线条 无 不 是 为 了 突出 前 景 文字 的 作用 。 

从 RGB 数值 都 是 234 来 看 ，255 为 白色 ， 背 景色 234 只 是 在 明度 上 稍 做 变化 得 到 的 浅 灰 色 。 背 
景 的 浅 灰色 把 前 景 的 白 黑 对 视觉 的 刺激 力 变 得 柔和 协调 很 多 。 虽 为 背景 灰色 ， 实 际 在 整个 页 面 配色 作 
| 用 上 起 到 了 点 睛 之 笔 ， 使 得 页 面 焕发 出 另外 一 种 神秘 且 特 殊 的 气息 。 

【点 评 】 

该 页 面 设计 风格 极其 简约 , 除了 方形 块 面 边框 , 没有 多 余 的 图 形 修饰 , 主要 是 以 文字 的 大 小 粗细 、 
朴 密 间距 排版 为 设计 元 素 。 浅 灰色 的 加 入 让 本 来 具 强 烈 冲 突 色 的 黑白 变 得 素雅 些 了 ,也 颇具 高 层 
| 调 许多 。 


| 10.5.5 ”黑色 + 少 彩 


【示例 】 黑 色 + 少 量 彩色 配色 应 用 网 页 示例 截图 如 图 10.35 所 示 。 

【分 析 】 

| 可 主 色调 和 号 和 

| [wl 辅 色调 志 Rs G50 B110 H215 S93% B43% 

| R234 G234 B234 HO SO0% B92% 

回 点 睛 色 才 R166 G50 B48 HI S71% B65% 

[2 G158 B103 HI149 S67% B62% 

回 ”背景 色 R234 G234 B234 HO  S0% B92% 

该 页 面 以 黑色 为 主 色调 ， 虽 然 多 了 不 少 颜色 的 加 入 ， 但 是 由 于 使 用 面积 都 较 少 ， 除 了 少许 修饰 外 
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主要 运用 于 功能 文字 方面 的 强调 。 





a 
癌 
3 
2 
日 
BE 
5 
又 
局 
上 


图 10.35 黑色 + 少 彩色 页 面 效果 
辅助 色 为 蓝 色 ， 正 蓝 色 的 HSB 模式 中 HH 是 240， 目 前 该 页 面 显示 的 是 215， 可 看 出 色相 上 稍 向 | 
绿色 靠拢 ，S93% 和 B43% 来 看 纯度 和 明度 都 不 高 ， 因 此 该 蓝 色 在 黑色 上 显示 不 明显 。 点 睛 色 主要 都 运 | 
用 在 文字 功能 上 ， 红 色 几 乎 是 正 红 ， 由 于 降低 了 纯度 和 明度 ， 该 颜色 不 明显 。 绿 色 五 数值 为 149, 正 | 
绿色 为 120， 色 相 上 稍 向 蓝 色 倾斜 ， 纯 度 和 明度 不 高 ， 因 此 该 颜色 也 不 明显 。 
【点 评 】 
低 纯 度 低 饱 和 度 的 色彩 在 黑色 背景 下 ， 较 易 使 整体 色彩 达到 统一 的 目的 ， 颜 色 变 得 柔和 而 含蓄 。 


10.5.6 黑色 + 楼 色 
【示例 】 黑 色 搭配 橙色 应 用 网 页 示例 截图 如 图 10.36 所 示 。 












图 10.36 ”黑色 + 橙色 页 面 效 果 
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【分 析 】 
串 主 色调 志 黑色 
名” 辅 色调 白色 
回 ”点睛 色 凡 R255 G125 B33 H25 S87% B100% 

二 R234 G9% B18 H22 s9% B92% 
回 背景 色 区 号 色 
林 色 的 HSB 模式 H 色 值 显示 是 25， 而 正 橙 色 是 30， 该 橙色 色相 上 稍 往 黄色 倾斜 。 橙 色 适 用 于 
较 高 的 时 尚 网 站 , 运用 于 该 网 站 主题 设计 再 适合 不 过 了 。 另 一 点 睛 橙色 在 色相 上 稍 偏 橙 红色 ， 
是 基于 橙色 的 一 个 过 渡 或 者 说 是 增加 视觉 节奏 感 的 一 个 小 方法 。 右边 文字 在 不 同 程度 上 也 使 用 了 橙色 
作为 点 睛 ， 稍 平衡 了 左右 视觉 ， 起 到 色彩 左右 呼应 的 作用 。 辅 色调 白色 使 得 黑色 和 橙色 的 搭配 上 不 至 
于 太 生 硬 ， 增 强 页 面 视觉 的 愉悦 感 。 


【点 评 】 
橙色 在 黑色 的 背景 上 显得 很 鲜亮 ， 它 的 特性 得 到 了 最 大 化 的 发 挥 。 


10.5.7 黑色 + 红色 


【示例 】 黑 色 搭 配 红色 应 用 网 页 示例 截图 如 图 10.37 所 示 。 
\ er 
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图 10.37 黑色 + 红色 页 面 效果 


【分 析 】 

串 主 色调 堵 中 
[wl 辅 色调 志 R255 G0 B0 HO S100% B100% 
回 点睛 色 白色 
回首 景色 竹 吧 
从 HBS 模式 上 看 ， ee 为 0 度 ， 该 红色 为 正 红 色 且 纯度 明度 都 为 最 高 值 100%， 在 




















| 黑色 这 一 背景 的 衬托 下 ， 高 纯度 、 高 明度 的 正 红色 直到 黑色 搭配 结合 而 得 的 特性 简直 发 挥 到 了 极致 
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因此 该 页 面色 彩 配色 具有 极 强 的 视觉 冲击 力 。 
点 睛 色白 色 是 让 这 两 种 颜色 配合 起 来 更 透亮 , 缓和 对 人 视觉 不 适 的 压迫 力 。 尽 管 页 面 的 设计 元 素 


为 噪声 效果 ， 颜 色 在 不 同 面积 分 配 上 也 参差 不 齐 的 感觉 ， 但 是 由 于 黑色 主 色调 为 背景 ， 牢 牢 掌控 了 全 | 


局 ， 页 面 设计 及 配色 上 也 能 达到 统一 的 目的 。 
【点 评 】 
红色 和 黑色 的 搭配 被 誉 为 商业 的 成 功 色 。 一 是 因为 红色 是 一 种 对 人 刺激 性 很 强 的 颜色 ,是 最 鲜明 





生动 的 、 最 热烈 的 颜色 。 在 黑色 的 反衬 下 鲜明 红色 极 容易 吸引 人 们 的 目光 。 红 色相 对 于 其 他 颜色 , 视 | 
觉 传递 速度 最 快 。 红 黑 这 两 种 配色 也 被 广泛 地 运用 于 较 能 体现 个 性 的 时 尚 类 网 站 ， 让 人 印象 强烈 的 | 


深刻 。 
10.5.8 小结 


黑色 是 最 暗 的 颜色 ， 是 纯度 、 色 相 、 明 度 最 低 的 非 彩色 。 因 此 它 较 容易 起 到 衬托 和 发 挥 起 其 他 颜 | 





色 的 特性 ， 是 最 有 力 的 搭配 色 。 无 论 页 面 上 使 用 或 者 色相 跨度 大 的 多 种 颜色 ,或 是 高 纯度 低 纯度 ,或 
者 高 对 比 的 颜色 ,只 要 有 黑色 这 一 最 得 力 的 色彩 为 主 色调 掌控 着 , 页 面 设计 配色 上 能 得 到 和 谐 统一 的 
效果 。 


黑白 色 的 搭配 充满 个 性 , 合理 运用 能 散发 出 另外 一 种 迷人 的 高 品位 高 格调 的 贵族 气质 。 黑 色 与 森 | 


色 搭配 较 容易 营造 视觉 要 求 较 高 的 时 尚 网 站 。 黑 色 与 红色 的 搭配 被 誉 为 是 商业 的 成 功 色 , 具有 极 强 的 
视觉 冲击 力 。 





10.6 此 色 页 面 配色 


在 自然 界 中 紫色 是 一 种 比较 少见 的 颜色 。 象 征 着 女性 化 ， 代 表 着 高 贵 和 奢华 、 优 雅 与 魅力 ， 也 象 


征 着 神秘 与 庄重 、 神 圣 和 浪漫 。 另 一 方面 又 有 孤独 等 意味 。 紫 色 在 西方 宗教 世界 中 是 一 种 代表 尊贵 的 | 





颜色 ， 大 主教 身 穿 的 教 袍 便 采 用 了 紫色 。 

紫色 的 明度 在 有 彩色 的 色 度 中 是 最 低 的。 紫色 的 低 明度 给 人 一 种 沉 闽 、 神 秘 的 感觉 。 在 紫色 中 红 
的 成 分 较 多 时 ， 显 得 华丽 和 谐 。 紫 色 中 加 入 少量 的 黑 ， 沉重、 伤感 、 恐 怖 、 庄 严 的 感觉 。 紫 色 中 加 入 
白 ， 变 得 优雅 、 娇 气 ， 并 充满 女性 的 魅力 。 

不 同色 调 的 紫色 可 以 营造 非常 浓郁 的 女性 化 气息 ， 在 白色 的 背景 色 和 灰色 的 突出 颜色 的 衬托 下 ， 
紫色 可 以 显示 出 更 大 的 魅力 。 紫 色 通 常用 于 以 女性 为 对 象 或 以 艺术 作品 介绍 为 主 的 站 点 , 但 很 多 大 公 
司 的 站 点 中 也 喜欢 使 用 包含 神秘 色彩 的 紫色 ， 但 很 少 做 大 面积 使 用 。 


10.6.1 类 紫色 


【示例 】 紫 色 高 纯度 对 比 网 页 示例 截图 如 图 10.38 所 示 。 
【分 析 】 
主 色 调 元 R153 G0 B153 H300 S100% B60% 
回 “” 辅 色调 R251 G202 B14 H48 S94% B98% 
[ B20 G89 B89 HO S63% B84% 
H212 S39% B100% 
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图 10.38 类 紫色 页 面 效果 


回 点 睛 色 久 Hl20 s100% B91% 
二 H248 s52% Bo98% 
入 H213 sl00% B87% 
全 Hl3 s%3% B100% 

回 背景 色 力 R15 Go B153 H300 S100% B60% 

紫色 的 HSB 数值 H 色相 为 300 度 时 是 正 紫色 。 图 10.38 的 HSB 模式 S 数值 显示 ， 上 组 颜色 饱和 
度 基本 都 比较 高 ， 加 上 部 分 较 高 的 明度 组 合 ， 使 该 页 面 异 常 奢华 艳丽 。 

辅 色调 之 一 的 黄色 是 紫色 强度 最 高 的 对 比 色 , 主 、 辅 色 面积 的 大 小 不 同 是 形成 视觉 冲击 力 最 大 的 
主要 原因 。 值 得 一 提 的 是 右 下 角 的 浅 蓝 色 的 运用 ， 它 在 整个 页 面 配色 上 是 很 谦逊 的 角色 ， 但 却 既 突出 
上 面 的 文字 内 容 ， 又 不 张扬 地 压抑 住 其 他 颜色 的 配色 ， 属 于 丰富 于 页 面 的 辅助 作用 。 如 果 把 它 试 换 成 别 
的 颜色 似乎 还 是 没有 这 个 浅 蓝 色 效果 好 。 另 一 辅助 色 浅 紫 红色 又 称 粉红 色 , 粉红 色 主要 用 于 包含 少女 在 
内 的 女性 站 点 。 因 为 从 明亮 到 浅 白色 调 的 粉红 色 能 够 表现 出 可 爱 、 乖 巧 的 感觉 ， 这 里 只 做 少量 运用 。 

其 他 点 睛 色 使 用 得 虽 多 , 但 面积 很 小 , 主要 是 主 色调 紫色 附近 的 过 渡 色 , 例如 群 青 、 青 莲 、 玫瑰、 


| 红色 等 点 级 ， 闪 亮 炊 眼 ， 增 强 页 面 的 视觉 感染 力 ， 有 泻 染 出 华丽 凸显 现代 气息 的 作用 。 


【点 评 】 
该 页 面具 有 非常 强烈 的 现代 者 华 感 。 时 尚 张扬 的 配色 组 合 ， 符 合 该 页 面 主题 所 要 表达 的 环境 ， 让 
人 容易 记 住 它 。 


紫色 结合 红色 的 紫红 色 是 非常 女性 化 的 颜色 ， 它 给 人 的 感觉 通常 都 是 浪漫 、 邓 和、 华丽、 高贵 


| 雅 , 特别 是 粉红 色 可 以 说 是 女性 化 的 代表 颜色 。 高 彩 度 的 紫红 色 可 以 表现 出 超凡 的 华丽 ， 而 低 彩 度 的 


粉红 色 可 以 表现 出 高 雅 的 气质 。 紫 红色 并 不 能 随意 在 所 有 的 站 点 中 使 用 , 但 使 用 恰当 的 紫红 色 会 给 人 
留 下 深刻 的 印象 。 高 彩 度 的 紫色 和 粉红 色 之 间 的 搭配 通常 都 能 得 到 较 好 的 效果 。 


10.6.2 浅 紫 色 
【示例 】 浅 紫色 网 页 示例 截图 如 图 10.39 所 示 。 
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图 10.39 ” 浅 紫 色 页 面 效果 


【分 析 】 

主 色调 蚁 R255 G102 B255 H300 S60% B100% 

辅 色调 力 R31 G16 Bl31 H248 S88% B51% 

R190 G14 B1 H4 S99% B75% 

回 点 晴 色 久 H40 s100% B100% 

各 Ho sloo% B100% 
H73 S89% B86% ( ) 白色 

回 背景 色 久 R255 G1l02 B255 H300 S60% B100% 

该 页 面 使 用 紫色 为 100% 高 明度 的 主 色调 ， 很 容易 抓 住人 们 的 视线 成 为 聚焦 点 ， 是 非常 大 胆 又 时 
尚 的 配色 。 辅 色调 则 是 使 用 冷色 系 代表 的 深蓝 色 ， 明 度 较 低 。 主 要 是 为 了 烘托 左边 导航 菜单 ,凸显 上 
面 的 内 容 信息 ， 由 于 人 们 对 网 页 已 然 形成 了 视觉 惯性 ， 也 起 到 了 很 好 的 视觉 引导 作用 。 主 、 辅 色 的 拱 
配 运 用 构成 了 较 强 烈 的 视觉 对 比 效果 。 另 一 辅 色调 浅 蓝 色 , 在 主 色调 浅 紫色 的 烘托 下 呈现 稚嫩 的 感受 ， 
里 面 的 白色 块 起 到 浅 紫 的 背景 和 浅 蓝 色调 和 、 明 快 的 作用 。 

点 睛 色 的 使 用 实际 有 不 少 , 这 里 只 选 几 种 起 到 主要 作用 的 颜色 做 举例 分 析 。 中 黄色 运用 得 很 珍贵 ， 
只 在 左上 区 域 出 现 ， 旨 在 突出 主题 文字 的 效果 。 其 他 配色 主要 是 根据 左下 文字 字母 而 来 ， 红 和 绿色 出 
现在 页 面 的 浅 紫 色 较 为 宽敞 的 位 置 ， 小 范围 的 做 色彩 对 比 效果 。 其 他 点 睛 色 则 极 少 的 零星 分 布 ， 既 调 
和 呼应 又 起 到 活跃 于 页 面 的 角色 作用 ， 以 上 这 些 都 是 点 级 和 演 染 页 面 气氛 不 可 缺少 的 配色 元 素 。 

【点 评 】 

使 用 高 明度 、 高 饱和 的 主 色调 非常 个 性 ， 让 人 很 容易 记 住 它 ， 但 是 色彩 都 有 两 面 性 ， 此 种 颜色 略 
显 骄 躁 感 过 于 刺激 视觉 ， 不 易于 长 时 间 的 注目 浏览 。 

在 紫色 中 加 入 白色 ,可 使 紫色 略 显 沉闷 的 特征 消失 ， 变 得 清秀 、 优 雅 、 娇 气 ， 并 充满 女性 的 魅力 。 
白色 、 粉 紫色 、 天 蓝 色 的 颜色 措 配 ， 是 比较 稚嫩 的 配色 ， 同 时 也 是 最 受 少女 欢迎 的 配色 方案 ， 这 里 运 
用 也 较 得 体 。 
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10.6.3 深 紫 色 
【示例 】 深 紫色 网 页 示例 截图 如 图 10.40 所 示 。 





【分 析 】 


ELEGANT 却 


10.40 深 紫色 页 面 效果 


回 G7 B76 H298 S91% B31% 


名” 辅 色调 


R122 G12 B126 H298 S90% B48% 


回 点睛 色 H60 S91% B100% 


H63 S76% B96% 
鼻 H323 s72% B91l% (白色 


回 背景 色 坊 R76 G7 B76 H298 S91% B31% 


以 略 有 渐变 


色 为 背景 主 色调 ,渐变 色 是 调和 方法 之 一 ， 起 到 增加 层次 感 、 空 间 感 、 柔 和 视觉 的 作 


| 用 。 背 景色 左上 最 亮 处 的 特殊 处 理 ， 主 要 起 到 突出 了 标志 的 作用 。 从 HSB 模式 H 色相 数值 上 看 到 畏 
| 助 色 依旧 以 主 色调 延伸 而 成 ， 仅 在 明度 上 做 了 些 变化 ， 属 于 同类 色 的 调和 色 系 。 
点 睛 色 皆 选用 了 色彩 色 系 中 明度 最 高 的 黄色 及 相近 色 黄 绿 、 玫瑰 红 。 黄色 和 黄 绿 色 是 点 睛 之 笔 一 一 黄 














色 是 紫色 的 对 比 


色 , 深 紫色 背景 上 的 高 明度 黄色 被 衬托 得 异常 跳跃 。 黄 绿 色 既 和 谐 又 增添 了 页 面 配色 


的 高 强度 节奏 。 玫瑰 红 在 这 里 是 最 温暖 的 颜色 , 协调 且 增 强 了 页 面 配色 的 层次 感 。 根据 各 颜色 的 特质 


在 视觉 上 成 功 做 

了 页 面 空 间 感 ， 
【点 评 】 
整个 页 面 配 

的 大 小 对 比 ， 适 


深 紫色 给 人 华贵 


感觉 ， 创 造 、 谜 





了 先后 次 序 的 引导 。 白 色 虽 是 非 色 彩 ， 但 也 起 到 拉 大 色彩 之 间 色 阶层 次 的 作用 ， 增 强 
也 使 以 上 配色 更 调和 。 








色 尤 其 是 点 睛 色 的 妙用 ,使 得 整个 页 面 非常 新 颖 别致 ， 极 赋 现 代 都 市 气息 。 根 据 面积 
当 的 对 比 色 能 让 页 面 有 活跃 、 明 快 的 气氛 。 

荣 远 、 神 秘 、 孤 寂 、 珍 贵 的 心理 感受 。 较 暗色 调 的 紫色 可 以 表现 出 成 熟 沉 稳 的 
、 忠 诚 、 神 秘 、 稀 有 。 
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10.6.4 紫色 + 绿色 
【示例 】 紫 色 搭配 绿色 的 网 页 示例 截图 如 图 10.41 所 示 。 








图 10.41 紫色 + 绿色 页 面 效 果 


【分 析 】 

主 色调 埠 R10 G24 B125 H286 S81% B49% 

回 辅 色调 人 R185 G222 B30 H72 S86% B87% 

者 RI9 Go Bl24 H249 sl00% B49% () 白色 

点 睛 色 久 R255 G149 Bo H35 S100% B100% 

咬 Ro G150 B130 Hil81 S100% B60% 

背景 色 坊 R10 G24 B125 H286 S81% B49% 

绿色 被 誉 为 紫色 的 绝 配色 。 主 色调 是 饱和 度 降低 明度 较 低 的 紫色 , 辅 色调 是 色彩 明度 较 高 的 草绿 
色 及 沉稳 的 深蓝 色 。 

点 睛 色 虽 然 被 称 为 点 睛 色 ， 但 在 整个 页 面 中 使 用 的 面积 极 小 ， 与 其 他 色 系 所 占 的 比重 来 看 ， 这 两 
种 点 睛 色 小 到 几乎 给 忽略 。 尽 管 从 HSB 模式 数值 上 看 到 ， 栖 黄色 为 高 纯度 、 高 明度 色 ， 只 在 主题 文 
字 上 有 些 体现 。 另 一 蓝 绿色 所 处 的 位 置 在 显眼 的 网 站 名 称 后 方 ， 谦 逊 程度 几乎 不 为 人 们 注意 到 ， 尽 管 
它 才 是 网 站 背后 所 要 表达 的 真正 主题 。 

草绿 色 和 深蓝 色 把 大 面积 的 白色 框 起 来 ， 衬 托 起 前 景 ， 但 也 许 由 于 白色 面积 使 用 过 大 ， 为 了 不 至 
于 让 它 太 突出 , 在 白色 的 背景 上 点 绥 较 浅 的 纹样 来 降低 这 种 感觉 。 背 景色 紫色 由 于 色彩 特质 明度 较 低 
的 缘故 ， 与 明度 较 高 的 辅助 色 草绿 色 形 成 较 明 快 的 效果 。 

【点 评 】 








a 
) 六 





点 睛 色 根 据 页 面 所 占 的 面积 因素 , 也 有 的 仅 起 到 辅助 的 作用 。 相 反 草 绿色 或 许 由 于 色彩 特质 的 原 | 


因 ， 这 里 起 到 比较 强调 的 强势 目的 ， 在 该 页 面 配色 里 起 到 非常 关键 的 作用 。 
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10.6.5 ”紫色 + 紫红 色 
【示例 】 紫 色 与 邻近 紫红 色 措 配 的 网 页 示例 截图 如 图 10.42 所 示 。 
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图 10.42 紫色 + 紫红 色 页 面 效果 


【分 析 】 

回 主 色 调 鲍 R153 G102 B255 H260 S60% B100% 

辅 色调 全 R204 G153 B254 H270 S40% B99% 

励 R255 G153 B203 H331 S40% B100% ( ) 白色 

回 点 晴 色 才 R203 G51 B152 H320 S75% B80% 

R50 G0O B152 H260 S100% B60% 

背景 色 全 R153 G102 B255 H260 S60% B100% 

该 页 面 配色 的 色 组 和 紫色 关联 上 稍 有 些 偏 移 ， 从 HSB 的 五 色相 数值 上 显示 的 260 来 看 ， 正 紫色 
数值 为 300， 主 色调 整个 往 蓝 色 系 稍 偏 移 ， 构 成 较 有 视觉 感染 力 的 蓝 紫色 。 蓝 紫色 在 色相 环 中 位 于 蓝 
| 色 和 紫色 之 间 ， 所 以 它 也 蕴含 着 紫色 的 一 些 神秘 感 。 尽管 饱和 度 不 是 很 高 60%， 但 明度 达到 最 高 状态 
| 为 100%， 使 得 该 色彩 攀 度 很 强 ， 较 高 亮度 的 蓝 紫 色 显 得 非常 高 雅 ， 契 合 网 站 主题。 

辅 色调 HSB 的 互 色相 数值 为 270， 已 经 稍 往 紫 色 偏 移 ， 紫 色 特征 较 明显 ， 明 度 较 高 且 较 明快 的 感 
觉 。 另 一 辅助 色 粉 红色 了 色相 数值 为 331， 稍 往 红色 系 偏 移 ， 明 度 极 高 为 00%， 更 增添 了 明快 的 气息 。 

点 睛 色 在 这 里 起 到 了 不 可 忽视 的 作用 ,由 于 浅 紫红 较 有 女性 气质 特征 , 增添 了 该 页 面 的 女性 温柔 
细腻 的 美感 。 另 一 点 睛 色 深蓝 色 由 于 色彩 特质 所 致 ， 这 里 只 是 辅助 性 做 些 点 缓 。 

【点 评 】 

浅 紫色 系 给 人 人 妩媚、 优雅、 娇气、 清秀、 梦幻， 充满 女性 魅力 。 上 面 的 配色 除了 点 睛 色 深蓝 色 明 
度 较 低 ， 其 他 的 色彩 组 合 都 在 不 同 的 程度 上 提高 了 明度 ， 增 强 了 页 面 所 要 表达 的 主题 效果 。 


10.6.6 ”紫色 + 红色 
| 【示例 】 紫 色 搭配 红色 应 用 网 页 示例 截图 如 图 10.43 所 示 。 
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【分 析 】 
回 “ 主 色调 
回 ” 辅 色调 


点 睛 色 


回 ”背景 色 


what the? 


nutrient glossary 
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10.43 ”紫色 + 红色 页 面 效果 


各 Rlo G33 Bl39 H283 s76% 


人 ) 白色 
入 H347 s82% B75% 
者 H221 s9%% B4% 


MH3l Ss70% B91l% 


B55% 
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本 页 面 配 色 简 洁 精 干 。 主 要 使 用 了 主 、 辅 两 色调 为 界 ， 点 级 小 配色 ， 整 体 玻 密 得 当 ， 色 块 分 明 的 | 


色彩 构成 。 主 色调 紫 HBS 模式 的 H 色相 数值 是 2833， 稍 向 蓝 色 方位 偏 移 ， 以 至 于 此 种 紫色 略 呈 现 冷 
色 特 征 。 点 睛 色 主要 选择 红 、 蓝 、 黄 3 种 ， 其 中 红色 的 互 色 相 显示 为 347, 色 值 向 蓝 色 偏 移 略 呈 冷 调 ， 
另 一 点 睛 色 橙黄 色 使 用 面积 非常 之 小 ， 几 乎 让 人 忽略 。 

右上 角 多 个 线条 的 小 色 块 的 修饰 增强 了 页 面 的 视觉 感染 力 。 背 景 黑 色 不 是 孤立 使 用 ， 既 响亮 地 突 





因此 该 颜色 在 这 里 显示 没有 僵硬 的 感觉 。 


出 前 景 ， 又 与 前 景 的 线条 、 文 字 呼 应 起 来 ， 让 整个 页 面 高 品位 、 高 层次 的 特质 更 明显 。 


【点 评 】 





次 的 感觉 更 加 明显 。 


10.6.7 ”紫色 + 绿色 
【示例 】 紫 色 低 纯度 配色 〈 紫 色 + 绿 色 ) 应 用 网 页 示例 截图 如 图 10.44 所 示 。 


【分 析 】 
回 “ 主 色调 
回 “” 辅 色调 





和 了 LI72 G1 Bl164 
和 Rs Gl125 B116 
R213 G199 B299 


H308 
H167 
H317 


"393。 


S35% 
S34% 
S 796 


B67% 
B 49% 
B 84% 


主 色 调 紫 色 在 这 里 既 有 沉静 又 显 高 贵 的 感觉 , 提升 产品 的 档次 。 点 睛 色 红 色 的 加 入 让 这 种 高 贵 又 档 
蓝 色 有 稳 住 紫色 和 红色 的 效果 。 该 页 面 大 色 块 的 构图 及 配色 极其 简约 ， 独 具 魅 力 。 








砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


Fa Winter 





图 10.44 紫色 + 绿色 页 面 效 果 


回 点睛 色 R250 G207 B17 H49 S93% B98% ( ) 白色 

背景 色 才 172 G112 B164 H308 S35% B67% 

该 页 面 除 了 点 睛 色 外 ， 整 体 配 色 饱和 度 都 很 低 ， 所 以 在 视觉 上 呈 柔 和 状态 。 主 色调 紫色 的 HSB 
模式 了 HH 色相 为 308， 数 值 稍 向 红色 倾斜 ， 由 于 饱和 度 及 明度 降低 ， 颜 色 呈 现 很 平和 ， 空 间 感 增强 。 

辅助 色 绿色 互 色相 为 167， 数 值 稍 向 蓝 色 偏 移 ， 从 RGB 模式 上 看 ，G 为 125〈 正 绿色 时 为 255， 


| R 为 0，B 为 0) ，R 为 82，B116， 有 这 两 色 混合 ， 因 此 饱和 度 和 明度 都 很 低 ， 然 而 在 雅致 的 紫色 背 


景 的 烘托 下 ， 较 为 突出 了 绿色 的 产品 这 一 主角 ， 达 到 配色 目的 。 另 一 辅助 色 灰 色 ， 为 整体 的 柔和 状态 
增添 了 雅致 的 气息 。 

点 睛 色 黄 色 的 特质 因素 ， 无 疑 是 这 页 面 最 响亮 耀眼 的 颜色 ， 尽 管 使 用 的 面积 较 小 ， 它 是 紫色 的 对 
比 色 , 高 纯度 的 黄色 与 低 纯度 的 紫色 形成 较 强 烈 的 视觉 反差 对 比 效 果 ， 也 因此 使 得 页 面 的 沉 问 得 到 一 
定 程度 的 缓解 ， 提 升 页 面 配 色 的 空间 透亮 感 。 

【点 评 】 

整体 柔和 的 配色 调子 较 吻 合 地 体现 了 尊贵 高 雅 的 服饰 感觉 ,并 透露 出 宁静 、 安 稳 、 雅 致 的 环境 氛 
围 ， 充 分 体现 出 了 紫色 运用 的 最 大 魅力 。 


10.6.8 ”小结 


HSB 数值 H 色相 为 300 度 时 是 正 紫色 ， 从 上 面 的 网 页 配色 实例 中 我 们 较 全 面 地 看 到 了 不 同 紫色 
的 性 格 体现 。 紫 色 是 色彩 系 里 明度 最 低 的 颜色 。 尽 管 如 此 ， 高 纯度 的 紫色 与 高 级 灰 度 的 紫色 都 透 出 不 
同 的 气质 。 神 秘 、 高 雅 在 这 里 配色 是 它 普遍 的 诠释 。 

紫色 的 纯色 明度 很 低 ， 因 此 它 与 浅 色 在 一 起 ， 从 明度 关系 上 就 分 出 了 泾 渭 。 为 了 不 与 黑白 对 比 混 
应， 适当 地 将 紫色 加 白色 效果 会 更 好 。 由 于 紫色 发 冷 ， 紫 色 配 暖 色 时 ， 暖 色 不 能 直接 介入 ， 需 要 调整 


| 纯度 或 明度 才能 形成 比较 和 谐 的 配色 。 


绿色 被 誉 为 紫色 的 绝 配色 ， 也 是 一 对 复 色 对 比 色 ,， 它 比 三 原色 的 对 比 色 要 温和 含蓄 ， 由 于 它们 都 
带 有 一 点 共同 成 分 ， 相 互 配合 也 会 协调 得 多 。 各 自 的 特质 原因 ， 对 比 之 下 绿色 通常 起 到 比较 关键 的 作 
用 。 紫色 对 比 色 组 通常 是 较 小 面积 的 做 对 比 使 用 ， 不 同 面积 、 不 同 明度 饱和 度 的 使 用 所 表达 的 感受 是 


.394 . 
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性 
不 一 样 的 。 


紫色 传达 着 高 贵 、 优 雅 、 幻想 、 神秘、 庄重 的 心理 感受 。 蓝 紫色 可 以 用 来 创造 出 都 市 化 的 成 熟 美 ， 
且 蓝 紫色 可 以 使 心情 浮躁 的 人 冷静 下 来 。 明 








使 用 。 
10.7 赣 色 页 面 配色 


蓝 色 是 色彩 中 比较 沉静 的 颜色 。 象 征 着 永恒 与 深邃 、 高 远 与 博大 、 壮 阔 与 浩渺 ， 是 令 人 心境 畅快 
的 颜色 。 蓝 色 的 朴实 、 稳重 、 内 向 性 格 ,衬托 那些 性 格 活跃 、 具 有 较 强 扩 张力 的 色彩 ,运用 对 比 手法 ， 





亮 的 色调 直至 灰 亮 的 蓝 紫 色 有 一 种 与 众 不 同 的 神秘 美感 。 | 
低 亮 度 的 蓝 紫 色 显得 沉稳 ， 高 亮度 的 蓝 紫 色 显 得 非常 高 雅 。 在 网 页 中 ， 蓝 紫色 通常 与 蓝 色 一 起 拱 配 | 


J 
) 六 





同时 也 活跃 页 面 。 另 一 方面 又 有 消极 、 冷 淡 、 保 守 等 意味 。 蓝 色 与 红 、 黄 等 色 运用 得 当 ， 能 构成 和 谐 | 


的 对 比 调和 关系 。 

蓝 色 是 冷色 调 最 典型 的 代表 色 ， 是 网 站 设计 中 运用 得 最 多 的 颜色 ， 也 是 许多 人 钟爱 的 颜色 。 蓝 色 
表达 着 深远 、 永 恒 、 沉 静 、 无 限 、 理 智 、 诚 实 、 寒 冷 的 多 种 感觉 。 蓝 色 会 给 人 很 强烈 的 安稳 感 ， 同 时 
蓝 色 还 能 够 表现 出 和 平 、 淡 雅 、 洁 净 、 可 靠 等 。 


10.7.1 蓝 色 + 玫瑰 色 
【示例 】 蓝 色 高 纯度 对 比 〈 蓝 色 + 玫 瑰 色 ) 网 页 示例 截图 如 图 10.45 所 示 。 
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图 10.45 ” 蓝 色 + 玫 瑰 色 页 面 效果 


【分 析 】 
回 主 色 调 坊 Ro G85 Bl6 H209 S100% B72% 
辅 色调 杞 Ro G145 B246 H205 S100% B96% ( ) 白色 


回 点 晴 色 坊 R226 Go Bl167 H316 S100% B89% 


"395。 


i 


| 背景 色 葡 Ro G85 Bl6p H209 sl00% B72% 
| 蔓 色 的 HSB 数值 理 色相 为 240 度 时 是 正 蓝 色 。 图 10.45 的 HSB 模式 S 数值 显示 ， 所 有 主要 配色 
| 的 饱和 度 都 是 10096。 从 主 色调 、 辅 色调 HSB 模式 的 数值 可 看 出 , 这 两 种 颜色 在 明度 上 有 较 大 的 区 别 ， 
缚 站 ”色相 上 稍 有 轻 度 变化 饱和 度 相同 。 
| RGB 模式 上 看 ， 主 色调 与 辅 色调 R 数值 都 为 0，G 绿色 的 数值 和 B 蓝 色 数 值 分 量 的 变化 ， 得 到 
pte | 了 不 同 蓝 色 的 两 结果 。 点 睛 色 仅 是 R 红色 与 B 蓝 色 两 色调 和 而 得 没有 扮 杂 其 他 颜色 ， 因 此 饱和 度 旦 
| 最 高 值 100%。 整 个 页 面 配色 的 饱和 度 都 为 100%， 页 面 整体 配色 看 起 来 视觉 冲击 力 异 常 强烈 。 辅 助 
| 色白 色 让 页 面 上 的 颜色 的 特性 发 挥 到 极致 ， 是 不 可 缺少 的 辅助 配色 。 
【点 评 ] 
高 纯度 烘托 、 微 妙 的 冷暖 变化 配色 ， 体 现 出 现代 都 市 张扬 时 尚 的 气息 。 白 色 块 面 的 线 型 使 得 这 种 
高 纯度 、 高 强度 的 配色 变 得 响亮 却 也 缓和 。 
| 辅 色调 蓝 色 的 运用 透露 出 设计 师 的 大 胆 与 鲍 力 ,玫瑰 色 在 色 轮 表 里 算 是 冷色 系 ， 但 是 与 蓝 色 广义 
| 上 的 对 比 来 说 是 暖色 ， 在 这 里 与 蓝 色 措 配 算是 绝 配 了 。 整 个 页 面 无 不 体现 出 特色 和 个 性 。 


| 10.7.2 浅 蓝 色 

【示例 】 同 类 浅 蓝 色 网 页 示例 截图 如 图 10.46 所 示 。 
| 

| 
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图 10.46 小 蓝 色 页 面 效果 


【分 析 】 
加 ” 主 色调 R169 G215 B238 H200 S29% B93% 
辅 色调 R225 G246 B251 H192 S10% B98% (OO) 白色 


回 点 睛 色 才 Rlo G75 B157 H258 S52% B 62% 

加 ”背景 色 R169 G215 B238 H200 S29% B93% 

该 页 面 中 间 色 较 多 ， 主 要 是 在 蓝 色 范畴 内 做 明度 的 变化 ， 所 以 色 度 差 非常 缓和 ， 以 至 于 页 面 的 色 
| | 末 吕 现 非 党 柔和 ， 甚至 稍 有 些 发 灰 的 感觉 ， 好 在 该 页 面 还 有 些 较 大 色 块 的 浅 蓝 色 及 白色 ， 拉 大 了 页 面 
| 的 色 阶 ， 使 得 这 种 灰 的 感觉 减弱 不 少 。 
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主 色调 HSB 数值 HH 显示 200 度 ， 色 轮 度 稍 向 绿色 方位 倾斜 ， 但 是 由 于 从 180 度 到 270 度 基本 上 | 

给 人 的 视觉 呈现 还 是 蓝 色 范 畴 ， 因 此 与 视觉 上 广义 的 蓝 色差 别 不 大 。 | 

点 睛 色 的 HSB 数值 是 238， 色 轮 趋势 是 向 暖色 紫色 〈 相 对 冷暖 色 ) 倾向 ， 变 化 微妙 ， 是 本 页 面 

最 温暖 的 颜色 。 蓝 紫色 在 色相 环 中 位 于 蓝 色 和 紫色 之 间 ， 所 以 它 也 蕴含 着 紫色 的 一 些 神秘 感 ， 加 上 浅 | 

蓝 色 的 雅致 ， 所 以 亮度 较 高 的 蓝 紫色 显得 非常 高 雅 。 在 网 页 中 ， 蓝 紫色 通常 与 蓝 色 一 起 搭配 使 用 。 
【点 评 】 

浅 蓝 色 给 人 一 种 很 宁静 、 安 静 的 心理 感受 。 浅 蓝 色 系 有 淡雅 、 清 新 、 浪 漫 、 高 级 的 特质 ， 常 用 于 | 

化 妆 品 、 女 性 、 服 装 网 站 。 它 是 最 具 凉 来、 清新 特征 的 色彩 。 和 白色 混合 时 ， 能 体现 和 柔顺、 淡雅、 浪 | 

漫 的 气氛 。 | 

主 色调 选择 明亮 的 蓝 色 ， 配 以 白色 的 背景 和 灰 亮 的 辅助 色 ， 可 以 使 站 点 干净 而 整洁 ， 给 人 庄重 、 | 

充实 的 印象 。 该 页 面 基本 上 属于 同类 色 系 ， 也 是 最 保守 稳妥 且 调和 的 配色 方案 。 但 该 种 配色 看 久 了 容 | 

易 呈现 出 平淡 乏味 的 感受 。 


10.7.3 深蓝 色 
【 示例】 深蓝 色 网 页 示例 截图 如 图 10.47 所 示 ， 网 址 是 http://www.ro-audio.com。 
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10.47 深蓝 色 页 面 效 果 


【分 析 】 
回 主 色调 堵 Ro G50 B89 H206 S100% B35% 


回 辅 色调 才 Ro G100 B167 H204 S100% B65% 
R229 G229 B229 HO S0% B90% 人 ) 白色 

[wl 点 睛 色 才 R255 G113 B0 H27 S100% B100% 
回 背景 色 瞩 ro G50 B89 H206 S100% B35% | 
HSB 数值 显示 主 色调 和 辅 色调 的 互 色相 接近 ， 饱 和 度 为 最 高 ， 都 为 100%， 两 者 只 在 明度 上 有 区 | 
别 ， 分 别 是 35% 和 65%。 三 维 厚 重 的 设计 风格 ， 用 调和 法 之 一 的 渐变 手法 ， 把 主 色调 和 辅 色调 进行 | 











= 397 * 
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| 了 缓 缓 的 过 渡 ， 增 强 了 层次 感 ， 体 现 个 性 魅力 ， 符 合 该 页 面 视 音频 风格 网 站 的 主题 。 
| 从 整个 页 面 来 看 由 于 面积 关系 , 点 晴 色 在 这 里 所 起 的 作用 不 大 ， 仅 仅 就 晴 晓 点 水 而 已 。 相 反 的 畏 
| 田 色 在 这 里 却 起 到 了 较为 突显 的 作用 ， 让 整个 沉 间 的 本 只 起 烘托 作用 的 深蓝 色 得 到 充分 的 展示 。 另 一 
| 辅 色调 灰色 令 白 色 与 深蓝 色 反差 不 易 过 大 ， 起 到 调和 的 目的 。 白 色 增强 了 整个 页 面 的 视觉 感 ， 使 之 更 
| 醒目。 
te 【点评 
| 深蓝 色 是 沉稳 的 且 较 常 用 的 色调 。 能 给 稳重、 冷静、 严谨、 冷漠 、 深 沉 、 成 熟 的 心理 感受 。 它 
| 主要 用 于 营造 安稳 、 可 靠 、 略 带 有 神秘 色彩 的 氛围 
| “深蓝 色 明度 偏 暗 ， 基 于 上 面 对 深蓝 色 的 特质 描述 ， 在 常规 网 站 的 设计 里 ， 可 能 不 适合 做 太 大 面积 
| 的 使 用 。 但 根据 不 同 网 站 主题 的 设计 需要 可 以 做 些 不 同 的 尝试 。 


| 
| 10.7.4 纯 蓝 色 
【示例 】 蓝 色 纯度 对 比 网 页 示例 截图 如 图 10.48 所 示 。 
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10.48 纯 蓝 色 页 面 效 果 
【分 析 】 
回 主 色 调 儿 Ro G18 B235 H195 S100% B92% 
辅 色调 和 Ri9 Gl16l B41 HIII S75% B63% 
R255 G217 B17 H50 S93% B100% ( ) 白色 

点 睛 色 答 H37 s94% B68% 

全 Hl6 so9% Bo93% 

二 H39 sl00% B93% 
加 背景 色 久 Ro Gl78 B235 H195 S100% B92% 
| 从 HSB 模式 上 的 数值 显示 情况 进行 分 析 ， 全 页 基本 上 是 属于 高 纯度 配色 , 各 颜色 特性 相互 辉映 、 


"398 。 
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相互 交融 ， 把 整个 页 面 环境 泻 染 得 异常 鲜亮 和 热闹 。 由 于 有 大 面积 的 主 色 调和 背景 色 做 掌控 ， 加 之 以 
上 因素 综合 分 析 ， 无 论 页 面 再 多 、 再 细 、 再 耀眼 的 颜色 都 能 很 好 地 统一 在 同一 个 页 面 之 中 。 





冷暖 色 系 之 间 跨 度 很 大 : 蓝 色 、 绿 色 、 黄 色 、 橙 黄色 、 朱 红色 、 土 橙黄 色 、 墨 绿色 ， 几 乎 按照 色 | 





轮 表 上 的 轨迹 进行 。 也 由 于 面积 有 多 有 少 的 原因 ， 因 此 页 面 看 起 来 较 明 快 调和 。 其 中 土 橙黄 色 和 墨绿 | 


色 是 页 面 明度 最 重 的 颜色 ， 从 RGB 色 值 上 可 看 出 ， 都 分 别 混合 了 其 他 颜色 ， 因 此 饱和 度 相对 较 低 ， 
略 呈 灰色 状态 ， 另 一 种 意义 上 来 说 这 种 灰色 状态 是 调和 色 的 一 种 很 好 的 方式 。 
【点 评 】 


万 
) 六 





高 纯度 的 蓝 色 主 色调 配合 的 其 他 高 纯度 冷暖 色调 对 比 , 会 营造 出 一 种 整洁 轻快 的 印象 。 根据 色 轮 | 


表 的 缓和 过 渡 及 使 用 面积 多 少 , 判断 分 析出 页 面 调和 程度 。 非常 明快 活泼 、 跳跃 的 富有 趣味 性 的 配色 ， 
使 人 勾 起 了 无 限 愉悦 的 童 趣 。 


10.7.5” 蓝 色 + 绿 色 
【示例 】 蓝 色 与 邻近 色 绿 色 搭配 的 网 页 示例 截图 如 图 10.49 所 示 。 
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10.49 ” 蓝 色 + 绿色 页 面 效果 





【分 析 】 

主 色调 二 Ro G10 B153 H200 S100% B60% 

辅 色调 人 R178 G209 B224 H200 S21% B88% 
二 Ro G153 B153 Hi80 S100% B60% 

加 ”点 晴 色 狗 R96 G13 B88 H217 S49% B74% 
全 R17 G197 B162 HI154 S41% B77% 

回 ”背景 色 ( ) 白色 


从 HBS 模式 的 S 饱和 度数 值 10096 上 看 , 不 少 用 户 会 很 疑惑, 误 以 为 较为 柔和 的 颜色 饱和 度 或 许 | 


会 低 , 刺眼 的 颜色 通常 饱和 度 较 高 , 其 实 不 然 , 每 个 颜色 有 每 个 颜色 的 不 同属 性 特性 。 高 纯度 的 色彩 ， 
明度 的 降低 是 协调 视觉 的 一 个 因素 ,容易 给 人 造成 低 纯度 的 错觉 。 不 同 块 面 的 邻近 色 交 错 排列 ,增强 
本 页 面 视觉 动感 。 
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~ 更 责 设计 弓 网 站 过 役 从 入 门 到 将 通 
| 2 


| 辅 色调 浅 蓝 色 是 背景 色白 色 和 主 色调 蓝 色 的 中 间 色 , 它 形成 了 页 面 配 色 的 中 间 色 阶 , 色彩 层次 感 
| 增强 以 外 ， 还 使 整个 页 面 的 颜色 更 为 和 谐 。 另 一 辅 色调 青色 ， 是 蓝 色 和 绿色 的 结合 体 ， 包 括 在 标志 文 
| 字 、 文 字 标题 上 的 运用 ， 无 疑 活跃 了 整个 页 面 的 配色 环境 。 
| 两 个 点 睛 色 都 略 调 高 了 明度 , 另 一 意义 上 是 该 页 面 配 色 的 中 间 色 阶 。 两 点 睛 色 都 是 在 主 色调 蓝 色 、 
“YY” | 辅 色调 青色 的 基础 上 衍生 出 来 的 颜色 ， 这 里 “点 睛 ”的 作用 不 大 ， 都 属于 和 谐 色 系 。 
Note | 【点 评 】 
| 很 多 站 点 都 在 使 用 蓝 色 与 青绿 色 的 搭配 效果 。 蓝 色 、 青 绿色 、 白 色 的 搭配 可 以 使 页 面 看 起 来 非常 
| 干净 清澈 ， 在 我 们 的 现实 生活 中 运用 的 范围 很 广 ， 可 以 说 是 随处 可 见 的 。 
| 主 颜 色 选 择 明 亮 的 蓝 色 ， 配 以 白色 的 背景 和 灰 亮 的 辅助 色 ， 加 上 中 间 色 阶 的 运用 ， 可 以 使 页 面 有 
| 干净 整洁 , 给 和 人 庄重、 充实 的 印象 。 这 是 一 组 非常 愉悦 和 谐 的 邻近 色 系 配色 。 中 间 色 适度 面积 的 运用 
| 及 背景 白色 让 这 组 颜色 特征 发 挥 到 了 极致 。 


| 10.7.6” 蓝 色 + 红 色 




















【示例 】 蓝 色 与 红色 强 对 比 网 页 示例 截图 如 图 10.50 所 示 。 





图 10.50 ” 蓝 色 + 红色 页 面 效 果 


| 【分 析 】 
| 加 ” 主 色调 RO G90 B156 H206 S100% B62% 
| 
回 本 色调 克 io G14 Bl H4 S99% B75% "白色 


点 睛 色 R255 G249 B53 H58 S79% B100% 
R198 G226 B62 H72 S64% B89% 
背景 色 吃 ro G90 B156 H206 S100% B 62% 
| 蓝 色 是 冷色 系 的 最 典型 的 代表 了 , 而 红色 是 暖色 系 里 最 典型 的 代表 , 两 冷暖 色 系 对 比 下 让 全 页 的 
| 色彩 对 比 异 常 强烈 且 兴 奋 ， 很 容易 感染 带动 浏览 者 的 激昂 情绪 。 红 色 把 文字 图 片 框 起 来 ， 在 蓝 色 背景 
| 对 比 下 ， 很 好 地 突出 主题 ， 又 好 似 模仿 投影 荧屏 的 感觉 ， 让 人 迅速 地 聚焦 于 视频 中 心 ， 达 到 网 站 背后 
| 的 最 终 目 的 。 


加 
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第 10 章 网 页 色彩 设计 | 
S y | 
辅 色调 是 红色 ， 从 数值 上 看 接近 于 正 红色 ， 红 色 对 视觉 传递 的 信息 是 很 快 的 ， 属 于 高 品 响亮 的 颜色 。 | 
点 睛 色 分 别 是 黄色 、 黄 绿色 。 大 家 知道 ， 黄 色 是 明度 最 高 的 颜色 ， 也 较 响亮 、 刺 目 ， 在 这 里 的 运 | 
用 能 强烈 地 突现 标题 。 从 大 的 方面 来 看 ， 点 睛 色 黄 绿色 与 辅助 色 红 色 是 对 比 色 ， 虽 然 面积 不 太 大 , 只 | 
小 范围 的 对 比 ， 但 是 已 经 足以 达到 了 迅速 传递 信息 的 效果 ， 让 人 印象 深刻 ， 促 成 再 访 点 击 。 | 
【点 评 】 
冷暖 色 系 的 对 比 碰撞 ， 充 满 激情 ， 能 传递 炽热 情感 、 强 烈 刺激 主题 的 目的 。 该 页 面 运用 了 冷暖 、 
红 绿 两 种 比较 鲜明 的 对 比 色 ， 配 色 积 极 大 胆 ， 视 觉 冲 击 力 很 强 。 


10.7.7 ” 蓝 色 + 暖色 
【示例 】 蓝 色 同类 色 〈 蓝 色 + 暖 色 ) 对 比 网 页 示例 截图 如 图 10.51 所 示 。 
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10.51 ” 蓝 色 + 暖色 页 面 效果 


【分 析 】 

主 色调 | 0 G102 B153 H200 S100% B60% 

辅 色调 全 ro G153 B204 H195 S100% B 80% 

点 睛 色 【] R217 G31 B41 H357 S86% B85% 

R255 G255 BO H60 S100% B100% 
者 R14 G5 B137 H232 S66% B54% 

加 ”背景 色 [ E20 G102 B153 H200 S100% B 60% 

本 页 面 配色 难度 较 大 ， 如何 使 这 些 配色 和 谐 又 能 达到 带动 对 比 的 目的 , 就 要 求 要 有 一 定 的 配色 经 
验 了 。 难 度 一 ， 在 于 主 色调 、 辅 色调 及 点 睛 色 的 这 3 种 蓝 色 所 充当 的 角色 运用 。 难 度 二 ， 高 纯度 、 高 
亮度 的 正 黄色 在 这 个 页 面 的 使 用 。 难 度 三 ， 黑 色 的 运用 。 

运用 排除 法 细 分 得 到 : 主 色调 、 辅 色调 的 蓝 色 饱和 度 一 样 都 是 最 高 值 ， 色 相 H 上 稍微 有 些微 妙 
区 别 ， 亮 度 上 有 些 变化 。 点 睛 色 蓝 色 饱和 度 和 明度 都 较 低 ， 介 于 两 种 蓝 色 之 间 。 三 者 面积 如 果 用 得 不 
好 页 面容 易 呈 混沌 的 灰色 状态 。 拿 出 辅 色调 蓝 色 ， 再 回 到 整个 页 面 的 配色 来 看 ， 页 面色 彩 偏重 ， 亮 度 
不 够 ， 缺 少 中 间 色 阶 ， 冷 暧 主 次 倾向 不 够 明显 ， 这 时 把 辅 色调 蓝 色 添加 进去 正好 弥补 了 这 种 缺憾 。 
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砚 贡 设计 与 网 站 建设 从 入 门 到 精通 





HSB 模式 显示 H 是 60 度 ，S 饱和 度 与 B 明度 都 是 100%， 正 是 正 黄色 。 正 黄色 只 适合 做 小 面积 
的 点 睛 色 使 用 ， 大 面积 使 用 页 面 配 色 较 难 协 调 ， 当 然 正 黄色 作为 主 色调 能 好 配色 些 。 
在 这 样 的 页 面色 彩 组 合 里 ， 黑 色 是 很 难 运用 进去 的 ， 面 积 使 用 多 了 ， 页 面 有 可 能 会 破坏 所 营造 的 


| 氛围 、 产 生 不 协调 的 感觉 。 只 在 辅助 性 地 勾勒 于 边框 是 很 好 的 使 用 办 法 。 图 片 里 的 产品 颜色 ， 有 降低 
| 纯度 的 棕 黄色 、 土 黄色 、 米 黄色 等 同类 黄色 系 ， 对 该 页 面色 彩 组 合 调配 具有 一 定 的 协调 能 力 。 





【点 评 】 
通常 矢量 页 面 的 配色 相对 于 图 片 配色 来 说 ,难度 较 大 ,色彩 的 组 织 搭配 ， 是 根据 设计 师 们 自己 以 


| 往 的 丰富 配色 经 验 ， 反 复 调配 、 反 复 加 减 而 得 。 


该 页 面 设计 师 选 取 了 页 面 的 产品 图 片 中 的 两 三 种 颜色 , 例如 点 睛 色 里 的 红色 、 蓝 色 和 黄色 ,再 大 
胆 地 发 挥 出 主 色 调 蓝 色 、 较 浅 的 辅 色调 蓝 色 和 点 睛 色 正 黄色 , 点 睛 色 黄色 运用 于 最 能 突出 产品 特色 的 
文字 上 ， 这 些 和 谐 的 元 素 生动 趣味 ， 让 整个 页 面 充满 了 故事 情节 。 


10.7.8 小 结 


HSB 数值 H 色相 为 240 度 时 是 正 蓝 色 ， 从 以 上 不 同属 性 的 蓝 色 页 面色 调 上 能 看 到 ， 不 同色 相 、 
饱和 度 、 明 度 的 蓝 色 本 身 色 彩 特性 表现 得 不 是 非常 特殊 ， 这 也 是 低调 沉稳 的 蓝 色 所 具备 的 特征 之 一 。 
关键 在 于 该 种 蓝 色 都 是 与 哪 几 种 颜色 衬托 、 对 比 的 。 

冷色 系 以 蓝 色 为 最 典型 的 代表 ， 因 此 就 产生 了 广义 的 相对 暖色 。 例 如 ， 当 与 玫瑰 紫色 做 对 比 时 ， 
玫瑰 紫 就 呈现 出 微妙 的 暖色 ， 当 与 绿色 做 对 比 色 ， 绿 色 就 呈 出 了 相对 的 暖色 ， 但 是 此 种 特性 呈现 得 非 
常 的 微弱 ， 应 根据 不 同 的 主题 页 面 做 具体 分 析 。 当 在 蓝 色 色相 、 明 度 上 暗色 亮色 非常 明朗 的 情况 下 ， 
可 以 考虑 添加 中 间 色 ， 减 弱 可 能 造成 的 单调 感 ， 丰 富 两 极 色 阶 的 过 渡 ， 调 和 页 面 的 视觉 感受 。 


10.8 绿色 页 面 配 色 


绿色 在 黄色 和 蓝 色 (冷暖 ) 之 间 ， 属 于 较 中 庸 的 颜色 ， 这 样 使 得 绿色 的 性 格 最 为 平和 、 安 稳 、 大 
度 、 宽 容 ， 是 一 种 和 柔顺、 恬静 、 满 足 、 优 美 、 受 欢迎 之 色 。 也 是 网 页 中 使 用 最 为 广泛 的 颜色 之 一 。 绿 
色 与 人 类 息息相关 ， 是 永恒 的 欣欣 向 荣 的 自然 之 色 ， 代 表 了 生命 与 希望 ， 也 充满 了 青春 活力 ， 绿 色 象 
征 着 和 平 与 安全 、 发 展 与 生机 、 舒 适 与 安宁 、 松 弛 与 休息 ， 有 缓解 眼 部 疲劳 的 作用 。 

绿色 具有 一 定 的 与 自然 、 健 康 相 关 的 感觉 ， 所 以 也 经 常用 于 与 自然 、 健 康 相 关 的 站 点 。 绿 色 还 经 
常用 于 一 些 公司 的 公关 站 点 或 教育 站 点 。 绿 色 能 使 我 们 的 心情 变 得 格外 明朗 。 黄 绿色 代表 清新 、 平 静 、 
安逸 、 和 平 、 柔 和 、 春 天 、 青 春 、 升 级 的 心理 感受 。 


10.8.1 绿色 


【示例 】 绿 色 网 页 示例 截图 如 图 10.52 所 示 。 

【分 析 】 

主 色 调 偏 RG G204 B20 H104 S90% B 80% 
辅 色调 才 R40 G119 B12 H104 S90% B47% 
点 睛 色 才 lo G13 B57 H342 S92% B64% 
背景 色 区 Res G204 B20 H104 S90% B80% 


) 白色 


加 加 加 


加 
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图 10.52 绿色 页 面 效果 


从 图 10.52 的 主 色调 、 辅 色调 HSB 模式 的 数值 可 看 出 ， 这 两 种 颜色 只 是 在 明度 上 有 区 别 ， 其 显 
示 的 色相 与 饱和 度 是 一 样 的 。 正 绿色 是 120 度 ， 这 两 种 颜色 从 RGB 数值 上 看 ， 都 不 同 程度 地 混合 
其 他 少许 颜色 ， 因 此 离 正 绿色 稍 有 些 偏差 。 由 于 绿色 本 身 的 特性 ， 所 以 整个 网 页 看 起 来 很 安稳 舒适 。 

辅助 色 只 在 明度 上 降低 ， 让 页 面 多 了 些 层次 感 、 空 间 感 。 白 色 块 面 使 得 绿色 的 特性 发 挥 到 最 好 的 
状态 并 增强 了 视觉 节奏 感 。 点 睛 色 恰 到 好 处 ， 极 尽 诱惑 力 ， 整 个 页 面 顿 时 生动 提神 起 来 ， 增 强 了 页 面 
主题 的 表达 力 。 

【点 评 】 

整个 页 面 配色 很 少 : 最 大 色 块 的 翠绿 ， 第 二 面积 的 白色 ， 第 三 面积 的 深 绿 色 ， 但 得 到 的 效果 却 是 
强烈 的 、 显 眼 的 ， 达 到 充分 展现 产品 主题 的 目的 。 深 绿色 给 和 人 茂盛、 健康、 成熟、 稳重、 生命 、 开 阔 
的 心理 感受 。 

主 、 辅 色调 是 属于 同类 色 绿 色 系 ， 通 过 不 同 明度 的 变化 ， 能 较 递增 缓和 变化 ， 同 时 却 也 较 明显 地 
体现 出 页 面 的 色彩 层次 感 来 。 如果 不 是 通过 数值 来 分 析 判 断 ， 可 能 会 误 认为 这 两 种 颜色 除了 明度 外 有 
可 能 纯度 会 有 所 不 同 ， 这 时 适当 地 使 用 数值 模式 会 很 容易 得 到 正确 的 结论 。 


10.8.2 高 纯 绿 
【示例 】 绿 色 高 纯度 网 页 示例 截图 如 图 10.53 所 示 。 





【分 析 】 
回 主 色调 久 R152 G203 BO H75 S100% B80% 
加 ” 辅 色调 R178 G236 B5 H75 S98% B93% ( ) 白色 


回 点 睛 色 时 R46 G180 B216 Hl193 S75% B85% 

二 R255 Gl178 B54 H37 S79%% B100% 

加 背景 色 坊 R70 G66 B55 H44 S21% B27% 
HSB 数值 理 显示 60 度 为 正 黄色 ， 该 主 、 辅 色调 五 为 75 度 ， 向 绿色 倾斜 了 一 点 。 大 面积 明度 稍 
低 的 黄 绿色 为 主要 色调 ， 饱 和 度 却 非常 高 ， 达 到 了 100%， 辅 助 色 使 用 了 提高 明度 的 嫩绿 色 和 白色 ， 


.403 . 


| 


| 这 两 种 辅 色 除了 增加 页 面 的 层次 感 的 同时 ， 还 能 让 整个 页 面 配色 有 透亮 的 感觉 ， 增 强 了 绿色 的 特性 。 
| 背景 深 褐色 无 疑 把 前 景 的 所 有 纯色 烘托 得 都 耀眼 于 舞台 上 。 





医 国 





EE 
图 10.53 ”高 纯 绿 页 面 效果 


该 页 面 有 两 组 小 小 的 对 比 色 ， 一 组 是 黄 绿 与 楼 红色 ， 一 组 是 橙黄 色 与 天 蓝 色 ， 这 两 组 配色 严格 地 
来 说 不 算 对 比 色 ， 因 为 色彩 多 少 有 些 偏差 。 虽然 它 们 的 饱和 度 降低 ,但 在 这 个 页 面 中 足以 构成 了 最 响 
亮 的 色调 ， 把 整个 页 面 烘 托 得 非常 活跃 、 鲜 明 。 

【点 评 】 

主 、 辅 色调 黄 绿色 大 面积 使 用 并 不 刺 目 ， 反 而 使 得 页 面 看 起 来 很 有 朝气 、 活 力 。 适 当 运 用 不 同 纯 
度 的 不 是 相当 严格 意义 上 的 对 比 色 系 组 合 时， 通常 能 起 到 的 主要 作用 是 主 次 关系 明确 。 不 “标准 ”的 
对 比 色 系 对 比特 性 虽然 减弱 ， 页 面色 彩 看 起 来 容易 协调 、 和 柔和， 但 一 样 能 突出 主题 。 


10.8.3” 浅 绿色 


【示例 】 同 类 浅 绿色 网 页 示例 截图 如 图 10.54 所 示 。 

【分 析 】 

回 “ 主 色调 R185 G223 B139 H67 S36% B87% 

回 辅 色调 碑 Rs9 Gl78 B36 H98 S80% B70%( ) 白色 

回 点 睛 色 葡 R?23 Go B49 H347 S100% B87% 

人 jj R241 G202 B56 H47 S77% B95% 

背景 色 R185 G223 B139 H67 S36% B87% 

主 色调 绿色 属性 是 明度 很 高 的 浅 绿色 ,通常 情况 下 明度 高 饱和 度 就 降低 ,饱和 度 低 页 面色 彩 度 就 
降低 ， 加 上 大 面积 的 辅助 色白 色 ， 整 个 页 面 看 起 来 很 清淡 、 柔 和 、 宁 静 ， 甚 至 有 温馨 的 感觉 。 页 面 中 
使 用 了 渐变 的 浅 绿色 ， 使 得 整个 页 面 视 觉 上 更 加 柔和 舒适 。 

尽管 点 睛 色 只 在 主要 标志 上 出 现 ， 按 钮 也 只 有 少许 一 点 ， 但 也 给 整个 页 面 的 色彩 带 来 些 亮 笔 。 万 
其 是 红色 的 HSB 模式 的 互 数值 显示 颜色 接近 于 正 红色 ， 饱 和 度 达到 最 高 值 。 另 一 个 点 睛 色 中 黄色 ， 
在 页 面 视觉 上 呈 绿 色 与 红色 这 一 组 对 比 色 起 到 缓和 视觉 的 作用 。 因 为 在 色 轮 表 上 , 黄色 正 是 在 绿色 和 
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图 10.54” 浅 绿色 页 面 效果 


【点 评 】 

浅 绿 色 系 有 优雅 、 休 息 、 安 全 、 和 睦 、 宁 静 、 柔 和 的 感觉 。 渐 变 效果 更 能 加 深 这 种 印象 。 但 页 面 
配色 上 浅 色 过 多 时 ， 整 个 页 面容 易 呈 现 发 “ 灰 ” 的 感受 ， 这 就 需要 适量 地 添加 纯度 稍 高 的 颜色 ， 例 如 
左下 角 的 辅助 色 绿色 块 ， 适 当 的 鲜艳 的 点 睛 都 能 很 好 地 解决 这 一 问题 。 


10.8.4” 黄 绿色 
【示例 】 黄 绿色 弱 对 比 网 页 示例 截图 如 图 10.55 所 示 。 
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图 10.55 黄 绿 色 页 面 效 果 
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【分 析 】 
主 色调 岂 R149 G186 B31 H74 S83% B73% 
辅 色调 二 R56 Gol B9 H86 s90% B36% 
| 点 晴 色 坟 R16 G133 B148 HI192 S49% B58% 
| 篇 R15s G14 BI4 Ho so% B62% 
Note | 背景 色 ( ) 白色 
| 从 HSB 模式 的 数值 看 ， 主 色调 是 接近 于 黄色 的 基础 上 加 入 了 少许 绿色 ， 饱 和 度 和 明度 降低 ， 色 
| 彩 看 起 来 较 柔 和 。 辅 色调 墨绿 色 的 绿色 的 倾向 稍 高 ， 饱 和 度 也 较 高 ， 只 是 明度 降低 ， 该 色 看 起 来 踏实 
沉稳 。 

点 睛 色 红色 互 数值 为 零度 ， 呈 正 红色 ， 但 是 该 颜色 饱和 度 和 明度 降低 ， 而 红色 本 身 的 色 度 比 黄 
绿色 要 暗 不 少 ， 因 此 颜色 稳重 。 另 一 点 睛 色 蓝 绿色 ， 明 度 和 饱和 度 都 很 低 ， 在 页 面 配 色 中 似乎 没有 点 
| 晴 感觉 更 多 的 是 呈 辅 助 状态 。 

【点 评 】 

主 色调 是 相对 比较 鲜亮 的 颜色 ， 而 辅助 色 和 点 睛 色 是 属于 比较 沉稳 的 颜色 ,页 面 通过 大 小 色 块 的 
对 比 提高 视觉 的 反差 力度 ， 增 强 页 面 的 感染 力 。 由 于 整个 页 面 的 饱和 度 整 体 稍微 降低 ， 因 此 该 页 面 配 
色 较 协调 、 缓 和 。 


10.8.5 绿色 + 多 色 
【示例 】 同 类 绿色 + 多 种 点 睛 色 示 例 截 图 如 图 10.56 所 示 。 


几 加 加 





加 your 


图 10.56 绿色 + 多 色 页 面 效果 
【分 析 】 
回 主 色 调 芒 R153 G204 BO H75 S100% B80% 
辅 色调 R204 G255 B102 H80 S60% B100% 
| 回 ”点 睛 色 H60 S60% B100% 
| 大 Hls9。 s9%% Bss% 
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二 H36 sloo% B100% 
坊 Ho sl00% B78% | 
背景 色 全 R153 G204 Bo H75 S100% B80% | 
主 色调 HSB 模式 HH 数值 显示 75 度 ， 依 旧 是 色 轮 表 里 倾向 于 黄色 区 域 方位 边缘 的 绿色 ， 呈 现 出 | 
的 黄 绿色 调 。 辅 色调 在 明度 上 有 些 提 亮 ， 与 主 色调 形成 较 强 的 对 比 。 | 
点 睛 色 里 所 使 用 的 对 比 色 组 合 有 两 组 ,红色 与 绿色 ， 蓝 色 与 橙黄 色 , 其 中 黄色 是 介 于 暖色 橙黄、 
红色 ) 和 冷色 〈 绿 色 、 蓝 色 ) 的 过 渡 色 ， 也 是 调和 色 。 
【点 评 】 | 
该 网 页 配色 不 少 ， 且 还 有 两 组 对 比 色 在 内 ,但 是 页 面 配色 也 很 协调 。 原 因 之 一 ， 从 下 面 抽取 的 色 
块 可 以 看 出 来 ， 是 一 个 过 渡 柔 和 的 色 轮 表 : 以 黄色 为 中 界 一 边 是 较 浅 的 黄 绿 到 绿色 再 到 蓝 色 ， 另 一 边 
是 橙黄 再 到 红色 。 原 因 之 二 ， 点 睛 色 毕 竟 是 扮演 着 点 睛 色 的 角色 ， 有 主 色 调和 辅 色调 大 面积 的 控制 ， 
即便 再 多 些 点 睛 色 也 不 至 于 很 快 干 扰 到 页 面 的 整体 配色 。 整 个 页 面 保证 了 协调 、 不 凌乱 的 步调 ， 但 是 
又 能 把 商业 网 站 的 热闹 氛围 很 好 地 泻 染 。 此 种 配色 方法 值得 我 们 学 习 借鉴 。 


10.8.6 泛 绿色 
【示例 】 绿 色 邻 近 色 应 用 网 页 示例 截图 如 图 10.57 所 示 。 
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图 10.57 泛 绿色 页 面 效果 


[分 析 】 | 
回 主 色调 入 R123 G223 B73 HI100 S61% B87% 
回 辅 色调 。 R208 G245 B197 H106 S20% B96% 

二 R93 G214 B255 HI195 S64% B100% 
点 睛 色 才 H206 s96% B70% 

坟 H2l so0% B80% 

入 H325 so9% B47% 
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| 鼻 Hl37 sloo% B55% 
| 背景 色 R123 G223 B73 H100 S67% B87% 
。 | 主 色调 基本 上 是 属于 明度 较 高 、 凶 和 度 较 低 的 颜色 其 中 还 使 用 了 浙 变色 缓和 地 过 渡 ， 因 此 页 面 
估 看 起 来 每 服 协 调 。 主 色调 是 他 和 度 较 高 的 浴 绿 色 运用 于 背景 色 ， 几 乎 是 调节 于 整个 页 面 的 关键 色 。 如 
| 果 没有 这 一 背景 色 块 ， 整 个 页 面容 易 发 灰 。 
pte | 右边 的 粉 绿 大 块 面积 稍 多 ， 有 些 灰 的 感觉 ， 好 在 前 景 的 文章 使 用 了 色 度 明度 稍 深 的 蓝 色 压 住 ， 稍 
| 显 好 些 ， 关 键 还 是 有 白色 的 箭头 很 好 地 把 粉 绿 和 蓝 色 文字 的 色 阶 拉 开 了 距离 。 左边 的 照片 清晰 且 纯 度 
| 较 高 ， 也 对 整个 页 面 配色 起 到 一 定 的 调节 作用 。 点 畏 色 主要 是 标志 的 颜色 ， 如 果 可 以 忽略 不 计 ， 页 面 
| 配色 更 趋 于 平淡 。 
【点 评 】 
明度 较 高 、 饱 和 度 较 低 的 颜色 ， 如 果 没 有 明度 较 深 、 饱 和 度 较 高 的 颜色 进行 勾勒 或 者 点 组 ， 这 个 
页 面 配色 看 起 来 容易 发 灰 。 


10.8.7 ”绿色 + 红色 
| 【示例 】 绿 色 与 对 比 色 红色 网 页 示例 截图 如 图 10.58 所 示 。 
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图 10.58 绿色 + 红色 页 面 效果 





【分 析 】 
主 色调 蒋 R8s G1 B373 H98 S79% B69% 


辅 色调 R254 G219 B224 H351 S14% B99% 
R205 G231 B241 H197 S15% B95% 
R222 G239 B211 H96 S12% B94% 
| 回 点 晴 色 坊 R230 G33 B6l H351 S86% B90% 
| 回 背景 色 全 Rss G177 B373 H98 S79% B69% 
| 主 色调 是 有 点 黄色 倾向 的 绿色 ， 从 HSB 数值 上 可 以 看 到 也 为 98 度 ， 绿 色 特 性 较 明显 。 辅 助 色 
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则 是 3 个 浅 色 系 ， 起 到 调和 整个 页 面色 彩 的 作用 。 粉 红 和 粉 绿色 分 别 取 的 是 页 面 绿色 、 红 色 通 过 提高 
明度 而 得 ， 因 此 整个 页 面色 彩 前 后 呼应 、 配 色调 和 。 点 睛 色 红 色 的 HBS 模式 五 数值 351 度 ， 在 色 轮 
表 上 偏向 于 紫色 方位 ， 因 此 倾向 于 冷 红色 ， 色 度 上 稍 有 些 刺 目 和 艳丽 。 








绿色 的 设计 亮点 是 ， 既 用 于 导航 又 很 流畅 自然 地 融合 到 背景 ,浑然 一 体 ; 这 里 尤其 是 点 睛 色 红 色 放置 
于 背景 的 处 理 很 独到 ， 烘 托 突出 于 前 景 内 容 ， 在 众多 网 页 设计 中 并 不 多 见 。 
【点 评 】 


主 色调 绿色 和 点 睛 色 红色 所 放置 的 位 置 ， 让 页 面 导 航 区 域 和 内 容 区 域 视觉 引导 较为 分 明 : 主 色调 | 


万 ) 
) 六 





整个 页 面 的 配色 取 色 于 标志 色 ， 量 身 定做 的 感觉 。 适 当地 运用 对 比 色 有 强调 的 感觉 ， 但 页 面 配色 | 


处 理 上 并 不 强烈 、 炊 眼 ， 因 为 使 用 了 白色 及 其 相应 的 提高 明度 的 粉色 做 视觉 的 缓和 处 理 。 
10.8.8 小 结 


绿色 是 缓和 健康 的 颜色 ，HSB 数值 色相 为 120 度 时 是 正 绿色 。 通 过 以 上 实例 可 以 看 到 ， 偏 向 
于 黄色 方位 的 绿色 运用 得 最 多 ,也 就 更 受到 大 众 的 欢迎 。 纯正 的 正 绿色 在 视觉 感受 上 可 能 稍微 显得 有 
些 色 度 较 低 的 生硬 ， 配 色 难 度 稍 大 。 不 同 的 黄 绿色 饱和 度 、 明 度 的 不 同 变化 可 以 表达 不 同 主题 的 页 面 
效果 。 


点 睛 色 可 以 是 几 种 ， 也 可 以 是 不 同 对 比 色 的 组 合 ， 有 的 起 到 丰富 并 活跃 页 面 配 色 的 视觉 节奏 , 有 | 


的 起 到 调和 整体 页 面 配色 的 作用 。 辅 助 色 通常 是 同类 色 系 或 者 邻近 色 系 , 起 到 辅助 并 烘托 主 色调 的 作 
用 。 辅 色调 和 主 色 调 分 别 在 不 同 的 页 面 作为 唯一 高 纯度 色 时 ， 能 够 起 到 挽救 于 整个 页 面 发 灰 的 作用 。 

当 整 个 页 面 配 色 明 度 太 高 色 度 降低 时 ,页 面容 易 呈 现 发 灰 的 感觉 可 以 适当 地 使 用 少许 纯度 较 高 
或 者 明度 较 低 的 色 系 来 加 以 改善 。 


10.9 黄色 页 面 配 色 


黄色 是 阳光 的 色彩 ， 具 有 活泼 与 轻快 的 特点 ， 给 人 十 分 年 轻 的 感觉 。 象 征 光 明 、 和 希望 、 高 贵 、 愉 
快 。 浅 黄色 表示 和 柔弱， 灰 黄色 表示 病态 。 它 的 亮度 最 高 ， 和 其 他 颜色 配合 很 活泼 ， 有 温暖 感 ， 具 有 快 
乐 、 希 望 、 智 慧 和 轻快 的 个 性 ， 有 和希 望 与 功名 等 象征 意义 。 黄 色 也 代表 着 土地 、 象 征 着 权力 ， 并 且 还 
具有 神秘 的 宗教 色彩 。 

黄色 的 性 格 冷漠 、 高 做、 敏感 ， 具 有 扩张 和 不 安宁 的 视觉 印象 。 浅 黄色 系 明朗 、 愉 快 、 希 望 、 发 
展 ， 它 的 雅致， 清 更 属性 ， 较 适合 用 于 女性 及 化 妆 品 类 网 站 。 中 黄色 有 崇高 尊贵、 辉煌 、 注 意 、 扩 
张 的 心理 感受 。 深 黄色 给 人 高 贵 、 温 和 、 内 敛 、 稳 重 的 心理 感受 。 


10.9.1 黄色 
【示例 1】 黄 色 系 同类 色 网 页 示例 截图 如 图 10.59 所 示 。 
【分 析 】 
主 色调 R255 G255 B51 H60 S80% B100% 
回 畏 色 调 力 时 
回 ”点睛 色 ( ) 白色 


加 


背景 色 R255 G255 B51 H60 S80% B100% 
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图 10.59 黄色 页 面 效 果 


黄色 是 所 有 彩色 中 明度 最 高 的 颜色 。 图 10.59 看 到 HSB 模式 的 了 数值 是 60 度 ， 正 是 正 黄色 , 但 
RGB 数值 中 加 入 了 B 蓝 色 数 值 为 31， 因 此 降低 了 HSB 的 饱和 度 S 为 80%， 但 是 大 面积 的 黄色 仍 使 
得 该 页 面色 彩 明亮 显眼 。 

辅助 色 是 纯 黑色 ， 非 色彩 明度 最 低 的 颜色 。 大 面积 显眼 的 正 黄色 有 黑色 的 线条 压制 , 黄色 顿时 显 
得 沉稳 ， 页 面 增添 内 容 感 。 白 色 虽 然 是 点 睛 色 ， 但 由 于 非 色彩 的 白色 与 黄色 的 明度 最 高 ,因此 这 里 似 
平 没 有 起 到 “点 睛 ”的 作用 。 

【点 评 】 

当 鲜 度 、 明 度 高 的 背景 色 与 前 景 辅助 色 暗 度 低 的 黑色 在 明度 形成 较 强烈 的 对 比 时 ， 艳 度 降低 ， 较 

能 协调 视觉 。 整 个 页 面 配色 单纯 ， 却 也 不 简单 ， 形 成 另 一 种 设计 风格 。 
【示例 2】 黄 色 同 类 色 网 页 示例 截图 如 图 10.60 所 示 。 





图 10.60 ”黄色 同类 色 页 面 效果 
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| 

【分 析 ] 
回 主 色调 ， R255 G221 B0 H52 S100% B100% | 
辅 色调 全 R250 G212 B0 H51 S100% B96% | 

点 睛 色 R252 G241 B0 H57 S100% B100% ( ) 白色 | 

回 背景 色 R255 G221 B0 H52 S100% B100% | 

该 页 面 的 配色 很 单纯 ， 是 同类 色 的 黄色 不 同 明度 颜色 ， 页 面 看 起 来 干净、 单纯 。 点 哺 色白 色 、 关上 匡 2XC2 汪 
黄色 在 深 色 黄色 背景 下 比较 显眼 ， 且 在 最 中 间 位 置 ， 是 整个 页 面 中 的 高 调 部 分 。 这 3 种 黄色 ， 明 度 都 | 
很 高 ， 只 有 背景 辅助 色 明度 稍 低 ， 点 睛 黄色 H 色相 是 3 种 颜色 中 黄色 倾向 最 高 的 ， 为 57 度 ， 而 60 
度 是 正 黄色 ， 因 此 明度 也 是 最 高 的 ， 充 分 地 发 挥 其 点 睛 色 的 作用 。 

背景 色 和 前 景色 只 在 色相 上 和 明度 上 有 非常 微妙 的 变化 , 却 也 很 巧妙 ,形成 了 变化 较 明显 的 空间 
层次 感 ， 削 弱 了 同类 色 易 产生 的 单调 感 。 点 睛 色白 色 让 层次 感 更 明显 。 

【点 评 】 

同类 色 的 属性 使 得 整个 页 面 非常 和 谐 ， 可 以 根据 不 同 的 主题 来 设计 配色 。 可 以 通过 明度 、 饱 和 度 
的 不 同 变化 来 加 强 页 面 配 色 的 层次 感 。 


10.9.2 中 黄色 
【示例 】 中 黄色 应 用 网 页 示例 截图 如 图 10.61 所 示 。 
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10.61 ”中 黄色 页 面 效果 


【分 析 】 

回 主 色调 入 R255 G204 B0 H48 S100% B100% 

辅 色调 。 R204 G225 B102 H80 S60% B100% | 
坊 R204 Go Bo Ho sloo B80% | 

点 睛 色 ( ) 白色 

回 背景 色 久 有 R255 G204 B0 H48 S100% B100% | 

背景 中 黄色 上 点 缀 多 种 艳 度 较 高 的 颜色 ， 都 是 属于 跳跃 的 颜色 ， 演 染 整 个 网 站 的 热闹 环境 气氛 ， 
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国生 
| 符合 该 网 站 的 设计 主题 。 加 之 商品 图 片 多 种 亮 邦 的 色泽 混合 在 同一 页 面 上 ,点睛 色白 色 在 这 里 起 到 了 
| 调和 多 种 颜色 的 作用 。 
| 从 HSB 数值 上 看 ， 该 中 黄色 的 明度 和 人 饱和 度 呈 最 高 值 ， 属 于 明亮 耀眼 的 颜色 。 辅 助 色 是 黄 绿 色 
国内 | 和 红色 ， 黄 绿色 在 中 黄 背景 下 呈 冷 色调 ， 轻 快 单 洲 的 亮色 ， 红 色 的 HSB 数值 蔚 色 相 上 看 是 正 红色 ， 
~ 明度 稍 低 ， 这 里 属于 厚重 沉稳 的 颜色 ， 在 中 黄色 背景 下 呈现 暖色 调 ; 背景 中 黄色 在 黄 绿色 和 红色 两 者 


Note | 中 这 时 呈 中 间 色 ， 是 很 好 的 整体 页 面 视觉 过 渡 色 。 
【点 评 】 


当 背 景色 起 到 中 间 色 的 作用 时 , 页面 少量 冷暖 色彩 搭配 较 容易 调和 。 通常 商品 网 站 意 在 泻 染 热闹 
| 气氛 ， 比 较 适合 活泼 跳跃 、 色 彩 绚丽 的 配色 方案 ,但 色彩 的 调和 难度 较 大 。 


| 10.9.3 黄 绿色 














【示例 】 黄 绿色 调 网 页 示例 截图 如 图 10.62 所 示 。 





Bmwve 


10.62 黄 绿色 页 面 效果 


【分 析 】 

主 色调 人 9 R255 G255 B51 H60 S80% B100% 

辅 色调 者 黑色 

点 晴 色 钢 R159 G140 B64 H48 S60% B62% 

背景 色 R255 G255 B51 H60 S80% B100% 

主 色调 为 黄 绿 色 ， 单纯 来 看 ， 黄 绿色 是 通常 的 暖色 的 起 始 色 、 色 彩 中 亮度 最 高 的 黄色 与 冷色 的 起 
始 色 、 绿 色相 结合 而 得 ， 因 此 该 颜色 看 起 来 非常 明快 清新 。 处 于 辅助 色 的 非 色彩 黑色 ， 中 间 的 点 组 色 
是 主 色调 黄 绿色 ， 很 容易 让 人 一 时 以 为 该 颜色 就 是 点 睛 色 。 实 际 主 色调 黄 绿色 的 明度 非常 高 ， 饱 和 度 
这 时 也 很 高 ， 在 明度 最 低 的 黑色 衬 映 下 就 异常 显眼 。 

背景 色 使 用 略 有 些 渐变 的 效果 ， 正 是 黄 绿 和 黑 ( 灰 ) 颜色 的 柔和 过 渡 ， 页 面 调和 。 点 睛 色 在 这 里 
混 色 较 多 ，RGB 、HSB 数值 差距 都 不 大 ， 因 此 颜色 偏 灰色 阶 ， 仔 细 分 析 是 黄 绿色 与 少许 黑色 混合 
| 得 ， 起 到 了 调和 背景 色 与 辅助 色 明度 差异 过 大 的 作用 。 
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| 

【点 评 】 | 

点 睛 色 可 以 是 少许 耀眼 的 颜色 ， 也 可 以 是 少许 协调 于 视觉 的 混合 灰色 , 无 论 是 耀眼 的 颜色 还 是 谦 | 
进 沉稳 的 灰色 ， 都 是 不 可 缺少 的 角色 ， 有 着 不 可 蔡 代 的 作用 。 | 
整个 页 面 配 色 较 单纯 ， 只 有 3 种 色 ， 非 色彩 来 说 分 别 起 到 黑 (辅助 黑 ) 白 〈 主 色 黄 绿 ) 灰 点睛 | 
混合 色 ) 的 作用 ， 所 以 页 面 配色 较 有 层次 感 ， 并 不 显得 单调 。 | 


10.9.4 黄色 + 红色 
【示例 1】 黄 色 与 邻近 色 红色 网 页 示例 截图 如 图 10.63 所 示 。 
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10.63 ”黄色 + 红色 页 面 效果 


【分 析 】 

主 色调 R249 G244 B0 H59 S100% B98% 

辅 色调 葬 R238 G154 B0 H39 S100% B93% 

点 晴 色 坊 R223 Go Bl? H357 s100% B87% 

背景 色 “ R249 G244 B0 H59 S100% B98% 

图 10.63 的 三 组 色 中 HSB 数值 的 B 明度 虽然 都 有 些 变化 ， 但 S 饱和 度 分 毫 没 有 受到 影响 ， 仍 都 
呈 最 高 值 100%， 因 此 页 面 配色 异常 耀眼 。 好 在 其 间 有 少量 不 同 明度 饱和 度 的 红色 系 色 块 做 压制 ， 页 
面 显得 沉稳 许多 ， 页 面色 彩 层次 也 丰富 了 许多 ， 块 面 交织 设计 富有 节奏 韵律 美 ， 却 也 有 人 雀跃 的 感觉 。 

页 面 照 片 人 物 也 经 过 了 双色 调处 理 ， 与 页 面色 彩 风格 一 致 。 整 个 页 面 属于 明暗 反差 较 大 的 色调 ， 
所 以 页 面 响亮 明快 ， 极 赋 视 觉 冲击 力 、 感 染 力 。 

【点 评 】 

耀眼 的 颜色 有 深 色 块 压制 ， 也 是 很 好 的 调和 方法 。 该 页 面 里 的 不 少 小 色 块 混合 了 上 暗 灰 色 ， 因 此 页 | 
面 饱和 度 刺 激 程度 得 到 少许 降低 并 调和 。 同 类 色 系 、 类 似 色 系 不 同 纯度 明度 的 深浅 变化 措 配 ， 增添 现 | 
代 美感 。 

【示例 2】 高 纯度 黄色 邻近 色 配 色 (黄色 + 红色 ) 应 用 网 页 示例 截图 如 图 10.64 所 示 。 
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图 10.64 ”高 纯度 黄色 页 面 效果 


【分 析 】 

回 主 色调 者 R255 G203 B0 H48 S100% B100% 

辅 色调 |) R255 G224 B1 H53 S100% B100% 

者 R255 Go Bo Ho sl00% Bl00% (白色 

点 睛 色 R255 G255 B0 H60 S100% B100% 

背景 色 包 R255 G203 B0 H48 S100% B100% 

全 页 选取 的 几 个 色彩 组 合 是 高 纯度 、 高 明度 的 邻近 色 正 黄 、 淡 黄 〈 这 里 的 淡 黄 色 不 是 指 浅黄 色 ， 
而 是 色彩 颜料 色 里 的 称呼 ) 、 中 黄 及 正 红色 。 
| 黄色 是 色彩 系 里 明度 最 高 的 耀眼 色 ，HSB 数值 H 色相 60 度 是 正 黄色 ,特性 越 高 明度 越 高 。H 色 
| 相 度 往 60 度 前 是 接近 红色 ， 而 红色 明度 相 较 于 黄色 低 ， 背 景色 HSB 数值 理 色相 为 48 度 ， 往 红色 靠 
近 ， 因 此 色 度 较 深 ， 呈 现 为 中 黄色 。 使 用 中 黄 背 景 正 是 烘托 突出 前 景 的 淡 黄 色 。 淡 黄色 的 前 景 上 设计 
少许 中 黄色 带 进入 ， 页 面 的 色彩 层次 感 生动 了 不 少 。 

另 一 个 辅助 色 红色 HSB 数值 的 五 色相 是 0 度 ， 显 示 正 红色 且 高 纯度 、 高 亮度 ， 放 在 最 显眼 的 标 
志 广告 区 域 ， 实 现 视 觉 引 导 作 用 ， 主 次 感 增强 了 。 

白色 也 是 辅助 色 三 色 之 一 ， 在 顶部 面积 较 大 的 使 用 ， 使 整个 页 面 的 纯度 缓和 了 许多 ， 起 到 提 亮 并 
拉 开 空间 的 作用 。 点 睛 色 用 于 导航 栏 ， 提 示 导 航 区 域 的 醒目 与 重要 性 。 

【点 评 】 
| 高 纯度 、 高 明度 的 颜色 调子 耀眼 响亮 ， 通 常 对 视觉 的 刺激 程度 较 大 。 邻 近 色 由 正 黄 到 最 后 的 正 红 
| 色 是 色 轮 表 的 协调 过 渡 色 ， 因 此 页 面 调和 。 邻 近 色 与 同类 色 一 样 ， 是 调和 色 ， 但 较 同类 色 更 生动 、 更 
多 变化 。 


10.9.5 黄色 + 蓝 色 
| 【示例 】 黄 色 低 纯 度 配色 应 用 网 页 示例 截图 如 图 10.65 所 示 。 
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图 10.65 黄色 + 蓝 色 页 面 效 果 


【分 析 】 
回 主 色调 和 R247 G209 B48 H49 S81% B97% 
辅 色调 R252 G230 B119 H50 S53% B99% 
Rl Glss B24 Hl89 S95% B84% 
者 Rl24 Ge B24 H26 ssl% B49% 
回 点 晴 色 力 R251 Go Bls H356 Sl00% B98% (白色 
背景 色 人 R247 G209 B48 H49 S81% B97% 


办 


到 








该 页 面 是 属于 纯度 较 低 的 多 组 配色 页 面 ， 配 色 难 度 较 大 ， 但 是 按 主 色调 、 辅 助 色 、 点 睛 色 来 细 细 | 


分 析 就 会 发 现 容易 多 了 。 标 志 是 红色 ， 下 面 的 绿色 是 红色 的 对 比 色 ， 目 的 是 突出 标志 的 作用 ， 同 时 也 
是 黄色 与 蓝 色 的 中 间 视 觉 过 渡 色 。 

主 色调 的 中 黄色 , 从 RGB 数值 B 明度 48 来 看 , 提高 了 明度 , RGB 数值 的 变化 HSB 也 相应 变化 ， 
该 色调 纯度 降低 ， 黄 色 的 耀眼 特性 相应 缓和 。 

该 页 面 辅助 色 比 较 多 ， 这 里 选 了 主要 的 3 种 浅黄 、 浅 蓝 、 棕 红色 ， 明 度 纯度 不 同 的 变化 来 分 析 。 
浅黄 色 的 RGB 3 个 数值 接近 ， 因 此 呈现 偏 灰 的 柔和 状态 。 正 蓝 色 的 RGB 数值 了 为 0，G 为 255，B 
为 255， 从 该 蓝 色 RGB 数值 上 看 ， 混 合 了 及 红色 11，G 的 绿色 数值 较 低 ，B 蓝 色 的 数值 较 高 ， 因 此 
饱和 度 降 低 ,， 颜色 呈 浅 色调 。 从 棕 红 色 的 RGB 的 三 数值 上 看 ，R 的 数值 最 高 为 124, 加 入 了 对 比 色 G 





绿色 67， 因 此 颜色 变 暗 发 乌 ， 调 入 了 适量 B 蓝 色 24， 因 此 该 颜色 饱和 度 亮度 降低 ， 也 是 该 页 面 沉稳 | 


的 主要 色调 ， 牵 制 艳 度 较 高 的 几 种 颜色 。 

点 睛 色 的 HSB 数值 也 色相 为 356 度 ， 几 乎 呈正 红色 ， 只 是 调 入 了 少许 B 蓝 色 18， 因 此 颜色 在 明 
度 上 稍 偏 暗 。 另 一 点 睛 色白 色 的 作用 除了 提 亮 整个 页 面 ， 同 时 也 突出 标志 图 像 。 

【点 评 】 

多 种 辅助 色 分 量 相当 冷暖 搭配 时 ， 有 饱和 度 稍 低 的 主 色调 牢 牢 把 握 住 ， 整 个 页 面容 易 调 和 。 由 于 
页 面 颜色 较 丰富 ， 点 睛 色 在 这 里 起 到 拉 开 各 个 色彩 层次 的 作用 ， 明 确 主 次 角色 。 
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。 | 黄色 是 色彩 系 里 明度 最 高 的 杷 眼 睹 色 ， 尤 其 是 HSB 数值 色相 为 60 度 正 黄色 时 ， 它 的 特性 越 
国内 明显 。 由 于 黄色 的 特性 ， 在 页 面 配色 时 可 适当 添加 明度 较 深 的 颜色 ， 色 阶层 拉 开 ， 并 起 到 协调 刺眼 的 

| 拖 度 作用 。 黄 色 他 和 度 、 明 度 的 不 同 变 化 传达 不 同 的 意义 和 作用 。 
7 无论 是 高 纯 皮 、 低 辣 度 ， 还 是 多 色 河 的 页 面 配色 ， 白 色 起 到 关键 的 作用 。 点 哺 色 不 定 就 是 非常 
| 显眼 的 颜色 ， 也 有 起 到 调和 整体 页 面 配色 的 作用 。 中 间 色 通 常 被 大 面积 的 使 用 为 主 色调 、 辅 助 色 ， 是 
| 调和 辅助 色 〔 有 可 能 是 同时 几 种 与 点 畏 色 〈 有 可 能 是 几 种 ) 的 色彩 ， 是 调和 色 、 调 和 方法 的 关键 


| 10.10 ”楼 色 页 面 配色 


| 橙色 具有 轻快 、 欢 欣 、 收 获 、 温 声 、 时 尚 的 效果 ， 是 快乐 、 喜 悦 、 能 量 的 色彩 。 在 整个 色谱 里 ， 
| 橙色 具有 兴奋 度 ， 是 最 耀眼 的 色彩 。 给 人 以 华贵 而 温暖 ， 兴 奋 而 热烈 的 感觉 ， 也 是 令 人 振奋 的 颜色 。 
| 具有 健康 、 富 有 活力 、 勇 敢 自由 等 象征 意义 ， 能 给 人 有 上 庄严、 尊贵、 神秘 等 感觉 。 橙色 在 空气 中 的 穿 
| 透 力 仅 次 于 红色 ， 也 是 容易 造成 视觉 疲劳 的 颜色 。 

| 在 网 页 颜色 里 ， 橙 色 适 用 于 视觉 要 求 较 高 的 时 尚 网 站 ， 属 于 注目 、 芳 香 的 颜色 ， 也 常 被 用 于 味觉 
较 高 的 食品 网 站 ， 是 容易 引起 食欲 的 颜色 。 


10.10.1 橙 色 
【示例 】 橙 色 网 页 示例 截图 如 图 10.66 所 示 。 
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10.66 橙色 页 面 效 果 


【分 析 】 
| 回 主 色调 鲍 R252 G124 BO H30 S100% B100% 
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辅 色调 天 R237 G101 B107 H30 S55% B93% 
点 晴 色 园 Rol G14 B54 HI115 S62% B55% | 
坊 Ro G8 Bls9 H208 S100% B62% 
人 R15 G143 Bl91 H218 S40% B75% 
背景 色 ( ) 白色 
主 色调 橙色 HSB 数值 的 H 表示 色相 ， 显 示 的 是 30 度 ， 而 30 度 正 是 橙色 显示 特征 最 标准 的 颜 
色 一 一 正 橙色 。 饱 和 度 和 亮度 同时 达到 最 高 值 ， 因 此 整个 页 面 的 视觉 刺激 是 极其 耀眼 强烈 的 。 

这 里 选取 了 3 种 面积 相当 又 是 整个 页 面 使 用 得 最 少 的 颜色 为 点 睛 色 , 使 页 面 生动 的 同时 又 运用 于 | 
导航 位 置 ， 从 而 达到 突出 主题 的 效果 。 从 HSB 数值 上 看 它们 的 明度 纯度 相对 较 低 ， 与 明度 纯度 较 高 
的 背景 正 橙色 形成 鲜明 的 对 比 。 

通过 范围 较 大 的 背景 白色 、 前 景 图 片 灰 白色 和 小 细节 前 景 白色 文字 制造 出 明快 气氛 的 同时 ,又 呼 
应 统一 于 整个 页 面 。 辅 助 色 在 这 里 是 橙色 与 白色 的 过 渡 色 。 

【点 评 】 

饱和 度 与 纯度 很 高 特性 明显 的 颜色 , 在 达到 视觉 冲击 力 的 同时 ， 可 适当 采用 少许 对 比 色调 和 缓和 
于 视觉 ， 从 而 削弱 视觉 的 疲劳 度 。 


10.10.2 ” 深 楼 色 
【示例 】 深 橙 红色 网 页 示例 截图 如 图 10.67 所 示 。 
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图 10.67 深 橙色 页 面 效 果 
【分 析 】 
回 主 色调 志 R250 G119 B41 H22 S84% B98% 
回 辅 色调 志 R7 G29 B95 H225 S93% B37% 
| G35 B31 HI S84% B75% 
[ Ra G131 B146 H224 S31% B57% 
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点 睛 色 重 是 色 【 ) 白色 
回 ”背景 色 才 R250 G119 B41 H22 S84% B98% 
| 从 色相 度 中 可 以 知道 0 度 为 正 红色 ，30 度 为 正 橙色 ， 而 主 色调 的 HSB 数值 了 显示 22 度 可 知 ， 
国内 “| 该 深 格 红 色 是 枞 色 基础 上 加 入 少许 邻近 色 红色 ,整体 上 降低 了 明度 而 得 , 因为 红色 本 身 较 栓 色 明度 低 ， 
因此 这 里 橙 红 色 的 明度 呈现 出 较 低 状 态 。 这 个 页 面 背 景色 运用 了 纹样 ， 是 以 目前 选取 的 主 色调 颜色 和 
加 3 tx 红色 结合 而 得 ， 使 得 明度 稍 暗 。 
辅助 色 选 取 了 明度 相对 于 主 色调 更 低 的 3 种 颜色 ,前 面 两 种 饱和 度 都 较 高 , 最 后 一 种 灰 蓝 色 由 于 

明度 较 高 因此 饱和 度 降低 ， 是 主 色调 与 前 面 两 种 辅助 色 的 协调 色 。 

从 数值 上 看 ， 主 色调 也 就 是 背景 色 的 饱和 度 较 高 ， 但 是 由 于 降低 了 明度 ， 颜 色 变 得 较 沉稳 。 辅助 
色 RGB 数值 显示 ， 添 加 了 适量 的 其 他 颜色 ，G 和 B 数值 区 别 不 大 ， 因 此 饱和 度 降低 ， 颜 色 趋 于 柔和 
稳定 。 点 睛 色 的 加 入 和 提 亮 ， 使 页 面 视觉 效果 得 到 强化 。 

【点 评 】 

前 景色 通常 要 较 明 显 地 区 别 于 背景 色 ， 达到 台 前 的 宣传 目的 。 当 饱和 度 较 低 的 前 景色 与 背景 色 变 
化 不 明显 时 ， 形 成 的 是 另外 一 种 柔和 统一 的 效果 。 


10.10.3 ” 浅 楼 色 
【示例 】 浅 橙色 同类 色 网 页 示例 截图 如 图 10.68 所 示 。 
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10.68 ” 浅 橙色 页 面 效果 


【分 析 】 

主 色调 R252 G220 B174 H35 S31% B99% 

回 辅 色调 全 R249 G159 B25 H36 S90% B98% 

点 睛 色 ( ) 白色 

加 ”背景 色 R252 G220 B174 H35 S31% B99% 

从 主 色调 和 辅 色调 在 HSB 数值 HH 显示 的 数值 是 36 可 以 看 出 ， 该 页 面色 调 是 在 同一 种 检 色 的 基 
础 上 只 在 明度 上 发 生 了 变化 。 由 于 主要 色调 是 浅 橙色 ， 明 度 越 高 饱和 度 越 低 ， 页 面 上 减弱 了 饱和 度 较 
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| 
高 的 橙色 特性 ， 整 个 网 页 呈现 出 柔和 自然 稍 有 些 发 灰 的 调子 。 | 
该 网 页 是 在 橙色 这 一 个 颜色 上 做 不 同 明度 黑白 灰色 阶 的 柔和 变化 ,属于 单 色调 , 配色 非常 的 单 | 
纯 。 色 阶 平稳 ， 同 时 存在 着 不 够 醒目 的 状态 。 白 色 在 这 里 是 起 到 了 拉 开 主 色调 和 辅 色调 空间 距离 ， | 
增强 辅 色调 栖 色 的 特性 ， 使 整个 稍 许 有 些 发 灰 的 页 面 明快 了 不 少 。 但 也 由 于 白色 属于 非 色 彩 ， 只 在 | 
明度 上 呈 最 高 数值 而 无 彩 度 , 不 能 给 页 面 带 来 彩 度 所 具有 的 鲜 活 靓 丽 的 感觉 另 一 方面 却 也 呈现 出 质 | 
朴 的 感受 。 
【点 评 】 | 
同类 色 是 在 同一 色相 中 不 同 的 明度 颜色 变化 。 因 此 这 类 颜色 相对 其 他 类 别 颜色 来 说 明净 而 单纯 ， | 
配色 上 较 容易 达到 协调 统一 ， 但 也 容易 显得 单调 。 
初 看 该 页 面 配色 协调 舒服 ， 但 看 多 了 的 确 有 些 单调 乏味 的 感觉 ， 这 也 是 同类 色 拱 配 的 特性 。 同 时 
由 于 运用 了 渐变 色 这 一 调和 方法 ， 该 页 面 同时 占有 了 前 面 提 到 的 4 种 色彩 中 的 调和 方法 的 两 种 ， 整 个 
页 面 呈 现 出 调和 中 的 调和 是 毋庸 置 疑 的 ， 但 也 同时 显得 有 些 单调 ， 没 有 色彩 亮点 。 | 


10.10.4 ”黄色 + 楼 色 + 楼 红色 
【示例 】 橙 色 系 邻 近 色 网 页 示例 截图 如 图 10.69 所 示 。 





What do Tide* & 
Desperate Housewives 上 | 
Have in Common? 








| 

| 

! 

图 10.69 黄色 + 橙色 十 橙 红色 页 面 效果 | 

【分 析 】 

回 主 色调 入 R255 G105 B48 H30 S80% B100% | 

回 辅 色调 旬 R237 G211 B129 H46 S46% B93% ( ) 白色 | 
点 睛 色 狗 R255 G10 Bo H24 S100% B100% | 

回 背景 色 全 R255 G105 B48 H30 S80% B100% | 

页 面 第 一 眼看 上 去 似乎 色调 上 变化 很 多 , 但 该 网 页 的 色彩 构成 主要 是 由 黄色 和 橙色 这 两 种 邻近 色 | 
构成 的 ， 通 过 不 同 的 明度 和 纯度 的 变化 而 得 到 更 为 丰富 的 色 阶 ， 它 们 是 浅黄 色 、 黄 色 、 橙 色 、 橙 红 通 
过 不 同 的 形状 面积 ， 位 置 变化 而 得 。 从 HSB 数值 中 的 瑟 可 以 看 出 属于 暖色 范畴 ，3 个 色相 的 倾向 不 
是 很 明显 ， 以 至 于 色彩 呈现 较 规律 、 缓 和 。 由 于 不 同 数值 的 明度 表达 , 纯度 也 做 出 了 不 同 的 数值 变化 。 
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| 。”。 浅 色 在 这 里 主要 起 到 调和 主 色调 和 点 睛 色 的 色彩 过 渡 作用 。 点 睛 色 在 这 里 起 到 强调 整个 页 面 的 华 
| 丽 感 ， 增 强 整个 页 面 彩 度 的 作用 。 
| 【点 评 】 
鲜 内 | 橙色 与 邻近 色 黄 、 红 瞬 色调 的 措 配 组 合 , 是 一 种 简单 又 安全 的 方法 , 视觉 韵律 上 处 理 得 井然 有 序 。 
”| 整个 页 面 看 起 来 艳 泽 华丽 、 新 鲜 充 满 活力 的 感觉 ， 符 合 Tide 这 一 主题 所 要 表达 的 目的 。 


一 本 10.10.5 橙色 + 蓝 色 


【示例 】 橙 色 系 对 比 色 应 用 网 页 示例 截图 如 图 10.70 所 示 。 
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图 10.70 ”橙色 + 蓝 色 页 面 效果 


【分 析 】 
| 加 ” 主 色调 @ R255 G110 BO H26 S100% B100% 
| 辅 色调 ( ) 白色 

回 点睛 色 【 RO G160 B200 H192 S100% B76% 

回 ”背景 色 【 R255 G110 BO H26 S100% B100% 
| HSB 数值 中 的 瑟 色 相 显 示 主 色调 森 红 色 为 26， 因 为 正 红色 的 联 为 0,， 正 橙 联 为 30， 主 色调 橙 红 
| 色 是 往 0 偏 移 而 得 。 正 蓝 色 是 240， 而 该 点 睛 色 蓝 色 为 192， 往 绿 度 偏 移 ， 在 RGB 中 的 数值 G160 也 
| 能 看 出 来 ， 因 此 蓝 色 的 特性 不 是 很 强 。 但 由 于 橙 红色 的 明度 和 饱和 度 达 到 最 高 值 ， 因 此 尽管 蓝 色 不 是 
正 蓝 ， 但 它 的 特性 得 到 了 很 大 程度 的 发 挥 。 

此 种 橙 蓝 对 比 色 中 的 蓝 色调 配 , 比较 少见 , 让 人 很 容易 记 住 它 。 而 检 红 色 的 饱和 度 明度 都 非常 高 ， 
刺激 度 强 ， 属 于 让 人 不 可 久 视 的 颜色 。 介 于 橙 红 色 和 蓝 色 之 间 ， 与 蓝 色 面 积 相 当 的 白色 ， 起 到 调和 对 
比 色 林 红 与 蓝 色 之 间 关 系 的 作用 。 

【点 评 】 

这 组 对 比 色 通过 使 用 的 面积 位 置 的 不 同 来 反映 主 次 之 间 的 关系 。 对 比 色 能 相互 强烈 地 突出 色彩 特 
| 性 。 这 组 对 比 色 属于 非常 能 突显 个 性 的 颜色 。 


.420 。 


第 10 章 网 页 色彩 刷 计 一 水 | 


10.10.6 楼 色 + 绿 色 
【示例 】 橙 色 系 低 对 比 度 应 用 网 页 示例 截图 如 图 10.71 所 示 。 





【分 析 】 
主 色调 碑 R206 G103 B2 H30 S99% B81% 
回 辅 色调 全 Rl8s G155 B0 H49 S100% B74% 
R254 G196 B54 H43 S79% B99% 
点 睛 色 久 R255 G152 B1 H36 S99% B100% 
R255 G204 B1 H48 S99% B100% 
回 背景 色 例 R206 G103 B2 H30 S99% B81% 
如 果 不 看 数值 参数 ， 直 观 分 析 这 是 一 组 纯度 较 低 的 颜色 。HSB 数值 HH 显示 主 色调 为 正 橙色 ， 而 
黄 绿色 的 明度 较 低 且 色 相 倾 向 不 够 明确 ,加 之 背景 有 少许 的 暗 检 色 纹样 ， 整 个 页 面 没有 高 亮度 白色 点 
组 衬托 ， 使 得 纯度 的 彩 度 不 够 确切 ， 就 很 容易 造成 该 页 面 纯度 较 低 的 错觉 。 
整个 页 面 最 亮 的 颜色 除了 “书本 ”最 亮色 浅黄 色 外 ， 就 是 点 睛 色 黄色 了 。 我 们 知道 黄色 是 所 有 彩 度 
色 中 明度 最 高 的 颜色 , 不 同 明度 纯度 的 黄色 系 让 整个 页 面 明亮 了 不 少 , 它 是 整个 页 面 明度 色 阶 的 最 高 调 。 
黄 绿色 的 出 现 ， 让 本 只 有 邻近 色 的 栖 色 系列 多 了 些 内 容 ， 页 面 配色 丰富 不 少 、 视 觉 节 奏 多 了 些 变化 。 
【点 评 】 
这 类 颜色 的 组 合 随 着 不 同色 阶 明度 的 变 暗 ， 整 个 页 面 没 有 白色 衬托 , 制造 出 另外 一 种 古典 的 环境 
氛围 ， 有 如 娓 九 道 来 的 故事 场景 ， 也 是 一 种 不 错 的 主题 配色 方法 。 本 页 面 的 配色 设计 亮点 是 一 一 无 白 
色 设 计 。 


10.10.7 ”楼 红色 + 绿色 
【示例 】 楼 色 系 高 纯度 高 对 比 度 应 用 网 页 示例 截图 如 图 10.72 所 示 。 
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图 10.72 ” 橙 红色 + 绿 色 页 面 效果 


【分 析 】 
主 色调 乡 R255 Glo BO H24 S100% B100% 
| 辅 色调 人 R255 G204 B0 H48 S100% B100% 
| 点 晴 色 蒋 Ro G204 BO Hl20 S100% B80% 
| 三 R51 G204 B255 H195 S80% B100% ( ) 白色 
| 背 丸 色 例 R255 G102 BO H24 S100% B100% 
| 黄色 是 中 间 色 ， 起 到 过 渡 对 比 色 作 用 ， 在 这 组 色 里 属于 调和 色 。 蓝 色 出 现在 产品 图 案 上 ， 引 导 主 
| 次 关系 ， 增 强 视觉 的 注目 点 。 
| 与 上 组 的 橙色 绿色 相 比 ， 这 组 颜色 强烈 而 刺激 ， 色 彩 倾向 无 疑 明 确 了 很 多 。 主 色调 橙 红 色 往 红色 
| 倾向 ， 而 红色 的 对 比 色 是 绿色 ， 因 此 整 组 颜色 有 强烈 的 对 比 效果 。 从 HSB 数值 HH 上 看 ,除了 蓝 色 外 ， 
其 余 几 种 颜色 纯度 都 非常 高 ， 加 上 又 是 近 于 红 绿 对 比 色 。 页 面 的 刺激 强度 是 可 想 而 知 的 强烈 。 
【点 评 】 
橙色 是 容易 引起 食欲 的 颜色 , 在 这 里 得 到 了 较 充 分 的 应 用 。 非 色彩 的 白色 和 黑色 在 这 里 起 到 了 非 
常 重 要 的 作用 ， 拉 大 了 色彩 色 阶 空 间 的 距离 。 白 色 让 整个 色调 组 合 更 加 明快 ， 而 黑色 增添 色彩 的 厚重 
质感 一 一 强烈 中 的 强烈 ， 增 强 对 产品 的 视觉 刺激 。 


10.10.8 小 结 


橙色 在 HSB 数值 的 也 中 为 30 度 ， 是 正 橙色 。 橙 色 是 一 个 非常 响亮 注目 的 颜色 。 橙 色 的 对 比 色 
是 蓝 色 ， 当 这 两 种 颜色 彩 度 倾向 越 明确 ， 对 比 强度 就 越 大 。 但 我 们 也 看 到 ， 除 了 正宗 的 对 比 色 橙 蓝 色 
外 ， 柳 色 和 绿色 随 着 纯度 的 升 高 ， 达 到 的 对 比 效果 也 很 强烈 。 

在 配色 设计 中 可 以 多 些 不 同 明 度 、 纯 度 冷暖 对 比 的 尝试 , 会 有 意 想不到 的 收获 。 白 色 是 所 有 网 页 
设计 中 属于 较 通 用 的 颜色 ， 它 容易 突出 彩 度 的 特性 ， 明 快 于 整个 页 面 ， 当 一 个 页 面 设计 没有 使 用 白色 
时 ， 空 间 感觉 减弱 ， 容 易 造成 彩 度 不 够 明确 、 页 面 有 些 沉闷 等 反应 ， 相 对 来 说 增添 页 面 的 厚重 感觉 ， 
制造 另外 一 种 环境 气氛 。 黑 色 在 色调 组 合 的 辅助 角色 里 容易 制造 出 厚重 的 色彩 效果 。 
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色彩 都 是 相对 的 , 没有 绝对 的 配色 组 合 ,它们 总 是 根据 搭配 不 同 的 色彩 组 合 或 强 或 弱 地 表现 出 什 
么 样 的 特性 。 同 类 色 、 邻 近 色 的 组 合 ， 是 非常 调和 的 色彩 组 合 ， 即 使 减少 了 色相 的 数量 ， 一 样 也 可 以 
调配 出 很 多 不 同 的 调和 色彩 。 对 于 初学 者 来 说 ， 这 是 一 个 非常 实用 的 配色 方法 。 





10.11 红色 页 面 配色 


红色 的 色 感 温暖 ， 性 格 刚烈 而 外 向 ， 是 一 种 对 人 刺激 性 很 强 的 颜色 。 红 色 容 易 引起 人 的 注意 , 也 | 
容易 使 人 兴奋 、 激 动 、 紧 张 、 冲 动 ， 还 是 一 种 容易 造成 人 视觉 疲劳 的 颜色 。 在 众多 颜色 里 ， 红 色 是 最 
鲜明 生动 的 、 最 热烈 的 颜色 。 因 此 红色 也 是 代表 热情 的 情感 之 色 。 鲜 明 红色 极 容易 吸引 人 们 的 目光 。 

红色 在 不 同 的 明度 、 纯 度 的 状态 (粉红 、 鲜 红 、 深 红 ) 里 ， 给 人 表达 的 情感 是 不 一 样 的 。 在 网 页 
颜色 的 应 用 几率 中 ,根据 网 页 主题 内 容 的 需求 ， 纯 粹 使 用 红色 为 主 色调 的 网 站 相对 较 少 ， 多 用 于 辅助 
色 、 点 睛 色 ， 达 到 陪衬 、 醒 目的 效果 。 通 常 都 配 以 其 他 颜色 调和 。 红 色相 对 于 其 他 颜色 ， 视 觉 传递 速 
度 最 快 。 由 于 以 上 的 这 些 红色 传达 出 的 特性 ， 因 此 人 们 喜欢 用 红色 作为 警示 符号 的 颜色 ， 例 如 消防 、 
惊叹 号 、 错 误 提 示 等 。 


10.11.1 朱红 色 
【示例 】 朱 红色 网 页 示例 截图 如 图 10.73 所 示 











10.73 ”朱红 色 页 面 效果 


【分 析 】 

主 色 调 瞩 R255 G51 B0 Hl12 S100% B100% 

回 辅 色调 才 R222 G43 B0 Hl12 S100% B87% [ 尼 39 
加 ”点 睛 色 ( ) 白色 | 
回 背景 色 三 R25 G51 BO H12 S100% B100% | 
朱红 色 在 红色 系 里 倾向 黄色 方向 ， 是 大 红色 加 入 黄色 而 得 。 在 色 环 表 中 ， 纯 红色 在 HSB 里 为 0 | 
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~ 可 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


| 度 ， 往 360 度 方向 呈现 的 是 冷 红色 系 ，0 度 方向 为 黄色 系 。 

| 主 色调 朱红 色 面 积 非常 大 、 确 定 明显 ， 辅 助 色 主要 由 黑色 、 深 红 构 成 〈 数 值 上 选取 的 是 深 红色 做 
| 标示) 。 主 色调 的 R 呈现 出 255 最 高 数值 ，S 100%， 充 分 标明 了 红色 最 高 特性 。 辅 助 色 的 深 红 R 为 
| 222，B 87%， 显 示 其 充当 辅助 角色 的 这 一 特性 。 
| 【点 评 】 
背景 色 朱红 由 于 红色 特性 明显 ， 饱 和 度 、 明 度 都 非常 的 高 ， 这 里 运用 了 辅助 色 深 红 、 黑 色 压 住 并 
| 替 制 朱红 色 抢眼 的 个 性 , 也 同样 能 达到 突出 前 景 主要 图 片 内 容 的 目的 ， 点 睛 色 主 要 用 于 标志 的 突出 上 ， 
其 他 导航 文字 、 图 片 的 部 分 运用 等 ， 调 和 并 达到 了 不 至 于 使 得 整个 页 面 刺激 中 又 透 出 的 沉 问 感 。 

这 类 颜色 的 组 合 比较 容易 使 人 提升 兴奋 度 ， 红 色 特 性 明显 ， 这 一 醒目 的 特殊 属性 ， 比 较 被 广泛 地 
应 用 于 食品 、 时 尚 休闲 等 车 类 型 的 网 站 。 


10.11.2 ” 深 红色 


【示例 】 深 红色 网 页 示例 截图 如 图 10.74 所 示 。 























10.74 ” 深 红色 页 面 效果 


【分 析 】 

回 主 色 调 重 17 G24 B26 H359 S86% B69% 

回 辅 色调 和 Rlss G67 B86 H352 S64% B74% 

回 ”点睛 色 人 ) 白色 

回 背景 色 三 R17 G24 B26 H359 S86% B69% 

深 红色 在 原 有 的 红色 基础 上 降低 了 明度 而 得 ， 是 红色 系 中 的 明度 变化 。 通过 图 10.74 的 数值 显示 
| 看 出 明度 较 低 。 这 类 颜色 的 组 合 随 着 明度 的 变 暗 ， 比 较 容易 制造 深邃 、 幽 怨 的 故事 气氛 。 传 达 的 是 稳 
重 、 成 熟 、 高 贵 、 消 极 的 心理 感受 。 整 个 页 面 背景 色 运用 了 纹样 ， 是 以 目前 选取 的 主 色 调 颜 色 和 明度 
| 较 暗 的 深 红色 结合 而 成 的 ， 使 得 明度 稍 暗 。 
| 从 数值 上 看 ， 主 色调 也 就 是 背景 色 的 饱和 度 较 高 ， 但 是 由 于 降低 了 明度 ， 颜 色 变 得 较 沉 稳 。 辅 助 
| 色 RGB 添加 了 适量 的 其 他 颜色 ，G 和 B 数值 区 别 不 大 ， 因 此 饱和 度 降低 ， 颜 色 趋 于 柔和 稳定 。 点 睛 
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色 的 加 入 提 亮 ， 页 面 视觉 效果 强化 。 
【点 评 】 | 
前 景色 通常 要 较 明显 地 区 别 于 背景 色 , 达到 台 前 的 宣传 目的 。 当 饱和 度 较 低 的 前 景色 与 背景 色 变 | 
化 不 明显 时 形成 的 是 另外 一 种 柔和 统一 的 效果 。 


10.11.3 ”玫瑰 红色 
【示例 】 玫 瑰 红色 网 页 示例 截图 如 图 10.75 所 示 。 
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10.75 ”玫瑰 红色 页 面 效果 


【分 析 】 

回 主 色调 二 Rls9 Go B64 H340 S100% B74% 

回 辅 色调 坊 R227 G12 B90 H338 S95% B85% 

回 ”点睛 色 (_) 白色 

回 背景 色 坊 Rls9 Go B64 H340 S100% B74% 

玫瑰 红色 在 色 环 上 实际 已 经 接近 冷色 ,是 红色 系 中 的 色相 的 微妙 变化 ， 是 红色 系 里 的 冷色 系 。 在 
HSB 中 HH 数值 可 以 看 出 ，0 度 为 红色 的 最 高 值 ， 越 接近 0 度数 值 红色 特 性 越 明显 ， 否 则 逐渐 冷色 倾 
斜 ， 而 该 数值 偏离 0 度 稍 远 。 

整个 页 面 主要 由 两 种 不 同 明度 、 纯 度 的 玫瑰 色调 组 成 。 两 色 数值 显示 ，RGB 数值 中 R 呈现 的 数 
值 最 高 ,红色 特性 较 明显 。 辅 助 色调 的 玫瑰 色 , 加 入 少许 G， 色 调 向 冷色 稍微 偏 移 ， 也 由 于 加 入 了 G， 
在 HSB 数值 中 ， 饱 和 度 轻微 减弱 ， 但 随 着 明度 增加 ， 色 彩 趋 于 艳丽 ， 符 合 突出 前 景 的 目的 。 主 色调 
虽然 纯度 达到 最 高 饱和 ， 但 由 于 明度 降低 ， 相 对 于 辅 色调 较 沉稳 ， 适 合 做 背景 色 。 从 数值 上 看 ， 由 于 
背景 色 和 前 景色 的 明度 较为 接近 , 加 入 白色 边框 , 强烈 了 前 景色 与 背景 色 的 区 分 , 加 强 视觉 强化 效果 。 

【点 评 】 

背景 色 和 前 景色 的 明度 较 接近 , 颜色 给 人 的 视觉 表象 较 间 ,加 入 少量 白色 划分 使 得 色彩 引导 的 主 
次 块 面 更 分 明 ， 页 面 明快 许多 。 这 类 颜色 的 组 合 多 用 于 女性 主题 ,例如 化 妆 品 、 服 装 等 ， 容 易 营 造 出 
娇媚 、 诱 惑 、 艳 丽 等 气氛 。 
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| 10.11.4 ”粉红 色 


【示例 】 明 度 粉红 色 网 页 示例 截图 如 图 10.76 所 示 。 
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图 10.76 ”粉红 色 页 面 效果 


【分 析 】 

加 ” 主 色调 R240 G201 B222 H331 S16% B94% 

回 ” 辅 色调 久 R242 G165 B199 H333 S32% B95% 

回 点睛 色 R255 G237 B15 H55 S94% B100% 

背景 色 ( ) 白色 

粉红 色 主 要 是 红色 系 中 的 明度 的 高 亮度 的 变化 。 是 红色 系 里 的 冷色 系 。RGB 数值 显示 明度 较 高 ， 
因此 HSB 中 S 纯度 下 降 ， 几 乎 呈 最 低 值 。 

主 色 调和 辅助 色调 数值 对 比 可 知 : 主 色 调 混合 的 G 的 分 量 较 多 且 明 度 较 高 ， 因 此 纯度 较 低 ， 色 
调 柔 和 ， 在 框架 区 域内 较 适 合 做 类 似 背 景色 的 辅助 性 岗位 。 辅 助 色 R 数值 比 主 色调 的 R 数值 稍 高 ， 
| 红色 性 稍 明显 ， 加 入 的 G 相对 少 ，B 明度 稍 低 ， 因 此 相对 纯度 要 高 ， 辅 色 位 置 应 用 在 框架 区 域 的 导航 
位 置 ， 起 到 突出 导航 作用 。 点 睛 色 突 出 标志 及 购物 主体 的 作用 。 

背景 白色 除了 突出 前 面粉 红色 主体 的 作用 ,在 前 景 也 有 出 现 ， 背 景色 与 前 景色 的 相互 牵制 ， 减 少 
空间 距离 的 效果 。 

【点 评 】 

在 RGB 数值 中 ， 数 值 同 时 呈现 相近 的 高 数值 时 ， 色 彩 越 柔和 协调 ， 纯 度 相 对 降低 ， 页 面 呈 高 明 
度 灰 色 段 ， 视 觉 刺 激 缓慢 。 这 里 以 粉红 色 为 主 色调 的 页 面 ， 女 性 主题 内 容 特征 倾向 明显 。 这 组 粉红 色 
页 面 里 ， 由 于 纯度 都 较 低 ， 任 何 一 个 纯度 高 小 面积 使 用 的 颜色 都 能 起 到 点 睛 的 效果 。 

这 类 颜色 的 组 合 多 用 于 女性 主题 ， 例 如 化 妆 品 、 服 装 等 ， 鲜 嫩 而 充满 诱惑 ， 传 达 着 和 柔情、 娇媚 、 
温柔 、 甜 蜜 、 纯 真 、 诱 惑 的 心理 感受 。 
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10.11.5 ”楼 红 色 + 蓝 色 
【示例 】 对 比 色 森 红 色 应 用 网 页 示例 截图 如 图 10.77 所 示 。 
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10.77 橙 红色 + 蓝 色 页 面 效果 


【分 析 】 

主 色调 卉 R255 G75 BO Hl8 S100% B100% 

回 ”点睛 色 ( ) 白色 

背景 色 力 3 G95 B162 H205 S98% B64% 

橙色 是 蓝 色 的 对 比 色 , 这 组 对 比 色 中 的 检 红 色 倾 向 于 红色 。 该 页 面 的 背景 色 使 用 纹理 图 形 由 深 至 
浅 的 制造 空间 范围 ， 模 拟 真实 环境 。 这 里 的 数值 选取 其 中 间 色 值 来 分 析 ， 由 于 背景 蓝 色 B 的 明度 较 
低 ， 又 由 于 冷色 比 暖 色 视觉 传递 速度 慢 的 特点 ， 很 适合 作为 辅助 角色 突出 前 景 的 应 用 。 

主 色调 橙 红色 R 的 数值 达到 最 高 值 255，SB 都 达到 了 最 高 值 100%， 视 觉 刺 激 非常 强烈 ， 运 用 大 | 
面积 高 纯度 来 突出 蓝 色 产 品 主体 物 ， 又 形成 了 一 次 页 面 上 的 视觉 对 比 一 背景 蓝 色 与 前 景 橙 红色 , 前 | 
景 橙 红色 与 产品 主体 物 蓝 色 的 二 次 对 比 。 点 睛 色白 色 ， 使 这 组 对 比 色 在 页 面 中 表现 得 更 协调 。 

【点 评 】 

这 组 橙色 蓝 色 对 比 色 在 网 页 上 比 其 他 两 组 对 比 色 红色 绿色 、 黄 色 紫 色 应 用 得 多 ， 能 迅速 地 传达 网 
站 主题 内 容 、 网 页 主体 ， 容 易 增 添 强烈 的 兴奋 度 ， 多 用 于 食品 、 休 闲 娱乐 、 产 品 等 ， 但 却 又 是 跨越 于 
各 行业 的 主题 网 站 ， 适 用 的 范围 非常 大 。 

颜色 的 深浅 除了 能 营造 空间 感 的 效果 ， 也 能 辅助 性 地 制造 主 次 效果 。 颜色 除了 性 能 对 比 ， 面 积 对 
比 、 位 置 安排 也 是 制造 主 次 效果 的 关键 。 


10.11.6 ”红色 + 黑色 
【示例 】 红 色 与 黑色 搭配 应 用 网 页 示例 截图 如 图 10.78 所 示 。 
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图 10.78 ”红色 + 黑色 页 面 效 果 


【分 析 】 

回 主 色调 坊 R152 G17 B21 H358 S89% B60% 

回 辅 色调 三 8 名 

回 点睛 色 白色 

加 背景 色 坊 R152 G17 B21 H358 ssg9%% B60% 

红色 与 黑色 的 搭配 在 商业 设计 中 ， 被 誉 为 商业 成 功 色 ， 鲜 亮 的 红色 多 用 于 ein ee 
值 上 看 ， 红 色 添加 了 G 和 B 饱和 度 稍 降低 ， 因 此 该 红色 大 面积 使 用 不 会 觉得 刺激 或 不 舒服 ， 
背景 色 蓝 色 加 入 了 适量 渐变 的 技法 ， 使 得 页 面 的 节奏 呈现 缓和 。 

辅助 色 黑 色 的 加 入 ， 与 深 红色 在 明度 拉 大 ， 页 面色 彩 元 素 相对 活跃 不 少 。 点 睛 色白 色 ， 所 放 的 位 
置 和 面积 ， 起 到 平衡 黑色 位 置 面积 的 作用 ， 当 然 也 达到 醒目 的 效果 。 

【点 评 】 

这 里 颜色 位 置 的 摆 放 ， 起 到 平衡 页 面 视觉 ， 突 出 主题 效果 的 作用 。 背 景色 加 了 渐变 效果 、 整 体 与 
前 景 人 物 黑色 对 比 呈 hg 前 景 人 物 黑色 与 背景 深 红色 、 洗 晤 深 红 与 re 
构成 空间 环境 的 视觉 

这 组 配色 中 ， Eee 明度 的 深 红色 ， 为 主 色调 和 背景 色 的 大 面积 使 用 。 红 黑 措 配 色 ， 常 用 
于 较 前 卫 时 尚 、 娱 乐 休闲 、 电 子 商 务 等 要 求 个 性 的 网 页 设计 配色 里 , 也 又 有 用 于 部 分 政治 、 新 闻 的 页 面 。 


10.11.7 ”红色 + 黑色 + 灰色 


【示例 】 红 色 与 黑色 和 灰色 搭配 应 用 网 页 示例 截图 如 图 10.79 所 示 。 
【分 析 】 

回 主 色 调 堵 中 
回 畏 色 调 力 R216 Go B11 Ho Ss100% B85% 
回 ”点睛 色 白色 
回 “背景 色 天 Ril%。 G184 B165 H34 S17% B78% 





































“428 。 








第 10 章 网 页 色彩 设计 和 





IN STORES OGTOBER 4 


PRE-DRDER TODAY 
AND RECEIVE A FREE EP 
FEATURING 7 SONS! 





ONLY 


$9.97 


| 
| 
| 
| 
CUCK BERE TO PRE ORDER NOWI | 





图 10.79 ”红色 + 黑色 + 灰色 页 面 效果 


这 组 配色 ， 达 到 最 高 纯度 的 红色 做 小 面积 的 使 用 。 虽 然 这 里 选取 了 红色 作为 辅助 色 ， 但 从 整个 页 | 
面 的 功能 和 所 表达 的 主题 来 看 , 红色 可 以 作为 该 页 面 的 点 睛 色 , 强烈 地 突出 了 主题 。 红色 的 数值 显示 ， 
HBS 中 的 开 为 0 度 ， 达 到 红色 特性 的 最 高 值 ，S 为 最 高 饱和 度 100%， 在 明度 最 低 的 黑色 背景 的 衬托 
下 ， 其 特性 发 挥 到 极致 ， 页 面 醒目 而 响亮 。 

红色 与 黑色 本 是 对 比 强烈 的 配色 ,但 由 于 背景 灰色 的 作用 ， 缓 和 整个 页 面 的 视觉 刺激 度 。 背 景色 | 
灰色 RGB 数值 变化 不 大 ， 因 此 颜色 纯度 较 低 、 趋 于 平稳 柔和 ， 辅 助 前 景 内 容 的 呈现 。 白 色 让 前 景 和 | 
背景 的 划分 更 明显 ， 活 跃 页 面 中 的 色彩 元 素 。 | 

【点 评 】 | 

使 用 面积 小 的 纯度 高 的 颜色 在 非 色彩 的 黑色 和 灰色 上 ,是 产生 变化 页 面 的 颜色 , 达到 容易 突出 主 | 
题 的 目的 。 


10.11.8 ”小结 


红色 在 RGB 数值 的 R 为 255 左右 , HSB 数值 的 瑟 中 为 0 度 左右 , 达到 红色 最 高 值 。 随 着 纯度 的 | 
提高 、 亮 度 的 适度 增加 ， 它 易于 迅速 的 传达 、 醒 目 性 的 特征 发 挥 得 越 明显 。 和 其 他 颜色 一 样 ， 颜 色相 | 
互 混合 得 越 多 ， 明 度 越 低 ， 饱 和 度 越 低 ， 视 觉 冲 击 力 越 弱 。 

对 比 色 红色 绿色 的 搭配 ， 红 色 的 特性 发 挥 得 越 明 显 。 绿 叶 衬 红 花 的 效果 。 另 外 红 与 黑 的 搭配 ， 也 
较 能 展现 红色 的 魅力 。 根 据 主题 的 需要 ， 除 了 对 比 色 的 应 用 ,还 有 面积 上 、 位 置 上 的 对 比 应 用 ， 也 能 
很 好 地 配合 达到 突出 主题 产品 主体 物 的 目的 。 
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网 页 版 式 设计 


网 页 版 式 设计 ， 是 将 文字 、 图 形 图 像 、 动 画 、 视 频 等 网 页 元 素 ， 根 据 将 定 的 内 容 和 主题 ， 
在 网 页 所 限定 的 范围 中 ， 运 用 造型 元 素 和 形式 原理 进行 视觉 的 关联 与 配置 ， 从 而 将 设计 意图 以 
视觉 形式 表现 出 来 

在 网 页 设计 领域 ， 很 长 时 间 以 来 版 式 设计 被 认为 是 技术 性 工作 ， 网 页 的 设计 和 制作 主要 由 
技术 人 员 来 完成 ， 他 们 只 是 习惯 性 地 规定 一 种 格式 ， 习 惯性 地 放 入 文字 和 符合 需要 的 图 形 图 像 
由 于 缺乏 对 网 页 的 整体 理解 ， 网 页 的 版 式 设计 缺乏 创造 性 的 构思 和 系统 性 的 考虑 。 现 在 ， 人 们 
越 来 越 认识 到 版 式 设 计 在 网 页 设计 中 的 重要 作用 ， 它 是 技术 和 艺术 的 高 度 统 一 。 


【 学 习 重 点 】 


| 


至 至 至 


版 式 设计 的 造型 元 素 
版 式 构成 原理 
版 式 视觉 原理 
版 式 构成 类 型 
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11.1 网 页 版 式 设计 基础 


网 页 版 面 不 同 于 传统 意义 上 的 报纸 、 杂 志 、 平 面 广告 等 具有 固定 的 版 面 尺 寸 。 
首先 ， 在 水 平方 向 上 ， 由 于 大 多 数 人 的 桌面 显示 器 分 辩 率 设置 为 800x600 像素 、1024x768 像素 





或 者 1366x768 像素 等 ,在 网 页 设计 时 应 以 1024x7680 像素 为 标准 ， 除 去 滚动 条 占用 的 20 像素 , 安全 | 
宽度 应 控制 在 1000 像素 内 ， 才 能 浏览 到 全 部 页 面 内 容 。 而 在 分 辩 率 13664x768 像素 的 设置 下 ， 页 面 | 


内 容 只 占 版 面 空间 的 一 部 分 〈 居 左 或 居中 ) ， 其 余 空间 为 背景 色 。 

其 次 ， 在 垂直 方向 上 ， 由 于 页 面 是 可 以 滚动 的 ， 版 面 的 长 度 不 做 限制 。 因 而 这 样 一 个 动态 的 、 变 
化 的 版 面 空间 ， 给 版 式 设计 增加 了 难度 。 

为 避免 版 面 空间 的 不 固定 给 网 页 设计 带 来 的 负面 影响 ， 取 得 较 好 的 版 面 视觉 效果 , 很 多 网 页 在 设 
计时 采取 了 相应 的 措施 。 

加 “将 背景 作 适 当 设 计 ， 以 适应 不 同 分 辩 率 的 版 面 效果 。 

回应 用 自动 适合 宽度 的 技术 ， 当 版 面 宽度 大 于 800 像素 时 ， 页 面 内 容 会 自动 伸缩 ， 充 满 整个 

版 面 宽度 ， 这 一 技术 对 版 式 设计 提出 了 更 高 的 要 求 ， 以 适应 不 同 的 版 面 宽度 。 

在 网 页 界面 中 ， 各 种 具体 、 抽 象 的 形象 按 其 形态 、 大 小 的 不 同 均 可 以 归纳 为 相应 的 点 、 线 、 面 ， 
因而 ， 点 、 线 、 面 、 空 白 的 关系 从 本 质 上 反映 了 客观 世界 普遍 存在 的 对 立 统一 的 关系 。 版 式 中 点 、 线 、 
面 、 空 白 的 成 分 兼 而 有 之 、 相 互 影响 ， 往 往 能 使 观众 在 视觉 上 得 到 满足 。 根 据点 、 线 、 面 、 空 白 各 自 
不 同 的 感觉 属性 ， 将 它们 灵活 处 理 ， 以 产生 各 种 生动 的 页 面 版 式 效果 。 


11.2 网 页 版 式 构成 原理 


自然 界 的 万 事 万 物 ， 从 宏观 的 宇宙 到 微观 的 原子 、 分 子 ， 到 处 都 存在 着 内 在 的 规律 性 。 网 页 版 式 
设计 和 其 他 视觉 形式 一 样 ， 也 遵循 这 些 规律 。 具 有 秩序 感 的 版 式 设计 ， 善 于 将 各 组 成 部 分 系统 化 、 整 
体 化 ， 处 理 好 相互 关系 ， 在 整体 秩序 中 体现 出 美感 。 版 式 设计 的 造型 元 素 相互 依赖 、 相 互 组 织 、 相 互 
配合 ， 体 现 出 构成 方式 的 规律 性 ， 具 体 包括 比例 、 对 称 、 均 衡 、 反 复 、 渐 变 、 节 奏 、 韵 律 、 统 一 、 变 
化 等 。 


11.2.1 比例 


比例 是 部 分 与 部 分 之 间 、 部 分 与 整体 之 间 的 比率 关系 。 整 体形 式 中 一 切 有 数量 的 条 件 ， 如 长 短 、 
大 小 、 宽 窗 、 明 暗 、 多 少 等 ， 在 措 配 适当 时 均 能 产生 优美 的 比例 。 比 例 具有 强烈 的 数理 概念 ， 设 计 中 
常用 的 比例 均 可 用 数学 或 几何 学 的 方法 求 出 。 例 如 ， 黄 金 分 割 率 把 线段 分 成 两 段 ， 发 现 1:1.618 的 数 
比 关系 构成 了 美的 标准 尺度 。 

在 网 页 版 式 设计 中 ， 比 例 表现 有 多 种 形式 。 例 如 ， 页 面 的 长 宽 比 ， 实 体内 容 与 虚空 间 (空白 的 面 
积 ) 比 ， 页 面 分 割 比 ， 图 文 关 系 比 ， 以 及 各 种 造型 元 素 内 部 的 比例 等 。 

确立 良好 的 比例 关系 ， 能 使 页 面 各 部 分 之 间 易 于 产生 相互 联系 ， 使 版 式 设 计 和 和谐、 匀称、 明朗。 

【示例 1 在 如 图 11.1 所 示 网 页 页 面 中 ， 上 下 的 灰 蓝 色 块 宽度 远大 于 高 度 ， 让 人 感觉 左右 视野 开 
阔 ， 左 下 角 的 导航 照片 和 右边 的 灰 底 色 均 采用 了 接近 黄金 矩形 的 比例 ， 视 觉 上 极为 舒适 。 
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图 11.1 开阔 构图 


【示例 2】 如 图 11.2 所 示 小 图 标 处 于 页 面 宽 度 的 黄金 分 割 点 位 置 ， 如 同 页 面 的 支点 ， 此 种 比例 的 
分 割让 页 面 稳定 而 不 失灵 活 。 





图 11.2 黄金 构图 


11.2.2 ”重复 与 渐变 


重复 是 相同 或 相似 的 形态 连续 而 有 规律 的 反复 出 现 。 重 复 的 特点 是 以 单纯 的 手法 求 得 整体 形象 的 
| 秩序 和 统一 ， 具 有 节奏 美 ， 使 人 产生 清晰 、 连 续 、 平 和 、 安 定 、 无 限 之 感 。 重 复 可 分 为 单纯 重复 和 变 
| 化 重复 两 种 形式 。 单 纯 重 复 是 单一 基本 形 的 反复 再 现 ， 其 形状 、 大 小 、 方 向 都 是 相同 的 ， 这 种 重复 体 
| 现 了 一 种 标准 化 、 追 求 简约 的 特征 。 在 网 页 界面 中 , 单纯 重复 多 用 于 具有 同一 基本 形 的 图 案 、 底 纹 中 。 
| 【示例 1 在 如 图 11.3 所 示 的 网 页 中 主体 图 片 中 间 有 一 排 重复 排列 的 3 个 长 方形 图 形 ,图形 中 的 
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图 案 各 异 ， 这 种 变化 是 为 避免 重复 的 单调 ， 或 者 在 重复 中 有 变化 ， 这 种 重复 既 整齐 又 具 多 样 性 ， 因 而 | 
在 网 页 版 式 中 经 常 被 用 作 通 向 其 他 页 面 的 超 链接 。 | 





EJ 下村 


视觉 全 国 
图 11.3 重复 构图 
渐变 是 形态 有 规律 地 连续 变化 ， 它 通过 类 似 的 形态 获得 了 形式 的 统一 。 渐变 能 让 相互 对 立 的 两 极 
形成 过 渡 ， 从 而 达到 统一 ， 如 色彩 的 黑 与 白 之 间 ， 形 态 的 大 与 小 之 间 等 。 渐 变 体现 了 形态 的 发 展 变化 
过 程 ， 让 人 感觉 含蓄 、 柔 和 ， 具 有 强烈 的 时 间 和 空间 特征 。 网 页 界面 中 ， 各 种 造型 元 素 都 可 以 采用 渐 | 
变 的 方法 进行 处 理 。 | 
【示例 2】 如 图 11.4 所 示 页 面 通过 明暗 的 渐变 关系 ,衬托 一 个 变幻 而 又 充满 神秘 的 魔界 , 给 人 一 | 
种 紧张 而 又 神往 的 视觉 效果 。 








图 11.4 渐变 构图 


11.2.3 ”对 称 与 均衡 


对 称 是 指 以 某 一 点 为 中 心 ， 其 左右 或 者 上 下 因 同 等 、 同 量 、 同 形 而 形成 的 平衡 。 对 称 有 以 中 轴线 | 
为 轴 的 左右 对 称 ， 以 水 平 线 为 轴 的 上 下 对 称 和 以 中 心 点 为 基准 的 放射 对 称 。 | 
【示例 1】 对 称 的 版 式 设计 稳定 、 庄 严 、 整 齐 、 秩 序 、 安 宁 、 沉 静 ， 如 同 中 国 古 代 宫 殿 一 样 庄重 、 | 
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! 
| [A 


| 严肃， 体现 了 一 种 古典 主义 的 风格 。 在 如 图 11.5 所 示 网 页 中 ， 男 、 女 装 以 对 称 的 形式 左右 排 布 ， 给 
| 人 感觉 平稳 、 有 序 。 
! 

















图 11.5 对 称 构图 


均衡 是 指 版 面 以 某 一 点 为 中 心 ， 左右 或 者 上 下 等 量 不 等 形 的 配置 。 均衡 是 一 种 造型 上 有 变化 的 平 
衡 状 态 ， 具 有 变化 的 统一 性 。 它 揭示 了 形式 内 在 的 、 含 蓄 的 秩序 和 平衡 ， 体 现 了 造型 动 与 静 相 结合 的 
动态 之 美 。 均 衡 的 形式 灵活 而 富 于 变化 ， 易 于 产生 现代 感 。 进 行 网 页 界面 的 版 式 设计 时 ,根据 内 容 的 
逻辑 性 , 将 各 要 素 按 主 次 、 强 弱 关 系 进行 设计 , 将 获得 视觉 上 的 均衡 感 ,表现 为 呼应 关系 或 起 承 关系 
即 由 一 个 要 素 转移 至 承接 它 的 另 一 要 素 ， 二 者 之 间 必然 产生 呼应 关系 ， 引 发 观众 的 情感 效应 。 

【示例 2 在 如 图 11.6 所 示 网 页 中 ， 以 一 个 水 晶 球 为 中 心 点 ， 通 过 两 侧 色调 的 轻重 使 页 面 版 式 区 
得 心理 上 的 量 的 均衡 。 
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图 11.6 均衡 构图 


11.2.4 ”节奏 与 韵律 
| 节奏 是 指 单 体 按照 一 定 的 条 理 、 秩 序 ， 重 复 连续 地 排列 ， 形 成 一 种 律动 形式 。 例 如 ， 呼 吸 、 心 跳 
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是 人 的 生理 节奏 ,波浪 的 前 进 、 四 季 的 交 蔡 是 自然 界 的 节奏 ,而 图 案 的 连续 纹样 、 建 筑 上 的 柱 窗 结构 | 
是 设计 中 的 节奏 。 在 版 式 设计 中 也 是 如 此 ， 同 样 的 形态 、 同 样 的 色彩 变化 、 同 样 的 明暗 对 比 以 反复 、 | 
渐变 的 方式 出 现 ， 使 人 体会 到 一 种 类 似 音 乐 中 的 节奏 ， 从 而 产生 美学 体验 。 节 奏 使 单纯 的 更 单纯 ， 统 
一 的 更 统一 。 

韵律 是 一 种 规律 性 的 变化 , 它 是 比 节 奏 更 高 一 级 的 律动 。 齐 律 是 宇宙 间 普 遍 存在 的 一 种 美感 形式 ， 
天 体 的 运行 、 季 节 的 更 迭 、 昼 夜 的 交 蔡 、 人 体 的 运动 体现 出 一 种 韵律 ， 音 乐 、 诗 歌 、 舞 蹈 中 更 是 包含 
着 韵律 的 美 。 音乐 是 用 时 间 的 间隔 使 声音 在 强 弱 或 高 低 变 化 中 产生 齐 律 , 诗歌 是 运用 诗 的 押韵 或 | 
内 在 的 声韵 秩序 来 表达 韵律 ， 有 舞蹈 是 靠 和 人 的 舞姿 在 空间 塑造 出 变化 的 形态 来 体现 韵律 。 而 视觉 艺术 的 | 
韵律 ， 则 由 造型 元 素 的 有 规律 的 节奏 变化 形成 。 

一 般 来 说 ， 节 奏 感 和 韵律 感 同 时 存在 ， 但 细 分 起 来 ， 节 奏 较 多 地 强调 “节拍 ”， 韵 律 较 多 地 强调 
“变化 ”如果 说 韵律 感 不 够 ， 是 指 缺 少 变 化 ， 过 于 平板 ; 如 果 说 节奏 感 不 强 ， 是 指 变化 缺乏 条 理 规则 。 

【示例 】 运 用 节奏 与 韵律 的 形式 法 则 ， 能 创造 出 形象 鲜明 、 形 式 独特 的 视觉 效果 ,表达 轻 松 、 优 
雅 的 情感 ， 使 网 页 界面 产生 不 可 思议 的 活力 与 魅力 。 如 图 11.7 所 示 的 网 页 ， 页 面 反复 通过 不 同 的 人 
体 排列 在 一 起 ， 让 人 处 处 感受 到 音乐 的 轻松 节奏 。 如 图 11.8 所 示 ， 用 大 弧度 的 曲线 、 椭 圆 形 作 轿 车 
的 背景 ， 使 页 面 流 畅 、 富 于 韵律 ， 用 来 衬托 产品 的 高 贵 品 质 。 
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图 11.7 节奏 构图 图 11.8 韵律 构图 
11.2.5 ”对 比 与 统一 


对 比 是 指 将 性 质 相 异 的 形态 要 素 直接 或 间接 地 配置 在 一 起 , 相 异 的 特点 因 比 较 而 更 加 鲜明 , 使 人 | 
产生 强烈 的 紧张 感 。 对 比 有 形 的 对 比 ( 大 小 、 方圆、 长 短 、 曲 直 、 宽 窄 等 )， 色 的 对 比 (色相 、 明 度 、 | 
纯度 、 冷 暖 )， 质 的 对 比 ( 刚 柔 、 粗 细 、 强 弱 、 干 湿 、 轻 重 、 软 硬 、 虚 实 等 )， 势 的 对 比 ( 疾 缓 、 疏 密 、| 
动静 、 抑 扬 、 进 退 等 )。 对 比 能 使 视觉 效果 更 生动 、 强 烈 、 感 人 、 富 于 活力 ， 从 而 使 人 记忆 深刻 。 对 | 
比 关系 越 清 晰 ， 视 觉 效 果 就 越 强烈 。 在 网 页 界面 中 ， 文 字 与 文字 、 图 形 与 图 形 、 实 体 与 空白 间 处 处 都 上 
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| 存在 对 比 关系 。 在 一 个 页 面 中 ， 通 常 是 多 种 对 比 关系 同时 并 存 ， 以 产生 多 姿 多 彩 的 表现 效果 。 
| 【示例 1 如 图 11.9 所 示 网 页 中 ， 大 大 的 竺 子 与 水 平 放 置 的 黑色 色 块 构成 方向 上 的 对 比 ， 同 时 还 


| 具有 色彩 纯度 、 明 度 、 色 相 的 对 比 ， 使 人 获得 视觉 上 的 平衡 感 。 














11.9 对 比 构图 


如 果 说 ， 对 比 是 将 矛盾 强化 ， 强 调 “ 异 ”的 概念 ， 那 么 统一 就 是 将 矛盾 弱化 ， 产 生 调 和 ， 趋 向 于 
“ 同 ” 的 概念 。 统 一 是 指 性 质 相 同 或 类 似 的 形态 要 素 并 置 在 一 起 , 形成 一 种 一 致 或 趋向 于 一 致 的 感觉 。 
统一 并 不 是 设计 形式 的 单一 化 , 它 使 多 种 多 样 变 化 的 因素 具有 条 理性 和 规律 性 , 使 各 个 局 部 相互 联系 。 
为 了 获得 版 面 的 整体 效果 ,我 们 常用 各 种 手法 来 取得 统一 ， 如 在 页 面 的 不 同位 置 运用 相同 的 字体 、 相 
同 的 色调 ， 出 现 相同 特征 和 形状 的 造型 因素 等 ， 使 版 面 各 处 协调 一 致 。 

【示例 2】 如 图 11.10 所 示 页 面 ， 背 景 用 色 、 线 条 均 与 照片 中 产品 的 风格 一 致 ， 页 面 充 满 了 和 谐 
的 美 。 
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11.3 版 式 视觉 原理 


人 通过 视觉 可 以 感知 外 部 世界 的 多 方面 的 信息 。 由 视觉 传达 的 信息 比 其 他 所 有 感官 所 传递 信息 的 | 
总 和 还 要 高 出 好 几 个 数量 级 。 因 此 ， 本 节 主 要 从 视觉 生理 、 心 理 的 角度 进行 分 析 ， 以 实现 网 页 界面 的 
版 式 合理 布局 、 便 于 浏览 的 功能 。 


11.3.1 视觉 突出 


在 具有 一 定 配置 的 视觉 空间 内 ， 有 些 对 象 突现 出 来 形成 主体 ， 有 些 对 象 退 居 到 衬托 地 位 而 成 为 背 

景 。 一 般 来 说 ， 主 体 与 背景 的 区 分 度 越 大 ， 主 体 就 越 突 出 而 成 为 我 们 视觉 感知 的 对 象 ,“ 万 绿 丛 中 一 | 
点 红 ” 就 是 这 个 道理 。 反 之 ,主体 与 背景 的 区 分 度 越 小 ， 就 越 难 以 把 主体 与 背景 分 开 。 要 使 主体 突出 | 
让 视觉 容易 感知 ， 不 仅 要 具备 突出 的 特点 ， 且 要 具有 明确 的 轮廓 、 明 暗 度 和 统一 性 。 | 
! 


11.3.2 ”整体 感 


人 具有 将 由 许多 部 分 或 多 种 属性 组 成 的 对 象 看 作 具 有 一 定 结 
构 的 统一 整体 的 特性 ， 称 为 视觉 的 整体 性 。 在 感知 熟悉 的 对 象 时 ， 
只 要 感知 到 它 的 个 别 属性 或 主要 特征 , 就 可 以 根据 累积 的 经 验 推断 
它 的 其 他 属性 和 特征 ， 从 而 整体 地 感知 它 。 

【示例 】 当 一 个 熟人 从 远 处 走 来 时 ， 我 们 从 他 的 大 致 轮廓 和 走 
路 姿势 就 可 以 辨认 ， 而 无 须 看 清 他 的 脸 。 但 对 于 不 熟悉 的 对 象 ， 我 
们 往往 倾向 于 把 它 感知 为 具有 一 定 结构 的 有 意义 的 整体 。 如 图 11.11 
所 示 ， 人 的 第 一 视觉 是 一 个 完整 的 头像 ， 而 不 是 一 条 条 黑白 相间 的 
线条 。 

11.3.3 ”错觉 

错觉 是 视觉 形态 受 光 、 形 、 色 等 视 知觉 要 素 的 干扰 ， 在 人 的 视 图 11.11 整体 感 
觉 中 所 产生 的 错误 感 ， 亦 即 主观 感受 与 客观 事实 有 所 出 入 。 这 种 视 
觉 现 象 在 设计 领域 应 用 很 广 ， 网 页 界面 设计 涉及 的 错觉 现象 主要 有 如 下 几 类 。 

1， 构 形 错觉 

图 形 与 图 形 之 间 互相 影响 而 产生 的 形态 变化 ， 主 要 体现 在 造型 要 素 的 几何 形 方面 。 

【示例 】 如 图 11.12 所 示 ， 由 于 透视 线 的 作用 ， 同 样 大 小 的 立方 体 在 靠近 集中 点 〈 灭 点 ) 时 ， 看 
起 来 显得 较 大 。 

2， 色 彩 错觉 

当 两 种 或 两 种 以 上 的 色 并 置 时， 由 于 色彩 的 对 比 因素 ， 人 在 视觉 上 会 产生 错觉 。 同 样 灰 度 块 ， 放 
在 不 同 颜色 中 ， 色 相 倾向 不 同 ， 如 图 11.13 所 示 。 

通过 以 上 对 错觉 的 视觉 规律 的 把 握 ， 在 网 页 版 式 设计 中 应 尽量 避免 因 错 觉 所 带 来 的 不 利 影响 。 
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11.12 构 形 错觉 图 11.13 色彩 错觉 
11.3.4 ”视线 移动 规律 


人 了 眼 的 视线 沿 水 平方 向 运动 比 沿 垂直 方向 运动 快 而 且 不 易 疲劳 。 视 线 的 变化 习惯 于 从 左 到 右 ， 从 
上 到 下 和 顺 时 针 方 向 运动 。 当 视线 沿 既 不 水 平 ， 也 不 垂直 的 斜 线 方向 移动 时 ， 在 水 平方 向 上 下 约 45° 
的 范围 视线 为 从 左 到 右 移动 ， 在 垂直 方向 左右 约 45” 的 范围 ， 视 线 为 从 上 到 下 移动 。 

了 解 了 这 些 视觉 特征 ， 在 进行 版 式 设计 时 会 更 加 科学 、 理 性 ， 而 不 仅仅 停留 在 “感觉 ” 层面 ， 更 
多 地 为 使 用 者 考虑 ， 是 网 页 界面 人 性 化 设计 的 要 求 。 

网 页 界面 的 版 式 设计 属于 视觉 设计 ， 其 最 终 目的 是 要 有 效 地 传递 视觉 信息 。 这 里 涉及 提高 传达 效 
率 的 问题 ， 也 就 是 说 ， 版 式 设计 应 该 能 增强 人 们 对 页 面 的 注意 ， 增 进 对 内 容 的 理解 和 记忆 ， 从 而 影响 
人 们 的 思想 和 行为 。 因 此 ， 必 须 依据 人 的 视觉 生理 、 心 理 特 征 ， 采 取 相 应 的 手段 ， 让 版 式 设计 发 挥 出 
更 大 的 功效 ， 达 成 最 佳 的 诉求 效果 。 因 此 网 页 的 版 式 设计 一 定 要 符合 人 的 视觉 习惯 ,满足 人 的 视觉 生 
理 需 求 。 同 时 要 注意 产生 疲劳 感 。 合 理 安排 视觉 的 流程 ， 符 合 人 的 阅读 习惯 。 


11.4 版 式 构成 类 型 
































不 同 的 版 式 就 会 有 不 同 的 视觉 效果 , 根据 视觉 效果 不 同 可 以 总 结 出 以 下 版 式 构成 的 类 型 : 水 平分 
割 、 垂 直 分 割 、 水 平 -垂直 交叉 分 割 、 中 轴 型 、 倾 斜 型 、 曲 线 型 、 重 心 型 、 反 复 型 、 散 点 型 等 。 其 中 ， 
水 平分 制 、 垂 直 分 割 、 水 平 -垂直 交叉 分 割 常 用 到 水 平 线 、 垂 直线 、 抑 形 等 ， 这 些 形式 在 网 页 制作 时 
容易 实现 ， 且 页 面 能 容纳 较 多 的 信息 含量 ， 因 而 是 网 页 界面 中 使 用 相当 广泛 的 构成 类 型 。 
11.4.1 水平 分割 

页 面 中 的 水 平分 割 与 排列 ， 强 调 了 水 平 线 的 作用 ， 使 页 面具 有 安定 、 平静 的 感觉 观众 的 视线 在 
左右 移动 中 捕捉 视觉 信息 ， 符 合 人 们 的 视觉 习惯 。 

1. 水 平均 匀 分 割 

水 平均 匀 分 割 将 页 面 分 割 成 上 下 相等 的 两 部 分 。 如 图 11.14 所 示 ， 上 半 部 用 作 视 觉 表 现 ， 引 发 情 
感 ， 下 半 部 用 来 解释 说 明 ， 上 半 部 多 为 主体 形象 。 

2. 水 平 不 均匀 分 割 

水 平 不 均匀 分 割 是 将 页 面 分 割 成 上 下 不 相等 的 两 部 分 。 一 般 来 说 , 如 果 在 上 半 部 安置 标题 或 导航 ， 
则 面积 较 小 ， 如 果 在 上 半 部 安置 图 片 或 主体 形象 ， 则 面积 适当 加 大 ， 如 图 11.15 所 示 。 
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图 11.14 水 平均 匀 分 割 
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11.15 水平 不 均匀 分 割 


3. 水 平 多 次 分 害 

水 平 多 次 分 割 是 页 面 沿 水 平分 割 成 大 小 不 等 的 几 个 部 分 。 如 图 11.16 所 示 ， 横 向 排列 的 图 片 和 标 
题 文字 ， 强 调 了 水 平分 割 的 层次 和 精确 感 。 多 层 分 割 有 助 于 不 同 信息 的 归 类 。 

4. 水 平 变化 分 割 


水 平 变化 分 别 是 在 水 平分 割 的 基础 上 进行 变化 。 如 图 11.17 所 示 ， 水 平分 割 与 斜 线 相 结合 ， 打 破 
了 页 面 的 安定 ， 产 生动 感 。 
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11.16 水 平 多 次 分 割 
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11.17 水 平 变化 分 割 
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11.4.2 ”垂直 分 割 


页 面 中 的 垂直 分 割 与 排列 ， 则 强调 垂直 线 的 作用 ， 具 有 坚硬 、 理 智 、 冷 静 和 秩序 的 感觉 。 
1.， 垂直 均匀 分 割 | 
垂直 均匀 分 割 是 把 页 面 分 割 为 左右 相等 的 两 部 分 。 在 视觉 习惯 上 , 当 左 右 两 部 分 形成 强 弱 对 比 时 ， 
会 造成 视觉 心理 的 不 平衡 。 这 时 ， 可 将 分 割 线 作 部 分 或 全 部 的 弱化 处 理 ， 或 在 分 割 处 加 入 其 他 元 素 
使 左右 部 分 的 过 渡 自 然而 和 谐 。 如 图 11.18 所 示 ， 左 右 两 部 分 在 色彩 上 的 对 比 由 于 视觉 中 心 的 图 文 而 
减弱 ， 左 上 角 的 标志 减轻 左 半 部 的 重量 感 ， 使 页 面 更 为 融合 
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图 11.18 垂直 均匀 分 割 


2. 垂直 不 均匀 分 割 

垂直 不 均匀 分 割 是 把 页 面 分 割 为 左右 不 相等 的 两 部 分 。 左 边 的 视觉 注意 度 较 高 ， 因 而 放置 标志 、 
导航 信息 、 主 体形 象 等 ， 如 图 11.19 所 示 。 如 果 将 主体 形象 放 在 左右 分 割 处 ， 则 会 减弱 左右 部 分 的 对 
比 ， 加 强 它们 的 联系 ， 成 为 该 页 面 的 视觉 中 心 。 

3. 垂直 多 次 分 割 

垂直 多 次 分 割 是 页 面 沿 垂直 方向 分 割 成 大 小 不 等 的 几 部 分 。 在 图 11.20 中 ， 页 面具 有 很 强 的 层次 
性 ， 左 边 为 主 栏目 导航 ， 右 边 为 次 级 栏目 导航 ， 中 间 为 相应 的 内 容 ， 中 间 和 右边 由 色彩 统一 ， 而 左边 
用 形态 的 渗入 来 加 强 它 与 中 间 部 分 的 衔接 。 
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图 11.19 ”垂直 不 均匀 分 割 
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图 11.20 垂直 多 次 分 割 


4. 垂直 变化 分 害 

垂直 变化 分 割 是 将 垂直 分 割 进行 特异 性 处 理 ， 容 易 取得 耳目 一 新 的 效果 。 如 图 11.21 所 示 ， 将 垂 
直 分 割 应 用 于 网 页 设计 ， 在 分 割 处 粘贴 一 个 典型 提示 图 案 ， 分 割 手法 灵活 多 变 ， 营 造 出 和 谐 统 一 的 
美感 。 


11.4.3 ”水 平 垂 直 分 割 

水 平 垂直 分 割 是 将 水 平 与 垂直 分 割 同时 使 用 ,它们 之 间 容 易 形成 对 比 关 系 ， 较 之 单 向 分 割 更 为 丰 
、 实 用 而 灵活 多 变 。 下 面 举例 说 明 。 
| 如 图 11.22 所 示 ， 采 用 典型 的 “ 门 ” 型 构图 ， 艳 丽 的 嫩绿 色 和 略 带 变 化 的 分 割 方式 ， 打 破 了 构成 
| 方式 的 呆板 ， 使 页 面 更 具 个 性 化 和 青春 气息 。 
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11.21 垂直 变化 分 割 
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11.22 “ 门 ”型 构图 


如 图 11.23 所 示 ， 采 用 “ 匡 ” 型 构图 ， 顶 部 为 主 栏目 导航 ， 左 侧 为 次 级 栏目 导航 ， 由 于 两 个 页 面 
色调 的 冷暖 不 同 ， 给 人 以 不 同 的 视觉 心理 感受 。 
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图 11.23 “ 匡 ” 型 构图 
如 图 11.24 所 示 的 网 站 页 面 ， 在 左右 分 割 的 版 面 中 ， 以 贯穿 的 水 平 路 面 来 连接 左右 ， 标 志和 主 栏 
目 菜单 得 以 强化 而 突出 ， 同 时 ， 人 物 形 象 打破 了 分 割 界线 ， 人 物 目光 对 浏览 者 的 视线 进行 诱导 ， 这 些 
都 减弱 了 左右 对 比 ， 加 强 了 联系 ， 显 示 出 运动 性 网 站 的 力量 感 。 





| 11.24 ”运动 构图 
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如 图 11.25 所 示 ， 一 改 常规 的 版 式 构图 ， 将 主 栏目 菜单 置 于 页 面 右 侧 ， 左 边 为 主体 产品 形象 ， 明 
暗色 的 对 比 加 强 了 版 式 特征 ， 此 独到 之 处 十 分 吸引 人 。 
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| 
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| 
图 11.25 ”逆向 构图 | 

至 于 其 他 几 种 版 式 构成 的 类 型 ， 与 前 面 介 绍 的 视觉 流程 类 型 几乎 完全 相同 ， 这 里 不 再 熬 述 。 网 页 | 
界面 的 版 式 设计 实际 上 没有 固定 的 格式 可 循 , 在 实际 的 设计 实务 中 , 我 们 还 应 根据 网 页 界面 的 内 容 和 | 
要 求 ， 勇 于 突破 传统 和 形式 框架 的 束缚 ， 突 破 创新 。 | 
| 

! 

上 

下 

下 

! 

上 
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任何 一 个 网 站 ， 在 建站 之 初 都 会 有 一 个 设想 ， 或 者 说 有 一 种 期 望 ， 希 望 站 点 能 帮助 实现 不 
同 的 愿望 ， 例 如 ， 宣 传 企业 形象 、 商 业 赢利 ， 或 者 内 部 信息 交流 等 。 不 论 是 正规 的 商业 网 站 还 
是 个 人 网 站 ， 要 想 把 网 页 做 得 丰富 多 彩 ， 吸 引 大 量 浏览 者 访问 ， 网 站 策划 设计 是 至 关 重 要 的 。 

网 站 开发 是 一 门 艺术 ， 也 是 一 项 技术 。 需 要 开发 者 的 创意 和 设计 ， 当 然 也 要 遵循 一 定 的 规 
范 。 经 过 无 数 网 站 设计 师 多 年 的 总 结 和 经 验 ， 网 站 设计 形成 了 很 多 固定 的 操作 规范 ， 理 解 和 运 
用 这 些 规范 会 给 开发 工作 带 来 方便 。 在 网 站 开发 中 建立 一 套 既 定 的 规范 无 疑 会 建立 良好 的 沟通 
和 合作 基础 ， 极 大 地 提高 工作 效率 


【 学 习 重 点 】 

了 网 站 定位 

网 站 创意 

网 站 设计 与 材料 搜集 
制订 网 站 规划 
设计 网 站 结构 

网 站 目录 和 文件 规范 


至 至 至 至 至 
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12.1 网 站 定位 


有 效 的 策划 归于 策划 人 的 信息 与 设想 的 浏览 者 之 间 是 否 默契 的 交流 。 尽 管 这 听 起 来 很 抽象 , 但 要 ， 


明白 在 网 络 上 浩如烟海 的 信息 中 ， 人 们 被 网 络 、 电 子 信箱 、 人 信件、 报纸 、 商 业 广告 、 路 边 广告 等 各 种 
信息 充斥 着 ， 如 何 才能 使 自己 的 信息 得 到 人 们 的 注意 并 由 此 产生 效果 。 有 效 策划 的 第 一 步 要 明确 下 面 
4 个 问题 。 

确定 网 站 想 要 表达 什么 ? 

浏览 者 为 什么 需要 这 些 信 息 ? 

准备 给 浏览 者 留 下 什么 样 的 印象 ? 

让 浏览 者 看 完 信息 之 后 有 什么 反应 ? 

回答 这 些 问题 时 ， 其 实 已 经 在 向 制作 出 一 个 能 达到 目的 的 网 站 前 进 了 一 步 。 


1 确定 网 站 想 要 表达 什么 


明确 自己 的 信息 ， 听 起 来 是 个 很 显然 的 道理 ， 但 有 很 多 网 站 就 是 在 这 一 点 上 做 得 很 不 好 。 用 户 不 
会 经 常 访问 那些 信息 很 混乱 的 网 站 , 这 些 网 站 看 过 之 后 甚至 还 不 能 确认 它 是 在 推销 商品 , 还 是 想 告诉 
有 关 信 息 ， 或 者 仅仅 只 是 在 浪费 浏览 者 的 时 间 。 

当 和 人们 访问 网 站 时 ,浏览 者 需要 尽快 了 解 网 站 的 信息 ， 需 要 对 此 产生 兴趣 ， 从 而 停留 在 那儿 、 学 
到 东西 、 做 出 反馈 。 通 过 明确 想 要 说 什么 ， 才 可 以 知道 信息 应 该 如 何 传递 。 

用 户 不 妨 使 用 草稿 纸 简单 记 下 想 要 告诉 观众 的 东西 ， 用 简单 的 话 来 描述 建站 的 目的 。 


12.1.2 了 解 浏览 者 为 什么 需要 这 些 信息 


抓 住 浏览 者 注意 力 的 关键 是 要 明白 他 们 需要 或 者 想 要 了 解 什么 信息 。 通 过 关注 观众 的 需求 , 可 以 
使 自己 更 容易 地 做 规划 ， 做 出 来 的 网 站 也 更 能 吸引 观众 。 
将 浏览 者 访问 网 页 的 可 能 存在 的 初衷 罗列 出 来 。 
解决 实际 问题 。 
浏览 网 页 很 舒服 。 
可 以 与 网 页 进行 交互 。 
了 解 奇闻 异 事 、 专 业 知 识 、 时 事 新 闻 。 
给 浏览 提供 机 会 。 
提高 个 人 思想 认识 。 
能 开阔 视野 。 
这 张 清单 并 不 包含 所 有 理由 ， 列 在 这 里 仅 作为 一 个 参考 。 如 果 可 能 ， 在 简要 记 下 浏览 者 需要 信息 
将 这 些 理由 区 分 一 下 先后 顺序 。 














一 纤 加 加 四 加 


已 : 


加 回回 轿 罗 罗网 


所 





哪些 卖点 最 可 能 获得 浏览 者 的 注意 力 ? 等 到 制订 网 站 结构 时 ， 这 些 理由 的 先后 顺序 会 有 一 些 | 


帮助 。 
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12.1.3 给 浏览 者 留 下 什么 样 的 印象 


彻底 了 解 站 点 给 人 的 印象 ， 可 以 从 以 下 几 个 方面 来 理 清 思路 。 
(1) 如 果 只 用 一 句 话 来 描述 自己 的 站 点 ， 应 该 是 ? 

参考 答案 : 

有 创意 ， 很 专业 ， 有 技术 ) 实力 ， 有 美感 ， 有 冲击 力 等 。 
(2) 想到 自己 的 站 点 ， 可 以 联想 到 的 色彩 是 ? 

参考 答案 : 

热情 的 红色 ， 幻 想 的 天 蓝 色 ， 聪 明 的 金黄 色 等 。 

(3) 想到 自己 的 站 点 ， 可 以 联想 到 的 画面 是 ? 

参考 答案 : 

一 份 早报 ， 一 辆 法 拉 利 跑车 ， 人 和 群 拥挤 的 广场 ， 杂 货 店 等 。 
(4) 如 果 网 站 是 一 个 人 ， 他 拥有 的 个 性 是 ? 

参考 答案 : 

思想 成 熟 的 中 年 人 ， 狂 野 奔放 的 牛仔 ， 自 信 逆 厚 的 创业 者 等 。 


(5) 作为 站 长 ， 希 望 给 浏览 者 的 印象 是 ? 

参考 答案 : 

和 敬业， 认真 投入 ， 有 深度 ， 负 责 ， 纯 真 ， 直 爽 ， 淑 女 等 。 

(6) 用 一 种 动物 来 比喻 ， 你 的 网 站 最 像 ? 

参考 答案 : 

猫 (神秘 高 贵 ) ， 座 (目光 锐利 ) ， 兔 子 〈 聪 明敏 感 ) ， 狮 子 〈 自 信 威 信 ) 等 。 
(7) 浏览 者 觉得 你 和 其 他 网 站 的 不 同 是 ? 

参考 答案 : 

可 以 信赖， 信息 最 快 ， 交 流 方便 等 。 

(8) 浏览 者 和 你 交流 合作 的 感受 是 ? 

参考 答案 : 

师 生 ， 同 事 ， 朋 友 ， 长 幼 。 

现在 可 以 自己 先 填写 一 份 答案 , 然后 让 其 他 网 友 填写 ,比较 后 的 结果 会 显示 自己 网 站 现在 的 差距 、 


| 弱点 及 需要 改进 的 地 方 。 


12.1.4 想 让 浏览 者 做 什么 


设想 网 站 制作 完毕 ， 浏 览 者 浏览 网 页 时 会 有 什么 行为 ? 列 一 个 清单 如 下 。 
回 ”发 邮件 向 站 点 获取 更 多 信息 。 
填写 订单 。 
回 ” 打 电话 购买 产品 或 服务 。 
回 “” 按 要 求 完成 调查 表 或 申请 表 。 
加 “参加 网 站 投票 。 
回 ”注册 会 员 。 
回 ” 把 站 点 加 入 收藏 严 ， 定 期 访问 。 
明确 想 让 浏览 者 做 什么 是 非常 重要 的 。 可 能 在 上 面 的 清单 里 没有 列 出 全 部 。 但 在 建站 时 一 定 要 确 
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信 已 经 记录 下 了 所 有 想 要 的 行为 ， 如 果 可 能 ， 将 它们 在 清单 上 按 优先 顺序 排 好 。 
122 网 站 创意 


创意 是 网 站 生存 的 关键 。 如何 挖 掘 创意 的 来 源 ? 一 个 出 色 的 创意 并 不 是 信 手 拓 来 的 ， 它 需要 完成 

很 多 工作 。 对 一 个 创意 策划 人 员 来 讲 ， 首 先 要 有 敏锐 的 头脑 去 捕捉 稍 纵 即 逝 的 灵感 ， 其 次 是 用 坚持 不 | 

懈 的 工作 来 实现 创意 。 | 
创意 到 底 是 什么 ， 如 何 产生 创意 呢 ? | 
创意 是 引人入胜 ， 精 彩 万 分 ， 出 奇 不 意 的 ; | 
创意 是 捕 提 出 来 的 点 子 ， 是 创作 出 来 的 奇 招 …… | 
创意 来 自生 活 。 一 个 好 的 创意 百 分 之 一 来 自 灵 感 ， 而 其 余 百 分 之 九 十 九 来 自 不 懈 的 努力 。 


12.2.1 创意 是 传达 信息 的 一 种 特别 方式 


例如 ，Web designer〔 网 页 设计 师 ) ， 我 们 将 其 中 的 EE 字母 大 写 : wEb dEsigEr， 感 觉 怎么 样 ， 这 | 
其 实 就 是 一 种 创意 。 

创意 并 不 是 天 才 者 的 灵感 ， 而 是 思考 的 结果 。 根 据 美国 广告 学 教授 詹姆斯 的 研究 ， 创 意思 考 的 过 
程 分 为 5 个 阶段 。 

回 “ 准备 期 : 研究 所 搜集 的 资料 ， 根 据 旧 经 验 ， 启 发 新 创意 。 

回 ” 旷 化 期 : 将 资料 咀嚼 消化 ， 使 意识 自由 发 展 ， 任 意 结合 。 

回 ”启示 期 : 意识 发 展 并 结合 ， 产 生 创意 。 

回 ”验证 期 : 将 产生 的 创意 讨论 修正 。 

加 ”形成 期 设计 制作 网 页 ， 将 创意 具体 化 。 


12.2.2 创意 是 将 现 有 的 要 素 重新 组 合 


例如 ， 网 络 与 电话 结合 ， 产 生 人 P 电话 。 从 这 一 点 上 出 发 ， 任 何人 都 可 以 创造 出 不 同 凡响 的 创意 。 
而 且 ， 资料 越 丰富 ， 越 容易 产生 创意 。 就 好 比 万 花 简 ， 简 内 的 玻璃 片 越 多 ， 所 呈现 的 图 案 越 多 。 如 果 
有 心 可 以 发 现 ， 网 络 上 最 多 的 创意 来 自 与 现实 生活 的 结合 (或 者 虚拟 现实 ) ， 例 如 在 线 书店 、 电 子 社 | 
区 、 在 线 拍卖 。 

创意 思考 的 途径 最 常用 的 是 联想 ， 这 里 提供 了 网 站 创意 的 25 种 联想 线索 。 
把 它 颠倒 。 
把 它 缩小 。 
把 颜色 换 一 下 。 
使 它 更 长 。 
使 它 闪 动 。 
把 它 放 进 音乐 里 。 
结合 文字 音乐 图 画 。 
使 它 成 为 年 轻 的 。 
使 它 重复 。 
使 它 变 成 立体 。 











加 


办 办 办 办 办 办 办 办 轨 
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i 
参加 竞赛 。 

参加 打赌 。 
变更 一 部 分 。 

分 裂 它 。 

使 它 罗曼 蒂 克 。 
使 它 速度 加 快 。 
增加 香味 。 

使 它 看 起 来 流行 。 
使 它 对 称 。 

将 它 向 儿童 诉求 。 
价格 更 低 。 

给 它 起 个 绰号 。 
把 它 打包 。 

免费 提供 。 

以 上 各 项 延伸 组 合 。 


示 : 创意 的 目的 是 更 好 地 宣传 推广 网 站 。 如 果 创 意 很 好 ， 却 对 网 站 发 展 毫 无 意义 ， 那 么 创意 也 
就 没有 实用 价值 。 


因 办 办 办 办 办 办 办 办 办 办 四 办 色 国 


ee 


12.3 网 站 设计 与 素材 搜集 


网 站 设计 与 网 站 制作 是 有 区 别 的 。 它 们 的 区 别 在 于 设计 是 一 个 思考 的 过 程 ， 而 制作 只 是 将 思考 的 
结果 表现 出 来 。 一 个 成 功 的 网 站 首先 需要 一 个 优秀 的 设计 ， 然 后 辅 之 优秀 的 制作 。 设 计 是 网 站 的 核心 
和 灵魂 ， 一 个 相同 的 设计 可 以 有 多 种 制作 表现 的 方式 。 


12.3.1 设计 网 站 主题 和 名 称 


设计 一 个 站 点 ， 首 先 过 到 的 问题 就 是 定位 网 站 主题 。 
所 谓 主题 也 就 是 你 的 网 站 的 题材 。 网 络 上 的 网 站 题材 千奇百怪 ， 琳 琅 满 目 。 只 要 想得到 ， 就 可 以 
| 把 它 制作 出 来 。 下 面 是 美国 《个 人 电脑 》 杂 志 (PC Magazine) 评 出 的 排名 前 100 位 的 全 美 知名 网 站 
| 的 10 类 题材 。 
| 第 1 类 : 网 上 求职 。 
| 第 2 类 : 网 上 /即时 信息 。 
第 3 类 : 网 上 社区 /讨论 /邮件 列表 。 
第 4 类 : 计算 机 技术 。 
第 5 类 : 网 页 /网 站 开发 。 
第 6 类: 娱乐 网 站 。 
第 7 类 : 旅行 。 
| 第 8 类 : 参考 /资讯 。 
| 第 9 类 : 家 庭 /教育 。 
| 第 10 类 : 生活 /时 尚 。 
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每 个 大 类 都 可 以 继续 细 分 ， 例 如 ， 娱 乐 类 再 分 为 体育 /电影 /音乐 大 类 ， 音 乐 又 可 以 按 格式 分 为 
MP3、VQF、Ra， 按 表现 形式 分 古典 、 现 代 、 摇 滚 等 。 以 上 都 只 是 最 常见 的 题材 ， 还 有 许多 专业 的 、 
另类 的 、 独 特 的 题材 可 以 选择 ， 如 中 医 、 热 带鱼 、 天 气 预报 等 ， 同 时 ， 各 个 题材 相 联系 和 交叉 结合 下 


以 产生 新 的 题材 ， 例 如 ， 旅 游 论 坛 旅游 + 讨论 ) ， 经 典 足球 播放 《足球 + 影视 ) 按 这 样 分 下 去 ， 题 材 | 


可 以 有 成 干 上 万 个 ， 你 不 会 再 为 题材 重复 ， 难 以 选择 而 烦恼 了 。 
其 实 网 站 名 称 也 是 网 站 设计 的 一 部 分 ， 而且 是 很 关键 的 一 个 要 素 。 例 如 “电脑 学 习 室 ”和 “电脑 





之 家 ”显然 是 后 者 简练 ，“ 迷 笛 乐园 ”和 “MIDI 乐园 ”显然 是 后 者 明晰 ; “儿童 天 地 ”和 “中 国 幼 | 
儿 园 ”显然 是 后 者 大 气 。 和 现实 生活 中 一 样 ， 网 站 名 称 是 否 正气 、 响 亮 、 易 记 ， 对 网 站 的 形象 和 宣传 | 


推广 也 有 很 大 影响 。 下 面 列 出 3 点 建议 。 

回 “ 名 称 要 正 。 就 是 要 合法 、 合 理 、 合 情 。 不 能 用 反动 的 、 色 情 的 、 迷 信 的 或 危害 社会 安全 的 
名 词语 句 。 

回 ”名 称 要 易 记 。 根 据 中 文 网 站 浏览 者 的 特点 ， 除 非特 定 需要 ， 网 站 名 称 最 好 用 中 文 名称 ， 不 
要 使 用 英文 或 者 中 英文 混合 型 名 称 。 如 beyond studio 和 超越 工作 室 ， 后 者 更 亲切 好 记 。 另 
外 ， 网 站 名 称 的 字数 应 该 控制 在 6 个 字 (最 好 4 个 字 ) 以 内 ， 如 “XX 阁 ”“XX 设计 室 ”， 
4 个 字 的 可 以 用 成 语 ， 如 “一 网 打 进 ”。 字 数 少 还 有 个 好 处 ， 一 般 友 情 链 接 的 小 LOGO 尺 
寸 是 88x31， 而 6 个 字 的 宽度 是 78 左右 ， 适 合 于 其 他 站 点 的 链接 排版 。 


回 名 称 要 有 特色 。 名 称 平实 就 可 以 接受 ， 如 果 能 体现 一 定 的 内 涵 ， 给 浏览 者 更 多 的 视觉 冲击 | 


和 空间 想象 力 ， 则 为 上 品 。 如 音乐 前 卫 、 网 页 陶 吧 、 天 籁 绝 音 。 在 体现 出 网 站 主题 的 同时 ， 
能 点 出 特色 之 处 。 
总 之 ,定位 题材 和 名 称 是 设计 一 个 网 站 的 第 一 步 ， 也 是 很 重要 的 一 部 分 。 如 果 能 找到 一 个 满意 的 
名 称 ， 花 一 天 时 间 翻 字典 也 是 值得 的 。 


12.3.2 ”确定 网 站 的 栏目 和 版 块 


建立 一 个 网 站 好 比 写 一 篇 文章 ， 首 先 要 拟 好 提纲 ， 文 章 才能 主题 明确 ， 层 次 清晰 ， 也 好 比 造 一 座 
高 楼 ， 首 先 要 设计 好 框架 图 纸 ， 才 能 使 楼 房 结构 合理 。 

初学 者 最 容易 犯 的 错误 就 是 : 确定 题材 后 立刻 开始 制作 。 当 一 页 一 页 制作 完毕 后 才 发 现 网 站 结构 
不 清晰 , 目录 庞杂 , 内容 东 一 块 西 一 块 。 结果 不 但 浏览 者 看 得 糊涂 ,自己 扩充 和 维护 网 站 也 相当 困难 。 

栏目 的 实质 是 一 个 网 站 的 大 纲 索引 ， 索引 应 该 将 网 站 的 主体 明确 显示 出 来 。 在 制定 栏目 时 ， 要 仔 
细 考 虑 ， 合 理 安排 。 一 般 的 网 站 栏目 安排 要 注意 以 下 几 方 面 。 

加 ”一 定 记 住 要 紧 扣 网 站 的 主题 。 

一 般 的 做 法 是 : 将 主题 按 一 定 的 方法 分 类 并 将 它们 作为 网 站 的 主 栏目 。 主题 栏目 个 数 在 总 栏目 中 
要 占 绝对 优势 ， 这 样 的 网 站 显得 专业 ， 主 题 突出 ， 容 易 给 人 留 下 深刻 印象 。 

回 。” 设 一 个 最 近 更 新 或 网 站 指南 栏目 。 

如 果 首 页 没有 安排 版 面 放置 最 近 更 新 内 容 信息 ， 就 有 必要 设立 一 个 “最 近 更 新 ”的 栏目 。 这 样 做 
是 为 了 照顾 常 来 的 访客 ， 让 网 站 的 主页 更 有 人 性 化 。 

如 果 主 页 内 容 庞大 〈 超 过 13MB )， 层 次 较 多 ， 而 又 没有 站 内 的 搜索 引擎 ， 最 好 设置 “本 站 指南 ” 
栏目 。 可 以 帮助 初 访 者 快速 找到 他 们 想 要 的 内 容 。 

回 ” 设 定 一 个 可 以 双向 交流 的 栏目 。 

不 需要 很 多 ， 但 一 定 要 有 。 如 论坛 、 留 言 本 、 邮 件 列表 等 ， 可 以 让 浏览 者 留 下 他 们 的 信息 。 有 调 
查 表明 ， 提 供 双向 交流 的 站 点 比 简单 的 留 一 个 E-mail 的 站 点 更 具有 亲和力 。 
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Note 


回 ” 设 一 个 下 载 或 常见 问题 回答 栏目 。 
网 络 的 特点 是 信息 共享 。 如果 看 到 一 个 站 点 有 大 量 的 优秀 的 有 价值 的 资料 肯定 希望 能 一 次 性 下 


| 载 ， 而 不 是 一 页 一 页 浏览 存盘 。 在 自己 的 主页 上 设置 一 个 资料 下 载 栏目 ， 会 得 到 大 家 的 喜欢 。 有 些 站 
| 点 为 了 广告 显示 量 ， 一 篇 文章 还 要 分 几 页 显示 ， 这 就 显得 比较 费劲 。 另 外 ， 如 果 站 点 经 常 收 到 网 友 关 
| 于 某 方面 的 问题 来 信 ， 最 好 设立 一 个 常见 问题 回答 的 栏目 ， 既 方便 了 网 友 ， 也 可 以 节约 自己 更 多 时 间 


用 以 学 习 。 
至 于 其 他 的 辅助 内 容 ， 如 关于 本 站 、 版 权 信息 等 可 以 不 放 在 主 栏目 里 ， 以 免 冲 淡 主题 。 总 结 以 上 


| 几 点 ， 得 出 划分 栏目 需要 注意 以 下 方面 : 


回 ” 尽 可 能 删除 与 主题 无 关 的 栏目 。 

加 ” 尽 可 能 将 网 站 最 有 价值 的 内 容 列 在 栏目 上 。 

加 ” 尽 可 能 方便 访问 者 的 浏览 和 查询 。 

上 面 说 的 是 栏目 , 我 们 再 看 看 版 块 设置 。 版 块 比 栏目 的 概念 要 大 一 些 , 每 个 版 块 都 有 自己 的 栏目 。 


| 举 个 例子 : 网 易 的 站 点 分 新 闻 、 体 育 、 财 经 、 娱 乐 、 教 育 等 版 块 ， 每 个 版 块 下 面 又 各 有 自己 的 主 栏目 。 


一 般 的 个 人 站 点 内 容 少 ， 只 有 主 栏目 ( 主 菜单 ) 就 够 了 ， 不 需要 设置 版 块 。 如 果 自 己 觉得 的 确 有 必要 
设置 版 块 的 ， 应 该 注意 以 下 方面 : 

各 版 块 要 有 相对 独立 性 。 

各 版 块 要 有 相互 关联 。 

版 块 的 内 容 要 围绕 站 点 主题 。 

关于 版 块 方面 ， 主 要 是 门户 站 点 等 较 大 ICP 需要 考虑 的 问题 ， 一 般 小 型 网 站 可 以 忽略 。 


12.3.3 ”搜集 素材 


多 好 的 想法 如 果 不 能 被 很 好 地 表现 ,那么 也 无 法 被 认可 , 现在 的 任务 就 是 在 网 络 上 对 所 有 有 助 于 
自己 的 相关 材料 进行 搜集 。 

下 面 是 一 些 可 以 搜集 到 的 书面 内 容 
公司 传销 材料 〈 销 售 说 明 ， 内 容 说 明 ) 。 
公司 情况 说 明 书 。 
广告 。 
新 闻 稿 〈 包 括 传单 、 招 贴画 、 邀 请 信 ) 。 
课程 指南 。 
公司 培训 资料 手册、 指南 ) 。 
期 刊 〈 报 纸 、 杂 志 、 公 告 ) 。 
表格 〈 订 单 、 调 查 表 、 申 请 表 ) 。 

寻找 如 下 类 别 的 图 像 : 

回 ”照片 (可 能 的 话 要 原始 图 片 ) 。 

回 ”美术 作品 〈 标 识 、 插 图 、 图 标 、 标 示 牌 ) 。 

不 管 是 图 片 ， 还 是 美术 作品 ， 有 可 能 的 话 最 好 使 用 原 图 。 大 多 数 复制 到 印刷 品 上 例如 杂志 和 报 
纸 ) 的 图 片 采用 了 过 渡 调 色 技 术 (有 时 是 指 经 过 过 滤 ) ， 这 是 一 个 可 以 让 图 片 在 纸 上 看 起 来 更 好 一 些 
的 优化 过 程 。 过 渡 调 色 技 术 可 以 产生 非常 漂亮 的 打印 输出 ,然而 将 其 扫描 作为 网 络 图 片 时 ,会 看 到 有 
非常 难看 的 点 状 图 案 ， 被 称 为 波纹 图 案 。 除 非 用 非常 复杂 的 图 片 编辑 软件 ， 否 则 很 难 将 其 除去 。 

下 面 是 能 搜集 到 的 其 他 材料 : 


国共 办 办 罗 
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录像 〈 广 告 、 公 司 的 录像 ) 。 

新 闻 文 章 〈 印 刷 品 、 声 音 、 网 上 文章 或 者 录像 带 等 ) 。 
URL 地 址 。 

分 类 的 参考 资料 。 


办 办 办 办 


12.4 制订 网 站 规划 


开发 者 在 与 客户 达成 协议 之 后 ， 应 不 要 急于 着 手 制作 ,可 先 仔细 分 析 客户 的 需求 并 结合 自己 的 经 
验 拟 一 份 初步 的 网 站 建设 方案 给 客户 。 这 是 很 关键 的 一 步 , 与 客户 进行 良好 的 沟通 将 为 后 面 工作 省 去 
很 多 不 必要 的 麻烦 。 


12.4.1 制作 规划 中 的 几 个 问题 


写 规划 时 不 要 为 了 省 事 而 套用 原来 的 或 类 似 的 规划 方案 。 很 多 客户 虽然 不 是 电脑 高 手 , 但 是 在 看 
文档 时 格外 的 仔细 ， 尤 其 是 对 电子 文件 ， 甚 至 会 去 看 看 你 的 属性 ， 是 谁 写 的 ， 写 给 谁 的 ， 这 样 的 客户 
会 让 人 十 分 恼火 ， 但 是 他 们 的 做 法 无 可 挑剔 。 所 以 ， 在 写 规划 文案 时 尽量 不 用 原来 的 文件 修改 另存 。 

写 规划 时 要 全 面 考虑 问题 ， 能 站 在 不 同 的 角度 、 利 用 不 同 的 方法 去 思考 问题 。 例 如 : 

作为 运营 者 ， 可 能 关心 的 是 成 本 、 费 用 、 收 益 ， 也 就 是 自己 想 做 什么 ， 做 想 做 的 要 花费 多 少 ， 花 
费 后 自己 可 以 得 到 什么 。 因 而 ， 对 于 运营 者 的 规划 方法 就 是 让 他 们 能 够 认为 物 有 所 值 ， 这 里 说 的 价值 
不 但 是 网 站 设计 本 身 的 ， 还 有 就 是 在 运营 过 程 中 得 到 的 。 

作为 技术 实施 者 ， 可 能 关心 的 是 技术 难度 、 实 施 过 程 、 最 终 效果 ， 也 就 是 从 技术 角度 对 功能 实现 
的 简单 或 困难 程度 ， 实 现 某 功能 所 需要 经 过 的 必然 阶段 和 技术 实现 后 可 以 呈现 在 大 家 面前 的 最 终 效 
果 。 因 而 ， 对 于 技术 实施 者 的 规划 方法 就 是 让 他 们 有 发 挥 的 空间 ， 对 他 们 存在 某 些 技术 挑战 ， 而 避免 
技术 实施 者 因为 网 站 的 简单 化 或 者 模块 化 而 消极 的 应 对 ,一旦 技术 人 员 消 极 , 那么 最 终 损失 的 不 是 用 
户 ， 而 是 企业 本 身 。 

作为 一 般 浏览 者 ， 能 关心 的 是 内 容 、 效 果 、 实 用 程度 ， 也 就 是 是 否 有 自己 需要 的 东西 ， 是 否 搭配 
协调 浏览 舒适 ， 是 否 操作 简单 、 方 便 。 因 而 ， 对 于 一 般 浏览 者 的 规划 方法 就 是 让 网 站 结构 尽量 扁平 ， 
可 以 让 用 户 在 最 短 的 时 间 内 了 解 整个 网 站 所 要 展现 的 主要 内 容 。 同 时 ,一 般 的 浏览 者 更 关心 的 是 产品 
和 可 以 得 到 的 服务 ， 而 不 是 什么 公司 资格 、 公 司 介绍 之 类 的 东西 ， 因 而 产品 /服务 正在 逐步 地 成 为 各 
个 网 站 中 第 一 个 被 介绍 给 一 般 浏览 者 的 事物 。 

写 规划 时 要 把 功能 和 栏目 《内容 ) 进行 绑 定 , 避免 出 现 功能 一 个 不 少 但 被 压缩 到 了 3~5 个 栏目 (内 
容 ) 中 削减 费用 ， 或 者 栏目 《内 容 ) 一 个 不 少 ， 功 能 被 极力 压缩 ， 做 了 半天 没 赚 头 。 

例如 ， 某 企业 做 站 点 就 需要 企业 介绍 、 企 业 新 闻 、 产 品 介绍 、 联 系 方式 、 留 言 板 5 个 基本 单元 ， 
如 果 按照 通常 的 习惯 企业 介绍 、 产 品 介绍 、 联 系 方式 用 静态 页 面 ， 企 业 新 闻 、 留 言 板 用 动态 ， 很 多 企 
业 会 选择 企业 新 闻 使 用 静态 页 面 ， 理 由 是 新 闻 少 ， 没 必要 用 动态 。 而 这 时 就 会 出 现 费用 问题 ， 如 果 说 
一 个 新 闻 模 块 是 1000 元 ， 而 改 为 静态 最 多 也 就 50 元 /页 ， 致 使 原本 只 有 2000~3000 元 的 交易 变 成 了 
1000 元 左右 ， 而 后 续 的 服务 更 是 难 做 了 。 而 如 果 换 个 方法 ， 将 企业 介绍 和 企业 新 闻 合 并 还 叫 企业 介 
绍 ， 其 中 不 但 有 企业 介绍 、 企 业 新 闻 ， 而 且 还 可 以 让 企业 自由 发 布 任何 其 他 信息 ， 如 总 经 理 致辞 、 企 
业 结 构图 等 ， 这 样 就 等 于 将 一 个 简单 的 栏目 变 成 了 复杂 的 ， 可 以 突出 企业 的 同时 突出 其 领导 人 物 个 人 
形象 的 ， 管 理 者 一 般 就 不 会 轻易 地 在 这 样 的 栏目 中 开刀 了 。 
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12.4.2 ”网 站 规划 书 


网 站 规划 书 应 该 尽 可 能 涵盖 网 站 规划 中 的 各 个 方面 ， 其 包含 的 内 容 如 下 。 

1. 市 场 分 析 

加 ”相关 行业 的 市 场 是 怎样 的 ， 市 场 有 什么 样 的 特点 ， 是 否 能 够 在 互联 网 上 开展 公司 业务 。 

加 ”市 场 主要 竞争 者 分 析 ， 竞 争 对 手 上 网 情况 及 其 网 站 规划 、 功 能 作用 。 

公司 自身 条 件 分析 、 公 司 概况 、 市 场 优 势 ， 可 以 利用 网 站 提升 哪些 竞争 力 ， 建 设 网 站 的 能 
力 ( 费 用 、 技 术 、 人 力 等 )。 

2 功能 定位 

为 什么 要 建立 网 站 ， 是 为 了 宣传 产品 ， 进 行 电子 商务 ， 还 是 建立 行业 性 网 站 ， 是 企业 的 需 
要 还 是 市 场 开 拓 的 延伸 。 

回 ”整合 公司 资源 ， 确 定 网 站 功能 。 根 据 公司 的 需要 和 计划 ， 确 定 网 站 的 功能 : 产品 宣传 型 、 
网 上 营销 型 、 客 户 服务 型 、 电 子 商务 型 等 。 

回 “ 根 据 网 站 功能 ， 确 定 网 站 应 达到 的 目的 作用 。 

回 ”企业 内 部 网 (Intranet) 的 建设 情况 和 网 站 的 可 扩展 性 。 

3.， 技术 解决 方案 

根据 网 站 的 功能 确定 网 站 技术 解决 方案 。 

加 ”采用 自 建 服务 器 ， 还 是 租用 虚拟 主机 。 

回 ”选择 操作 系统 ， 用 UNIX、Linux 还 是 Windows 2000/NT。 分 析 投 入 成 本 、 功 能 、 开 发 、 稳 
定性 和 安全 性 等 。 

加 ”采用 系统 性 的 解决 方案 (如 IBM、HP 等 公司 提供 的 企业 上 网 方案 ) 、 电 子 商务 解决 方案 ， 

还 是 自己 开发 。 

网 站 安全 性 措施 ， 防 黑 、 防 病毒 方案 。 

相关 程序 开发 ， 如 网 页 程序 ASP、JSP、CGI、 数 据 库 程序 等 。 

4.， 内容 规 划 

根据 网 站 的 目的 和 功能 规划 网 站 内 容 。 

回 一般 企业 网 站 应 包括 公司 简介 、 产 品 介绍 、 服 务 内 容 、 价 格 信 息 、 联 系 方式 、 网 上 订单 等 
基本 内 容 。 

加 ”电子 商务 类 网 站 要 提供 会 员 注 册 、 详 细 的 商品 服务 信息 、 信 息 搜 索 查询 、 订 单 确认 、 付 款 、 
个 人 信息 保密 措施 、 相 关 帮 助 等 。 

回 。 如果 网 站 栏目 比较 多 ， 则 考虑 采用 网 站 编程 专人 负责 相关 内 容 。 

网 站 内 容 是 网 站 吸引 浏览 者 最 重要 的 因素 , 无 内 容 或 不 实用 的 信息 不 会 吸引 匆匆 浏览 的 访客 。 可 


加 加 


事先 对 人 们 和 希望 阅读 的 信息 进行 调查 ， 并 在 网 站 发 布 后 调查 人 们 对 网 站 内 容 的 满意 度 ， 以 及 时 调整 网 
站 内 容 。 


5. 网 页 设计 

回 ”网 页 美术 设计 一 般 要 与 企业 整体 形象 一 致 ， 要 符合 CI 规范 。 要 注意 网 页 色彩 、 图 片 的 应 用 
及 版 面 规划 ， 保 持 网 页 的 整体 一 致 性 。 

在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 、 年 龄 阶层 、 网 络 速度 、 阅 读 习 
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惯 等 。 
加 ”制订 网 页 改版 计划 ， 如 半年 到 一 年 时 间 进 行 较 大 规模 改版 等 。 
6. 网 站 维护 
回 ”服务 器 及 相关 软 硬 件 的 维护 ， 对 可 能 出 现 的 问题 进行 评估 ， 制 定 响 应 时 间 。 
回 ”数据 库 维护 ， 有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 ， 因 此 数据 库 的 维护 要 受到 重视 。 
回 “内容 的 更 新 、 调 整 等 。 
回 ”制定 相关 网 站 维护 的 规定 ， 将 网 站 维护 制度 化 、 规 范 化 。 
7. 网 站 测试 
网 站 发 布 前 要 进行 细致 周密 的 测试 ， 以 保证 正常 浏览 和 使 用 。 主 要 测试 内 容 有 以 下 方面 。 


加 “网 页 兼容 性 测试 ， 如 浏览 器 。 

回 ”根据 需要 的 其 他 测试 。 

8 发布 与 推广 

网 站 测试 后 进行 发 布 与 公关 、 广 告 活动 。 


12.5 网 站 结构 规划 


在 设计 网 站 界面 之 前 ,不 妨 先 勾画 出 站 点 结构 图 。 心 中 有 了 蓝图 ， 就 有 助 于 构建 网 站 的 某 一 部 分 
或 者 某 个 网 页 。 注意， 网 站 有 许多 类 型 ， 并 不 是 所 有 网 站 的 设计 目的 都 是 让 用 户 尽快 找到 所 需要 的 信 
息 。 有 些 网 站 完全 是 为 娱乐 目的 而 设计 的 ， 有 些 则 是 教育 用 的 ， 所 以 其 界面 设计 应 当 能 引导 用 户 ,而 
不 是 让 他 们 自己 找 路 。 

12.5.1 网 站 结构 

网 站 结构 指 的 是 网 站 中 各 网 页 页 面 是 如 何 组 织 在 一 起 的 。 网 站 结构 有 3 种 基本 类 型 , 即 层次 结构 、 
线性 结构 、 网 状 结构 。 

1， 层 次 结构 

层次 结构 是 网 站 制作 最 常用 的 一 种 结构 。 在 一 个 层次 化 的 网 站 结构 中 , 浏览 者 可 以 很 容易 地 知道 
自己 在 网 站 中 的 位 置 。 单 击 上 一 级 链接 ， 可 以 获得 更 广泛 的 信息 ， 而 单 击 下 一 级 链接 可 获得 更 具体 的 
信息 。 

在 层次 结构 中 , 主页 对 它 以 下 的 内 容 提供 了 总 体 概览 , 还 定义 了 一 些 指向 更 深层 次 的 页 面 的 链接 。 
如 图 12.1 所 示 页 面 顶部 ， 通 过 导航 栏 和 位 置 提示 栏 浏览 者 可 以 轻松 在 网 站 中 定位 。 

2. 线性 结构 











另 一 种 组 织 网 页 文档 的 方式 是 使 用 线性 或 是 有 序 的 组 织 。 在 一 个 线性 结构 中 ， 主 页 是 题目 , 或 者 | 














是 介绍 ,而 其 他 的 页 面 则 是 按照 这 种 结构 有 序 地 跟从 。 在 一 个 严格 的 线性 结构 中 ,链接 从 一 个 页 面 到 
另 一 个 页 面 ， 典 型 地 说 是 向 前 向 后 。 由 于 只 有 极 少 的 地 方 可 以 去 ， 所 以 在 一 个 线性 结构 中 ， 一 般 可 以 
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图 12.1 层次 结构 
如 图 12.2 所 示 的 页 面 底 部 显示 的 页 码 数字 导航 链接 ， 引 导 浏 览 者 在 一 条 线 上 前 后 定位 。 


从 " 慎 发 " 到 “ 试 父 要 儿 ” ， 
1128 125300 9 1 
石生 对 与 壬 ,为 了 科技 的 不 来 ， 即 重 交合 全 出丑 地 和 生活 趟 来 也 在 所 不 
偿 _ 这 工时 特 达 /TeslaHeabd 从 “ 视 怕 使 ”Flon Must 寺 上 后 SI 的 无 于 
要 气 与 节 身 气度 
反 陪 卫队 马 疡 完 


美 团 上 市 ， 还 有 哪些 隆 串 要 除了 
11-271525m 96 
在 大 众 吉 详 ， 训 度 隐 等 众 凶 志 争 对 于 的 赤 攻 下, 壬 图 开 发 有 和 和 蓉 气 拉 开 关 
不 ,后 而 发明 耻 守 在 去 而 之 下 的 隐 圭 也 开 只 证 录 更 出 丰 
2 PO 9 a 入 





图 12.2 线性 结构 
3， 网 状 结构 
网 状 结构 是 一 系列 具有 很 少 或 者 根本 不 具有 总 体 结构 的 文档 结构 。 将 每 个 页 面 系 在 一 起 的 唯一 东 
西 就 是 链接 。 网 状 结构 倾向 于 自由 流动 以 及 允许 浏览 者 无 序 地 在 各 个 页 面 之 间 跳 转 。 这 种 结构 需要 说 
| 慎 使 用 ， 如 果 用 户 浏览 该 网 点 时 ， 他 的 浏览 目的 是 无 序 或 随意 的 ， 那 么 可 以 使 用 这 种 模式 。 如 图 12.3 
所 示 ， 在 右 侧 主体 框架 页 里 ， 随 意 散 布 着 一 些 链接 ， 在 这 些 链接 之 间 没 有 任何 联系 〈 前 后 关系 、 父 子 
| 关系 ) ， 浏 览 者 可 以 随意 地 单 击 查看 想 要 的 内 容 。 
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12.3 网 状 结构 





12.5.2 ”设计 网 站 导航 规范 


1.， 当 导航 按钮 连接 到 当前 页 时 

为 达成 界面 设计 的 一 致 性 ,网 页 页 面 设计 者 可 让 该 按钮 不 再 具有 超 链接 的 功能 ; 或 将 该 按钮 的 彩 
度 、 亮 度 降 低 ( 如 深 绿色 变 成 淡 绿 色 、 亮 红色 变 成 暗 红色 ) ， 使 浏览 者 能 够 明白 导航 按钮 不 再 具有 超 
链接 的 功能 。 

2. 适当 、 有 效率 地 使 用 超 链 接 


适当 、 有 效率 地 使 用 超 链 接 ， 是 一 个 优良 的 导航 系统 不 可 或 缺 的 要 素 之 一 。 但 过 分 滥用 超 链接 ， 
j 损 害 了 网 页 页 面 行文 的 流畅 与 可 亲 性 。 








3 
) 六 





在 一 篇 长 短 适中 的 网 页 页 面 里 (3、4 个 屏幕 页 面 )， 文 章 里 提供 的 外 部 文字 式 超 链接 最 好 不 要 太 | 


多 ， 以 使 全 页 行文 能 够 顺畅 ， 而 浏览 者 也 不 至 于 眼见 一 大 堆 超 链 接 ， 反 而 不 知 从 何 浏览 才 好 。 如 果真 
有 那么 多 的 超 链接 必须 提供 给 浏览 者 , 不 妨 将 这 些 超 链 接 以 列表 的 方式 列 在 目录 页 上 , 或 者 放 在 页 面 
底部 ， 既 不 妨碍 行文 的 顺畅 ， 又 使 浏览 者 一 目 了 然 ， 如 图 12.4 所 示 。 





图 12.4 列表 的 形式 列 出 所 有 链接 
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| 3. 超 链 接 的 提示 字符 串 长 短 适 中 
| 让 超 链接 的 提示 字符 串 长 短 适中 且 行文 自然 ， 避 免 字符 串 过 长 〈 如 整 行 、 整 句 都 是 链接 字符 站 ) 
。 | 或 过 短 (如 仅 一 个 字 的 链接 ) 都 不 利于 浏览 者 的 阅读 或 单 击 。 
到 |] 4 注意 超 针 接 颜 色 与 单线 级 术 文字 的 颜色 区 别 
Note | 应 将 网 页 内 的 文本 颜色 与 超 链接 用 色 区 分 开 来 ， 方 便 浏览 。 例 如， 纯粹 的 叙述 文字 采用 较 暗 、 较 
| 深 的 颜色 来 呈现 ， 如 黑色 、 墨 绿色、 暗 褐色 ， 超 链接 文字 则 以 较 鲜明 抢眼 的 色彩 来 强调 ， 如 亮 黄色 、 
浴 绿 色 、 鲜 橘 色 ， 至 于 单 击 过 的 超 链接 则 采用 较 低 于 原 超 链接 亮度 的 颜色 显示 。 
5， 在 网 页 文件 里 提供 必要 的 链接 
将 篇 幅 过 长 的 文件 分 隔 成 数 篇 较 小 的 网 页 页 面 会 大 大 地 增加 界面 的 亲 和 性 , 但 在 导航 按钮 与 超 链 
接 的 配置 上 ， 网 页 页 面 设计 者 则 要 更 细心 周全 地 安排 ， 使 得 浏览 者 不 论 身 处 哪个 页 面 ， 都 能 够 快速 准 
| 确 地 找到 其 他 任何 一 个 页 面 。 
网 页 页 面 设计 者 应 特别 提供 “上 一 页 “下 一 页 “ 跳 到 子 目 录 页 ”与 “返回 首页 ”等 之 类 的 导 
航 按钮 或 超 链接 。 
6， 在 较 长 的 网 页 页 面 内 提供 目录 表 与 大 标题 
理想 的 网 页 页 面 长 度 以 不 超过 3、4 个 屏幕 页 面 为 佳 。 但 是 如 果 基于 某 些 特殊 理由 ， 网 页 页 面 一 
定 要 做 得 很 长 ， 那 么 不 要 忘 了 在 此 长 篇 的 网 页 页 面 最 上 头 ， 提 供 一 个 目录 表 ， 网 页 页 面 的 内 容 也 标 上 
大 小 标题 ， 以 利于 清楚 阅读 。 尤 其 重要 的 是 ， 在 这 些 标题 与 目录 表 里 分 别 设置 销 点， 以 使 网 页 页 面 真 
正 发 扬 互 动 性 、 便 捷 性 功能 。 


12.5.3 ”网 站 框架 规范 


网 站 要 具备 下 面 框架 规范 。 

1， 网 站 介绍 

背景 介绍 。 

回 ”栏目 介绍 〈 提 供 链接 ) 。 

2. 站 点 地 图 

结构 图 (提供 链接 )。 

3. 站 点 联系 方式 

网 站 管理 的 E-mail 地 址 (根据 需要 加 入 其 他 职能 负责 人 的 E-mail) 。 
通信 地 址 、 联 系 人 、 传 真 、 电 话 号 码 等 。 
4. 反馈 表 

反馈 表 应 该 包括 下 面 几 项 内 容 : 

姓名 。 

年 龄 。 

职业 。 

单位 。 

联系 方式 。 
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| 
回 ”意见 建议 。 | 
(根据 实际 情况 就 以 上 各 项 作 调 整 ， 力 求 简洁 有 效 ) | 
5 内容 及 栏目 设置 要 求 : 2 
在 每 页 中 都 要 包含 相关 的 、 引 人 入 胜 的 内 容 。 特 别 是 要 销售 一 种 产品 时 ， 每 个 页 面 都 要 用 | 鲜 
详细 的 内 容 和 图 像 精心 修饰 一 番 。 
网 页 上 的 语言 尽量 通俗 易 懂 。 
用 符号 突出 特别 重要 的 内 容 ， 不 要 过 多 ， 保 持 页 面 的 简洁 。 | 
不 要 把 站 点 建成 单纯 的 网 上 公司 介绍 ， 适 当 发 布 行业 信息 。 | 
常见 问题 解答 | 
将 所 有 问题 列 于 页 面 的 上 部 ， 并 将 每 个 问题 与 答案 链接 在 一 起 。 | 
对 专业 用 语 及 技术 术语 进行 解释 。 
回答 共性 问题 节省 网 管 和 访问 者 的 时 间 和 精力 。 | 
! 
搜索 工具 | 
在 搜索 框 中 输入 关键 词语 或 词组 ， 在 单 击 查寻 按钮 后 ， 本 站 相关 的 网 页 列表 就 会 出 现在 屏 | 
幕 中 。 
有 效 查寻 的 说 明 。 
新 闻 
在 最 新 更 新 的 信息 边 加 注 一 个 亮丽 的 小 图 标 “ 新 ”。 
为 最 新 消息 创建 单独 页 面 ， 并 在 一 段 时 间 后 将 新 闻 放置 于 适当 的 目录 下 。 
在 主页 或 每 个 页 面 下 加 注 一 行文 字 ， 表 明 本 站 点 或 每 个 单独 的 页 面 最 近 一 次 被 更 新 的 时 间 。 
提供 其 他 网 站 链接 ， 以 提供 更 多 相关 信息 。 
相关 站 点 链接 
每 个 链接 作 简要 说 明 ， 并 对 它 被 链接 的 原因 进行 冰 述 。 
每 周 对 各 链接 站 点 作 定期 的 访问 ， 删 除 那 些 死 链接 站 点 。 
为 站 点 创建 纯 文本 的 版 本 。 
10，VI 标准 化 要 求 
回 ”LOGO 及 中 英文 标准 字体 (包括 应 用 范例 )。 
回 。” 网 站 标准 色 〈 包 含 扩展 范例 ) 。 
链接 图 标 〈 尺 寸 : 88x3lpx/468x60px) 各 两 个 〈 包 括 应 用 范例 ) 。 
11. 网 站 建设 尺寸 规范 
页 面 标准 按 1024x768 分 辨 率 制作 ， 实 际 尺 寸 为 1000x600px。 
加 ”页面 长 度 原则 上 不 超过 3 屏 ， 宽 度 不 超过 1 屏 。 
回 
回 


加 
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加 
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加 图 罗 加 


沪 


回回 加 


全 尺寸 Banner 为 468x60px， 半 尺寸 Banner 为 234x60px， 小 Banner 为 88x3lpx。 
另外 120x90、120x60 也 是 小 图 标的 标准 尺寸 。 


12. 用 户 反馈 表 
网 站 中 应 该 有 用 户 反馈 表 ， 而 且 内 容 要 详细 。 


.459 。 


~ 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


12.6 网 站 目录 和 文件 规范 


在 网 站 开发 中 ， 目 录 和 文件 命名 是 有 讲究 的 。 好 的 文件 名 应 具有 通用 性 ， 即 一 个 工作 小 组 的 成 员 
都 能 够 方便 地 理解 每 一 个 文件 的 意义 ， 其 次 当 在 文件 夹 中 按 名 称 排序 时 ， 相 同类 别 的 文件 可 以 排列 在 
一 起 ， 以 便 进行 查找 、 修 改 或 蔡 换 。 


12.6.1 建立 目录 的 原则 


建立 目录 的 原则 是 以 最 少 的 层次 提供 最 清晰 简便 的 访问 结构 。 
一 般 网 站 根 目 录 中 可 以 建立 images、common、temp 3 个 子 目录 ， 根 据 需 要 也 可 以 建立 media 子 
目录 。 
images 目录 中 存放 不 同 栏目 的 页 面 用 到 的 公共 图 片 ， 如 LOGO、Banner、 导 航 菜单 、 按 钮 等 。 
common 子 目录 中 存放 CSS、js、php、include 等 公共 脚本 文件 。 
temp 子 目 录 存 放 客户 提供 的 各 种 文字 图 片 等 原始 资料 。 
media 子 目 录 中 存放 Flash、AVI、QnuickTime 等 多 媒体 文件 。 
原则 上 根 目 录 中 应 按照 首页 的 栏目 结构 , 给 每 一 个 栏目 建立 一 个 目录 文件 夹 , 根据 需要 在 每 一 个 
栏目 的 目录 中 建立 一 个 images 和 media 的 子 目录 用 以 放置 此 栏目 专 有 的 图 片 和 多 媒体 文件 ， 如 果 这 
个 栏目 的 内 容 特别 多 ， 又 分 出 很 多 下 级 栏目 ， 可 以 相应 原 地 再 建立 其 他 目录 。 
temp 目录 中 的 文件 往往 会 比较 多 ， 建 议 以 时 间 为 名 称 建 立 目 录 ， 将 客户 陆续 提供 的 资料 归 类 整理 。 
除非 有 特殊 情况 ， 目 录 、 文 件 的 名 称 全 部 用 小 写 英文 字母 、 数 字 、 下 划 线 的 组 合 ， 其 中 不 得 包含 
汉字 、 空 格 和 特殊 字符 ; 目录 的 命名 以 英文 为 主 ， 尽 量 不 要 以 拼音 作为 目录 名 称 ， 经 验证 明 ， 用 拼音 
命名 的 目录 往往 在 一 个 月 后 连 自己 都 看 不 懂 。 
根 目录 : 指 DNS 域名 服务 器 指向 的 索引 文件 的 存放 目录 。 
根 目录 文 件 : 根 目录 只 允许 存放 index.html (default.html 或 main.html) 首页 文件 ， 以 及 其 
他 必需 的 系统 文件 。 
每 个 语言 版 本 的 网 页 分 别 存 放 于 独立 的 目录 。 例 如 : 
> ”简体 中 文 网 页 存放 在 gb 目录 。 
> ”繁体 中 文 网 页 存放 在 big5 目录 。 
> ”英语 网 页 存放 在 en 目录 。 
> 日语 网 页 存放 在 jp 目录。 
每 个 主要 功能 ( 主 菜单 ) 建立 一 个 相应 的 独立 目录 。 
根 目 录 下 的 images 存放 公用 图 片 目录 ， 每 个 目录 下 的 私有 图 片 存放 于 各 自 独立 的 images 
目录 。 
回 ”所 有 的 JS 文件 存放 在 根 目录 下 的 \script 目录 。 
回 ”所 有 的 CSS 文件 存放 在 根 目录 下 的 \style 目录 。 


12.6.2 ”网 站 文件 命名 规范 


网 站 文件 命名 应 遵循 如 下 规范 : 
以 英文 命名 。 


办 办 罗 办 


四 加 


I 
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以 最 少 的 字母 达到 最 容易 理解 的 意义 ， 习 惯 上 根据 菜单 名 的 英语 翻译 取 主要 单词 为 文件 名 
称 ， 例 如 : 

> 关于 我 们 : about。 

> “信息 反馈 : feed。 

> ”产品 信息 : product。 

文件 名 应 小 写 。 

所 有 文件 名 字母 间 连 线 都 为 下 划 线 。 


加 加 加 


规范 为 “图 片 名 + +on/off”。 
下 面 以 “新 闻 ”( 包 含 “ 国 内 新 闻 ” 和 “国际 新 闻 ”) 这 个 栏目 来 说 明 html 文件 的 命名 原则 。 
在 根 目录 下 开设 news 目录 。 
第 一 条 默认 新 闻 取 名 index.htm。 
所 有 属于 “国内 新 闻 ” 的 新 闻 依次 取 名 为 china_1.htm、china_2.btm*…… 
所 有 属于 “国际 新 闻 ” 的 新 闻 依次 取 名 为 intemation_1.htm、intemation 2.htm*…*… 
如 果 文 件 的 数量 是 两 位 数 ， 请 将 前 9 个 文件 命名 为 china_01.htm、china_02.htm…… 以 保证 
所 有 的 文件 能 够 在 文件 夹 中 正确 排序 。 


回回 罗 回国 


12.7 案例 分 析 : 资讯 类 网 站 策划 和 设计 


资讯 站 是 指 以 文章 为 主 的 网 站 ， 这 是 互联 网 站 的 最 基本 组 成 形态 之 一 ， 也 是 Web 1.0 的 基本 表现 
形式 。 很 多 个 人 或 公司 建站 ， 都 是 从 资讯 站 开始 的 。 中 国 互 联网 上 最 具 代表 的 资讯 站 非 新 浪 莫 属 。 最 
早 的 新 浪 ， 只 专注 做 一 件 事 ， 就 是 把 传统 媒体 的 新 闻 搬 到 互联 网 上 ， 从 而 成 为 中 国 最 大 的 新 闻 门 户 。 

虽然 现在 大 唱 Web 2.0 应 用 型 网 站 ， 甚 至 连 新 浪 也 在 积极 寻求 转型 ， 进 行 二 次 创业 ， 但 是 资讯 站 
这 种 形式 绝 不 会 成 为 历史 。 相 反 ,， 在 很 长 一 段 时 间 内 ， 它 还 将 继续 作为 网 站 的 基本 形态 出 现在 互联 网 
上 ， 下 面 详细 介绍 如 何 运 营 和 推广 资讯 类 网 站 。 


12.7.1 资讯 站 的 定位 


做 网 站 的 第 一 步 是 先 定位 。 应 该 说 现在 做 资讯 类 网 站 是 比较 难 定位 的 ， 原 因 有 以 下 两 点 。 

第 一 ， 资 讯 站 是 最 早 、 最 基本 的 互联 网 站 形式 之 一 ， 数 量 最 多 ， 覆 盖 各 行 各 业 ， 用 户 能 想到 和 不 
能 想到 的 ， 基 本 上 都 有 人 做 了 。 

第 二 ， 资 讯 站 太 容易 被 复制 ， 哪 怕 我 们 花 10 年 做 了 一 个 资讯 站 ， 但 是 别人 用 一 套 好 的 采集 程序 ， 
可 能 一 夜 之 间 就 能 做 出 个 一 模 一 样 的 ， 甚 至 比 我 们 做 的 还 要 好 。 

所 以 ， 要 想 做 出 好 的 资讯 站 ， 还 得 从 差异 化 入 手 。 要 学 会 挖掘 空白 市 场 ， 或 是 在 现 有 的 市 场 中 挖 
掘 蓝海 。 这 里 和 大 家 分 享 4 种 做 网 站 策划 时 寻找 差异 化 的 思路 。 

1 行业 细 分 差异 化 


图 片 命名 原则 以 图 片 英语 字母 为 名 ， 如 网 站 标志 的 图 片 为 logo.gif， 鼠 标 感应 效果 图 片 命名 | 





互联 网 的 发 展 方向 ， 正 在 朝 着 精准 化 和 细 分 化 发 展 ， 这 是 未 来 的 趋势 ， 所 以 寻找 差异 化 时 ， 首 项 | 


考虑 的 也 是 细 分 化 差异 。 
众所周知 ， 阿 里 巴巴 是 B2B 领域 的 巨头 ， 基 本 上 可 以 说 是 一 家 独 大 ， 在 这 个 领域 很 难 有 人 与 之 
抗衡 。 但 并 不 是 说 B2B 领域 就 没 机 会 了 。 国 内 有 一 个 网 站 叫 “中 国 化 工 网 ”， 做 的 是 和 阿里 巴巴 一 
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更 页 字 计 与 网站 建设 从 入 门 到 灶 通 
样 的 事 , 也 是 行业 的 B2B, 但 是 人 家 一样 获得 了 成 功 。 原因 是 较 之 阿里 巴巴 的 大 而 全 ,其 定位 更 精准 ， 
只 专注 于 化 工 领域 

那 是 不 是 说 化 工 领域 也 没 机 会 了 呢 ? 也 不 一 定 。 中 国 还 有 一 个 网 站 叫 “ 中 国 香料 化 学 网 ”同样 


| 定位 于 B2B, 而 且 同样 是 化 工 领域 , 但 是 其 在 化 工 的 基础 上 又 继续 深入 细 分 了 市 场 ， 定 位 到 了 化 工行 
| 业 中 的 香料 领域 ， 也 取得 了 成 功 。 


2. 用 户 群 的 差异 化 

除了 从 行业 入 手 外 , 我 们 还 可 以 从 用 户 群 入 手 。 例 如 ，donews (http://www.donews.com/ )、admin5 
Chttp:/www.admins.com/) 、 推 一 把 (http:Wbbs.tuil8.com/)、17pr (http://www.17prcom/) 等 ， 同 样 
是 互联 网 领域 的 行业 网 站 ， 但 是 他 们 用 户 群 却 不 同 : donews 主要 是 针对 编辑 记者 ，admin5 主要 是 针 
对 站 长 ， 推 一 把 主要 是 针对 网 络 营销 推广 人 员 ，17pr 主要 是 针对 公关 人 员 。 

3. 用 户 行为 差异 化 


例如 , 落伍 者 (http://www.im286.com/) 、admins (http://www.admin5.com/) 和 chinaz (http:/www- 
chinaz.com/) 3 大 站 长 网 ， 虽 然 都 定位 于 站 长 人 群 ， 表 面 上 看 是 竞争 关系 ,但 是 却 没有 斗 得 鱼 死 网 破 ， 
反而 都 取得 了 巨大 成 功 。 其 原因 就 是 他 们 满足 的 用 户 需 求 不 同 ， 差 异化 明显 ， 互 不 干涉 。 

落伍 者 主打 的 是 社区 交流 功能 ， 沸 在 为 大 家 提供 一 个 交流 平台 ; admin5 最 早 主推 的 是 站 长 交 
易 , 重点 是 打造 一 个 安全 、 可 靠 的 站 长 交易 网 站 ; 而 chinaz 最 早 主攻 的 是 源码 下 载 ， 皆 在 打造 一 个 资 
源 仓库 。 

即使 是 同样 的 目标 人 群 ， 他 们 具体 的 行为 和 需求 也 是 不 尽 相同 的 ， 所 以 我 们 可 以 从 这 方面 入 手 。 
例如 ， 对 于 手机 消费 者 来 说 ， 他 们 的 消费 行为 有 3 个 阶段 : 交易 前 、 交 易 中 和 交易 后 ， 我 们 可 以 专门 


| 针对 他 们 交易 前 的 行为 和 需求 建站 。 


例如 ， 提 供 产 品 资讯 、 导 购 信息 、 产 品 库 等 ， 也 可 以 针对 交易 后 的 行为 和 需求 建站 ， 如 手机 的 维 
护 和 保养 、 手 机 使 用 技巧 、 手 机 软件 下 载 等 。 

4. 内 容 差异 化 

资讯 站 的 核心 是 内 容 ， 所 以 从 内 容 本 身 寻 求 差 异化 ， 非 常 有 必要 。 关 于 内 容 建设 应 该 遵循 “人 无 
我 有 、 人 有 我 全 、 人 全 我 精 、 人 精 我 专 、 人 专 我 独 ” 的 原则 。 
人 无 我 有 : 别人 没有 的 内 容 而 我 们 有 ， 就 是 特色 。 
人 有 我 全 : 如 果 该 有 的 内 容 大 家 都 有 了 ， 那 我 们 就 向 全 面 化 发 展 。 
人 全 我 精 ， 如 果 其 他 站 的 内 容 也 很 全 面 了 ， 那 我 们 就 要 向 精品 化 发 展 ， 只 做 精品 内 容 。 
人 和 精 我 专 ， 如 果 别 人 的 内 容 也 比较 精 了 ， 那 么 就 向 专业 化 发 展 ， 做 行业 内 最 专业 的 网 站 。 
人 专 我 独 : 如 果 行 业内 已 经 有 很 专业 的 网 站 了 ， 那 我 们 就 做 自己 特色 的 东西 。 

除了 以 上 几 点 外 ， 还 要 注意 名 字 策划 资讯 站 时 ， 要 尽量 定位 于 用 户 群 广 、 用 户 价值 高 的 领域 。 因 
为 资讯 站 的 主要 盈利 模式 基本 上 是 广告 ， 而 广告 的 价值 多 少 一 是 取决 于 点 击 量 ,二 是 取决 于 用 户 的 价 


办 办 轨 


| 值 ， 二 者 至 少 要 满足 其 一 。 


12.7.2 资讯 站 的 主题 分 类 
资讯 站 主要 提供 的 就 是 文章 阅读 ， 形 式 比较 单一 ， 所 以 应 主要 注重 的 是 用 户 体验 ， 内 容 的 品质 及 


用 户 找 内 容 的 便捷 程度 是 重 中 之 重 。 
说 到 内 容 品质 ， 其 实 很 多 人 都 知道 其 重要 性 ， 但 是 在 实际 操作 中 经 常 有 人 问 : 网 站 的 内 容 优质 ， 
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可 


可 为 什么 就 是 得 不 到 用 户 的 认可 ， 就 是 没有 流量 ? 这 是 因为 很 多 人 忽略 了 找 内 容 这 一 步 。 
中 国 的 互联 网 用 户 与 西方 的 互联 网 用 户 不 同 。 西方 互联 网 用 户 喜欢 主动 找 内 容 , 他 们 喜欢 享受 挖 














掘 内 容 的 过 程 ， 所 以 外 国 网 站 的 首页 都 比较 简练 。 而 中 国 的 互联 网 用 户 的 整体 特点 是 “ 懒 ”， 他 们 喜 | 


欢 被 动 接受 内 容 ， 他 们 希望 网 站 能 够 将 他 们 最 想 要 的 内 容 、 最 优质 的 内 容 主动 呈现 到 面前 。 所 以 衡量 | 


中 文 网 站 用 户 体验 好 坏 的 一 个 重要 因素 就 是 找 内 容 的 便捷 性 。 而 对 于 资讯 站 来 说 ,这 个 便捷 性 很 大 程 
度 是 体现 在 频道 及 栏目 的 分 类 上 。 


12.7.3 ”资讯 站 的 设计 要 点 
由 于 资讯 站 的 形式 比较 单一 ， 所 以 相对 于 其 他 网 站 来 说 ， 设 计 难度 相对 比较 低 。 下 面 介绍 设计 次 
讯 站 的 几 个 基本 要 点 。 


1. 页 面体 验 要 好 


用 户 在 资讯 站 是 以 看 为 主 ， 在 这 种 情况 下 , 研究 的 感官 体验 就 显得 至 关 重 要 。 所 以 就 需要 设计 一 
些 漂亮 的 页 面 模板 ， 给 用 户 一 个 好 的 视觉 享受 。 好 的 阅读 体验 ， 不 仅仅 是 提供 好 的 文章 。 


2. 更 新 定时 定量 


)5) 
) 六 





资讯 站 想 做 好 ， 内 容量 一 定 要 有 保证 ， 内 容 数量 和 质量 是 大 前 提 。 这 就 需要 资讯 站 每 天 保持 定时 | 


和 定量 的 更 新 。 例 如 ， 每 天 早 、 中 、 晚 更 新 3 次 。 这 么 做 一 是 可 以 让 用 户 随 时 看 到 新 内 容 ， 二 是 有 助 
于 搜索 引擎 优化 。 至 于 具体 的 更 新 量 ， 越 多 越 好 ， 但 是 不 要 浮动 太 大 。 如 今天 更 新 10 篇 ， 明 天 突然 
更 新 1000 篇 肯定 不 行 的 。 

3， 争 做 内 容 第 一 

作为 资讯 站 ,将 内 容 作 出 特色 是 必须 的 ， 而 不 管 什么 类 型 的 资讯 站 ， 一 个 共同 的 最 佳 卖点 就 是 精 
而 全 。 听 到 “ 精 ” 和 “全 ”这 两 个 字 不 要 害怕 ， 实 现 起 来 并 不 难 。 


最 简单 、 最 容易 执行 的 解决 方案 : 先 把 所 有 相关 内 容 源 网 站 收集 全 ,然后 将 其 内 容 (或 近 一 个 时 | 
期 内 的 内 容 ) 全 部 转载 或 采集 过 来 。 在 转载 的 过 程 中 ， 对 内 容 进 行 筛选 ， 去 粗 取 精 。 基 本 内 容 建 设 完 | 


毕 后 ， 每 天 转载 其 每 天 的 新 内 容 即 可 ， 然 后 在 这 个 基础 上 去 建设 原创 和 特色 内 容 。 
4. 找 内 容 的 便捷 性 
用 户 到 资讯 站 就 是 找 内 容 、 看 内 容 的 ， 所 以 用 户 在 你 的 站 点 找 内 容 是 否 方便 ， 非 常 重要 。 这 直接 
会 影响 到 用 户 的 阅读 体验 ， 也 是 决定 用 户 下 次 会 不 会 来 的 关键 。 如 何 增加 便捷 性 呢 ? 关键 点 有 两 个 。 
回 “前面 强调 的 将 频道 及 栏目 按照 用 户 的 习惯 细 分 。 
回 页面 内 的 导航 要 明确 ， 要 让 用 户 在 网 站 任意 页 面 中 都 能 够 清楚 地 知道 自己 的 位 置 ， 都 能 够 
很 快 地 找到 其 他 感 兴趣 的 内 容 ， 千 万 不 要 让 用 户 在 网 站 中 迷路 。 


5. 专题 


前 面 说 过 ， 提 升 网 站 内 容 检索 便捷 性 的 一 个 重要 手段 是 将 频道 与 栏目 细 分 ， 但 是 尽管 频道 与 栏目 分 
得 很 详细 ， 也 无 法 做 到 面面俱到 ， 而 且 同 一 栏目 中 的 内 容 多 了 ， 也 难免 会 出 项 参差 不 齐 的 现象 。 在 这 种 
情况 下 ， 我 们 就 可 以 用 专题 来 弥补 这 些 不 足 。 例 如 将 那些 无 法 用 栏目 体现 的 内 容 ， 单 独 提出 组 成 专题 。 


12.7.4 资讯 站 的 推广 重点 
虽然 在 后 面 章节 中 将 详细 讲解 网 站 推广 的 思路 和 技巧 , 但 是 本 节 针对 资讯 类 型 网 站 的 后 期 运营 扒 
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| 广 进 行 有 针对 性 的 点 拓 ， 以 方便 读者 有 的 放 矢 。 
| 1， 获 站 权重 最 重要 
| 
| 资讯 站 是 以 内 容 为 主 ， 而 且 内 容量 比较 大 ， 所 以 资讯 站 最 主要 的 流量 来 源 是 搜索 引擎 ， 总 体 思路 
| 就 是 提升 整 站 权重 ， 然 后 通过 海量 的 内 容 从 搜索 引擎 带 来 流量 。 关 于 具体 的 SEO 技术 可 参考 后 面 章 
| 节 的 网 站 推广 内 容 ， 这 里 就 不 再 详细 讲解 。 下 面 介 绍 关 于 提升 权重 的 最 基本 原则 。 
eh 网 站 结构 台 理 ， 符 合用 户 体验 ， 不 能 让 用 户 及 搜索 引 允 邮 蛛 在 网 站 中 迷路 。 
页 面 干净 漂亮 大 方 ， 没 有 垃圾 代码 、 弹 窗 及 过 多 的 JS 特效 等 。 
多 与 权重 高 的 优质 网 站 交换 链接 。 
每 天 保持 足够 量 的 更 新 ， 尤 其 是 主要 内 容 。 
内 链 的 建设 。 对 于 资讯 站 来 说 ， 一 个 最 重要 的 提升 权重 和 关键 词 排名 的 方法 就 是 内 链 系 统 。 
一 些 比较 大 的 网 站 ， 都 会 开发 自家 的 内 链 系 统 ， 当 内 容 页 中 出 现 目标 关键 词 时 ， 系 统 会 自 
动 在 这 些 词 上 添加 链接 。 
2， 黏 住 用 户 
若 网 站 要 良性 发 展 ， 必 须要 黏 住 用户 ， 如 果 网 站 没有 粘性 ， 无 论 怎么 推广 也 没 用 。 而 对 于 资讯 站 
来 说 ， 想 恭 住 用 户 ， 关 键 点 有 如 下 3 个 : 
回 ” 内 容 的 质量 ， 这 是 大 前 提 ， 也 是 重 中 之 重 。 那 到 底 什么 是 优质 内 容 呢 ? 很 简单 ， 只 要 用 户 
喜欢 的 内 容 ， 就 是 优质 内 容 。 
回 ”内 容 的 数量 。 如 果 一 个 网 站 ， 能 够 把 用 户 想 要 的 同类 网 站 的 内 容 都 搜集 齐 ， 那 用 户 肯定 就 
不 会 再 去 第 二 个 网 站 。 因 为 这 个 站 点 已 经 能 够 满足 他 的 需求 ， 并 为 他 节省 了 大 量 时 间 。 
加 ”内 容 的 便捷 性 ， 如 果 用 户 拿 着 鼠标 唱 着 歌 单 击 进入 我 们 的 网 站 ， 然 后 随便 单 击 几 次 鼠标 就 
能 找到 他 最 想 要 的 内 容 ， 则 一 定 会 受 上 我 们 的 网 站 。 
3. 合作 推广 
要 想 大 幅度 提升 流量 ， 普 通 的 推广 方式 比较 难 奏效 ， 最 好 的 方式 是 合作 ， 如 流量 互 换 等。 


12.8 案例 引导 : 盘点 热门 网 站 类 型 


回回 罗 图 罗 


互联 网 依旧 是 很 多 创业 者 喜爱 的 方式 ， 选 择 好 网 站 类 型 ， 然 后 建 一 个 网 站 ， 准 备 足够 的 内 容 ， 如 
果 SEO 做 得 出 色 ， 很 快 就 会 有 大 量 的 流量 和 广告 收入 。 本 节 整 理 当前 最 受 欢 迎 的 22 种 网 站 主题 ， 如 
果 用 户 想 建 一 个 网 站 ， 却 在 为 建 什么 网 站 好 而 烦恼 时 ， 或 许 对 你 有 所 启发 。 


12.8.1 音乐 影视 : 主打 娱乐 消费 


音乐 影视 类 网 站 是 很 早 就 开始 兴起 的 网 站 主题 , 到 今天 仍然 有 非常 好 的 用 户 忠 实 度 , 很 多 网 民 仍 
旧 喜 欢 在 网 络 上 看 电影 、 看 电视 和 听 音 乐 。 
音乐 影视 主题 的 网 站 可 以 细 分 为 几 类 ， 各 分 类 中 典型 的 网 站 如 下 。 
在 线 音 乐 : 百度 MP3、 酷 我 音乐 盒 、 搜 狗 音 乐 、 九 天 音乐 等 网 站 。 
DJ 音乐 : DJ 路 路 、DJ 音乐 厅 、 水 晶 d 网 、DI 前 卫 音 乐 等 网 站 。 
音乐 周边 : 千 千 音乐 在 线 、 音 乐 党 门人、 原创 音乐 基地 、 虾 米 网 等 网 站 。 
宽带 电影 : 狗 狗 影 视 、 土 豆 网 电影 、 优 酷 电 影 、 新 浪 大 片 、 迅 雷 看 看 等 网 站 。 
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< | 

电影 资讯 : 新 浪 电影 宝库 、M1905 电影 网 、 凤 凰 影视 娱乐 、Mtime 时 光 网 等 网 站 。 | 

电影 相关 : 迅雷 、 电 驴 、 快 播 (QVOD) 等 网 站 。 | 

除 这 些 专 注音 乐 影 视 主 题 的 站 点 外 ， 国 内 各 大 知名 网 站 基本 都 有 自己 的 音乐 影视 分 站 、 频 道 ， 如 | 
QQ 音乐 、QQ 影视 (QQIive) 等 。 | 


指点 迷津 : 对 于 后 来 者 来 说 ,开辟 荒地 ， 找 冷门 和 死角 ， 未 尝 不 是 一 个 尝试 的 方向 ， 如 做 局 丝 音 | 
乐 分 享 、 交 流 小 站 等 。 如 果 你 是 一 个 音乐 发 烧 友 ， 不 妨 做 专业 音乐 的 小 科目 等 。 


12.8.2 娱乐 休闲 : 主打 休闲 消费 


休闲 娱乐 类 主题 站 点 的 范围 很 广 ， 可 以 包含 各 种 形式 的 网 站 。 娱 乐 、 明 星 类 主题 可 以 分 为 以 下 
几 类 。 
回 ”娱乐 综合 : 新 浪 娱乐 、 腾 讯 娱乐 、E 视 网 娱 乐 、 百 度 娱乐 、 搜 狐 娱乐 、 天 涯 娱乐 八卦 、 网 易 | 
娱乐 、 凤 凰 网 娱乐 等 网 站 。 | 
加 ”综艺 节目 ， 非 诚 忽 扰 、 快 乐 大 本 营 、 天 天 向 上 、 康 申 来 了 等 官方 网 站 。 | 
回 ”明星 官网 ;刘德华 官网 、 周 杰 伦 官网 、 蔡 依 林 官网 等。 | 
以 娱乐 作为 主题 的 站 点 很 多 ， 如 中 国 娱乐 网 。 因 为 娱乐 主题 的 广泛 性 和 受 关注 度 比较 高 ， 除 专门 
做 此 类 主题 的 网 站 ， 各 大 门户 网 站 也 都 有 自己 的 娱乐 频道 ， 如 新 浪 娱乐 和 网 易 娱乐 等。 


给 指点 迷津 : 对 于 后 来 者 来 说 ， 大 众 休闲 可 能 需要 大 投入 ， 做 小 众 休闲 ， 也 是 不 错 的 选择 ， 如 围棋 
天 地 、 歌 友 会 、 广 场 舞 交流 、 本 地 娱乐 等 。 


12.8.3 游戏 : 主打 兴趣 消费 


游戏 类 站 点 其 实 也 应 该 属于 休闲 类 ， 但 是 随 着 游戏 的 日 渐 火 热 ， 很 多 网 站 开始 专注 于 游戏 主题 。 

游戏 主题 的 网 站 分 类 很 多 ， 大 致 可 分 为 以 下 几 类 。 

综合 游戏 : 17173、 新 浪 游戏 、 太 平 洋 游戏 网 、QQ 游戏 、 游 侠 网 等 网 站 。 

休闲 小 游戏 : 4399、 新 浪 小 游戏 、 游 戏 中 国 、QQ 迷你 游戏 等 网 站 。 

网 络 游戏 ， 魔兽 世界 、 地 下 城 与 勇士 、 跑 跑 卡丁车 、 龙 之 谷 、QQ 炫 舞 等 网 站 。 

手机 游戏 ;电玩 巴士 、 玩 家 网 、PSP 中 文 网 、 手 游 天 下 、 街 机 中 国 等 网 站 。 

游戏 相关 : 浩方 对 战 平台 、VS 竞技 游戏 平台 、QQ 对 战 平台 、 百 度 游戏 大 厅 等 网 站 。 

单机 游戏 : 魔兽 争霸 、 反 恺 精英 CS、 星 际 争霸 、 暗 黑 破 环 神 工 、 植 物 大 战 僵尸 等 网 站 。 
内 知名 的 游戏 主题 站 点 有 17173、 多 玩 游戏 等 网 站 。 


5” 指点 迷津 : 对 于 后 来 者 来 说 ， 游 戏 开发 难度 较 大 ， 做 平台 已 经 没有 市 场 ， 做 些 简单 的 网 页 游戏 ， 
也 需要 很 深 的 技术 功底 ， 因 此 此 类 主题 不 适合 初级 入 场 者 尝试 。 


12.8.4 网 络 服务 与 应 用 : 主打 服务 消费 


所 谓 网 络 服务 与 应 用 ， 实 际 上 就 是 网 络 技术 主题 的 网 站 。 需 要 注意 的 是 ,网络 服 务 应 用 类 网 站 并 
不 是 计算 机 软 、 硬 件 网 站 ， 这 二 者 是 有 所 不 同 的 。 

目前 来 看 ， 网 络 服务 类 网 站 大 多 是 门户 网 站 中 的 子 栏目 独 领 风 骚 ， 如 Enet 网 络 学 院 等 。 国 内 专 
注 网 络 服务 应 用 的 网 站 ， 也 有 一 些 处 于 发 展 中 的 独立 站 点 ， 如 51CTO 等 。 
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众 指点 迷津 : 对 于 后 来 者 来 说 ,可 以 尝试 针对 特定 问题 为 突破 口 ,帮助 用 户 解决 日 常生 活 中 茶 个 难 
题 为 服务 目标 ,发 展 起 来 会 更 好 . 


12.8.5 博客 : 主打 自 媒 体 消费 


博客 算是 一 个 较 新 的 网 络 应 用 ， 专 门 做 博客 主题 的 网 站 有 很 多 ， 但 是 个 人 站 长 想 要 建设 、 维 护 、 
运营 一 个 博客 类 主题 的 站 点 是 比较 困难 的 事情 。 注 意 ， 这 里 的 博客 站 点 是 提供 博客 应 用 的 网 站 ， 而 不 
是 指 个 人 博客 、 公 司 博客 。 

博客 类 主题 的 网 站 ， 可 细 分 为 博客 和 微 博 两 类 。 

回 “博客 ，QQ 空间 、 网 易 博 客 、 新 浪 博 客 、 百 度 空间 、 博 客 大 巴 等 网 站 。 

回 “” 微 博 : 新 浪 微 博 、 腾 讯 微 博 、 网 易 微 博 、 搜 狐 微 博 、 凤 凰 微 博 等 网 站 。 

提 到 博客 主题 ， 基 本 上 都 是 门户 网 站 子 域名 ， 如 新 浪 博客 和 网 易 博 客 等 。 


叭 ”指点 迷津 : 对 于 后 来 者 来 说 ， 可 以 尝试 以 博客 为 工具 ， 建 设 一 个 自 媒体 平台 ， 展 示 自 己 ， 广 交 朋 
友 ， 也 能 够 获得 不 错 收获 ， 这 对 于 广大 属 丝 网 友 来 说 ， 是 难度 最 小 、 最 便捷 的 方向 。 


12.8.6 ”网 址 导航 : 主打 导 流 消费 


网 址 导航 主题 的 站 点 ， 就 是 常 说 的 导航 站 。 导 航 站 在 国内 火红 过 一 段 时 间 ， 因 为 有 一 段 时 间 搜 索 
引擎 调整 算法 ， 导 致 导航 站 的 排名 得 到 提升 ， 所 以 很 多 人 跟风 做 导航 站 , 但 是 目前 随 着 搜索 引擎 算法 
的 变更 ， 很 多 原本 就 没有 认真 做 内 容 ， 只 是 抱 着 侥幸 心理 、 跟 风 心 理 做 导航 站 的 站 长 ， 已 经 落 败 。 

目前 国内 的 网 址 导航 站 ， 百 度 旗下 的 hao123，Google 旗下 的 265 导航 是 最 顶尖 的 。 


(8 指点 迷津 对 于 后 来 者 来 说 ， 可 以 尝试 做 委 直 、 专 业 、 区 域 导航 站 。 
12.8.7 ”计算 机 软 /硬件 : 主打 专业 知识 消费 


同上 面 提 到 的 网 络 服务 应 用 不 同 ， 计 算 机 软 /硬件 类 的 网 站 ， 关 注 的 是 计算 机 程序 、 设 备 的 相关 
资讯 ， 如 最 新 的 硬件 产品 信息 、 软 件 故 障 解决 等 内 容 。 
计算 机 软 /硬件 主题 站 点 ， 可 以 细 分 为 硬件 资讯 和 软件 下 载 两 类 。 
回 。” 硬件 资讯 : 太平 洋 电 脑 网 、 中 关 村 在 线 、IT168、PCHome、 电 脑 爱好 者 、 泡 泡 网、 小 能 在 
线 、IT 世界 硬件 、eNet 硬件 、 电 脑 论坛 、 新 浪 硬 件 等 网 站 。 
加 ”软件 下 载 : 天 空 软件 站 、 华军 软件 园 、 太平 洋 下 载 、 新 浪 下 载 、 驱 动 之 家 、 非凡 软件 、 PChome 
下 载 等 网 站 。 
这 类 直接 以 计算 机 软 /硬件 作为 主题 的 站 点 已 经 越 来 越 少 ， 而 各 大 门户 网 站 的 软 /硬件 频道 却 越 来 
越 好 ， 如 IT.COM.CN 的 硬件 频道 和 天 极 的 硬件 频道 等 ， 国 内 的 下 载 站 知名 的 有 很 多 ， 如 天 空 下 载 站 、 
华军 下 载 等 。 


号 指点 迷津 : 对 于 后 来 者 来 说 ， 可 以 尝试 计算 机 软 /硬件 自 媒体 ， 目 前 国内 很 多 个 人 网 站 都 是 向 这 
个 方向 发 展 ， 通 过 页 面 广告 获得 不 菲 收益 ， 如 黑马 、 虎 嗅 网 、 钛 媒体 、 雷 锋 网 等 。 


12.8.8 数码 及 手机 : 主打 技术 消费 
数码 产品 、 手 机 资讯 是 近 几 年 非常 火爆 的 网 站 主题 。 出 于 当今 时 代 对 数码 产品 的 追捧 ， 可 以 预见 


.466 -。 








第 12 章 网 站 策划 和 规划 


好 


的 是 ， 这 样 的 主题 网 站 还 会 流行 很 长 时 间 。 
数码 类 主题 的 知名 网 站 主要 有 中 关 村 数码 、 新 浪 数 码 、 太 平 洋 数 码 、 瘾 科技 、 色 影 无 忌 、 蜂 鸟 在 
线 、 数 码 之 家 等 网 站 。 


数码 类 主题 通常 情况 下 以 门户 网 站 的 频道 为 首 ,如 中 关 村 在 线 的 数码 频道 、 太 平 洋 电脑 世界 的 数 | 


码 频道 等 ， 至 于 手机 主题 ， 做 的 比较 好 的 独立 网 站 有 手机 之 家 等 一 批 网 站 。 
号- 指点 迷津 : 对 于 后 来 者 来 说 ， 可 以 尝试 做 移动 端 主题 网 站 ， 如 ZEALER 手机 评测 、 戴 粉 网 等。 
12.8.9 教学 及 考试 : 主打 教育 消费 


教学 考试 类 主题 网 站 ， 一 般 都 有 很 好 的 人 气 ， 且 此 类 站 点 的 营销 方法 比较 多 ， 鼻 利 点 也 比较 多 ， 
是 目前 值得 重视 的 网 站 类 型 。 教 学 考试 类 主题 的 网 站 ， 同 样 可 以 分 成 以 下 几 类 。 


加 


教育 : 中 国教 育 在 线 、 中 小 学 教师 继续 教育 网 、 搜 狐 教 育 、 腾 讯 教 育 频 道 、 中 国 留 学 网 、 
新 浪 教育 、 搜 学 网 、 新 思考 网 等 网 站 。 

学 科 : 中 学 学 科 网 、 初 中 数学 网 、 数 学 中 国 、12999 数学 网 、 奥 数 网 、 凤 凰 语文 网 、 中 学 生 
作文 网 (www.xiayuge.com) 、 无 忧 无 虑 中 学 语文 网 、 中 学 语文 教学 资源 网 、 中 华语 文 网 等 
网 站 。 


论文 : 百度 文库 、 豆 丁 网 、 中 国 知 网 、 中 国 论文 下 载 中 心 、 论 文 网 在 线 、 第 一 范文 网 、 第 | 


一 课件 网 等 网 站 。 

培训 : 新 东方 学 校 、 中 华 会 计 网 校 、101 远程 教育 网 、 北 京 四 中 网 校 、 海 天 考研 、 尚 德 机 构 
等 网 站 。 

公务 员 考试 : 国家 公务 员 局 、 新 浪 公 务 员 考 试 、 无 忧 公务 员 考 试 、 华 图 教育 网 、 腾 讯 公务 
员 考 试 、 国 家 公务 员 招考 网 等 网 站 。 

考研 : 新 浪 考研 、 研 究 生 招生 信息 网 、 中 国 考研 网 、 考 研 论坛 、 医 学 考研 社区 、 腾 讯 考研 
等 网 站 。 

高 考 /自考 /成 考 : 阳光 高 考 、 新 浪 高 考 、 腾 讯 高 考 、 自 考 365、 新 浪 自考 频道 、 中 国 自 考 网 、 
中 考 网 等 网 站 。 

英语 考试 : 四 六 级 考试 网 、 英 语 四 六 级 一 新 浪 考试 、 新 东方 英语 、 我 要 模 考 网 、 托 福 网 考 
网 上 报名 ， 太 傻 留学 论坛 、 雅 思 网 上 报名 、 中 国 雅思 网 等 网 站 。 














专业 考试 : 注册 会 计 师 考试 、 中 华 会 计 网 校 、 司 考 吧 、 考 试 大 、 全 国 计 算 机 等 级 考试 、 国 | 


家 司法 考试 、 新 浪 司法 考试 、 无 忧 考 网 、 财 考 网 等 网 站 。 


哈 指点 迷津 : 目前 的 网 络 上 ， 此 类 站 点 良 其 不 齐 。 对 于 后 来 者 来 说 ， 可 以 尝试 做 家 教 类 ， 或 者 做 小 


科 培 训 ， 如 钢琴 、 拉 丁 舞 等 ， 最 好 做 020， 线 上 和 线 下 结合 。 


12.8.10 ”医疗 保健 : 主打 健康 消费 
医疗 保健 类 主题 的 网 站 ， 属 于 长 期 话题 ， 一 直 都 很 受 关注 。 医 疗 健康 类 主题 可 以 分 为 以 下 几 类 。 


回 


加 网 


医疗 健康 : 39 健康 网 、 搜 狐 健 康 、 好 大 夫 在 线 、 健 身 114、 人 民 网 健康 、 新 华 网 健康 、 寻 
医 问 药 网 、 家 庭 医生 在 线 、 药 房 网 等 网 站 。 

健康 社区 : 39 健康 社区 、 糖 尿 病 论坛 、 搜 狐 健 康 社区 、 天 涯 医院 、 肝 胆 相 照 等 网 站 。 
医学 行业 : 丁香 园 、 华 医 网 、 医 学 全 在 线 、 医 学 教育 网 、 中 国 妇 产 科 网 、 中 国医 药 网 、 生 
物 医药 大 辞典 、 中 国 心血 管 网 和 爱 医 等 网 站 。 医 疗 保健 类 的 知名 站 点 很 多 ， 首 推 39 健康 网 
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和 寻 医 问 药 两 个 主题 网 站 。 


| 
| 过 指点 还 津 ， 因 为 目前 网 络 监管 相关 条 信 的 起 夫 ， 此 类 站 志 丰 在 委 多 过 缘 化 的 内 容 ， 不 建议 普通 站 
长 做 此 类 主题 的 站 点 。 


12.8.11 女性 时 尚 : 主打 女性 消费 


| 现在 女性 主题 的 站 点 关注 度 一 向 很 高 ， 春 利 方式 大 多 是 出 售 服饰 、 美 容 产 品 。 单 从 搜索 引擎 优化 
| 难 易 度 而 言 ， 女 性 类 主题 的 站 点 属于 比较 难 优化 的 类 别 ， 如 果 搜 索引 擎 优化 者 想 要 做 此 类 站 点 ， 需 要 
| 细 分 市 场 、 精 准 定位 。 女 性 时 尚 类 主题 的 网 站 比较 火热 ， 可 以 分 成 以 下 几 类 。 
| 回 “女性 : 瑞丽 女性 网 、 太 平 洋 女 性 、 网 易 女 人 、 腾 讯 女性 、 悦 己 女 性 网 、TOM 女性 、 新 浪 女 
| 性 、 时 尚 网 、 搜 狐 女 人 、 千 龙 伊 氏 、 空 姐 网 等 网 站 。 

回 ”时 装 时 尚 ， 瑞丽 女性 网 、 服 饰 流行 前 线 、 时 尚 网 、YOKA 时 尚 网 、 凤 凰 时 尚 、 都 市 客 、 新 

浪 一 服饰 潮流 、 搜 孤 女 人 一 流行 服饰 、 考 街 网 等 网 站 。 

回 ” 时 尚 杂志 : 公主 志 、 昕 答 、 时 尚 新 娘 、 薇 蕉 书屋 、 瑞 丽 电子 杂志 等 网 站 。 

给 指点 迷津 : 女性 时 尚 类 网 站 ， 比 较 知名 的 有 瑞丽 女性 网 、 新 浪 女 性 频道 等 。 对 于 普通 创业 者 ， 做 


不 了 此 类 大 站 ， 可 以 考虑 找 女 性 痛 点 进行 突破 ， 做 小 而 美的 女性 站 。 前提 是 创业 者 知 
女性 、 懂 女性 ， 有 女性 的 细腻 和 相同 兴趣 取向 ， 创 业者 自身 是 女性 最 好 。 


12.8.12 ”社交 网 络 和 在 线 社区 : 主打 社区 消费 


社交 网 络 和 在 线 社 区 以 往 是 最 为 吸引 人 的 网 络 应 用 ， 如 各 种 各 样 的 论坛 。 随 着 Web 2.0 的 出 现 ， 
在 线 社区 经 过 大 浪 淘 沙 ， 单 纯 以 社区 形式 存在 的 网 站 已 经 极 少 。 
社交 和 在 线 社区 主要 可 以 分 成 综合 类 社区 和 地 方 社区 两 类 。 
回 ”综合 社区 : 百度 贴吧 、 天 涯 社区 、 猫 扑 大 杂烩 、QQ 校友 、 热 门 贴吧 、 开 心 网 、 人 人 网 、 新 
浪 论 坛 、 大 旗 网 、 水 木 社区 、 搜 狐 社 区 、 网 易 论 坛 、 华 声 论坛 、 西 祠 胡 同等 网 站 。 
各 地 地 方 社区 : 北京 社区 、 天 津 社区 等 。 


号 指点 迷津 : 现在 主流 的 在 线 社区 主题 网 站 ， 主 要 是 各 种 地 方 性 、 行 业 性 网 站 ， 如 中 国教 育 社区 、 
浙江 在 线 的 潮 鸣 社区 等 。 


12.8.13 生活 服务 : 主打 生活 消费 


生活 服务 是 近年 才 兴 起 的 一 种 网 站 主题 , 因为 随 着 网 络 的 普及 , 越 来 越 多 的 人 开始 借助 网 络 来 了 
解 、 获 取 日 常生 活 中 所 需 的 信息 ， 如 天 气 、 交 通 、 宠 物 等 方面 的 内 容 ， 这 些 内 容 的 需求 就 促使 了 生活 
服务 类 主题 网 站 的 出 现 。 

生活 服务 主题 网 站 可 以 分 为 以 下 几 类 。 

回 ” 天 气 : 中 国 天 气 网 、 天 气 在 线 、 中 央 气 象 台 等 网 站 。 

回 ”交通 : 列车 时 刻 查询 、Mapbar 公交 查询 和 交通 违章 查询 等 网 站 。 

回 ”宠物 : 宠物 中 国 、 宠 物 之 家 等 网 站 。 


| 过 指点 迷津 知名 的 生活 服务 类 网 站 不 少 ， 如 中 国 天 气 网 、 北 京 公众 出 行 网 等 。 做 好 此 类 主题 站 ， 
| 最 好 与 现实 生活 接轨 ， 已 经 在 某 个 领域 工作 、 生 活 或 创业 。 
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12.8.14 ”房产 家 居 : 主打 家 居 消 费 


房产 家 居 类 主题 的 网 站 ， 可 以 分 为 租房 买房 、 装 修 、 建 筑 等 方面 ， 细 分 如 下 。 | 
租房 买房 搜房 网 、 焦 点 房地产 网 、 赶 集 网 、58 同城 、 房 价 网 、 新 浪 房产 、 安 居 客 、 我 受 | 加 
我 家 、 链 家 在 线 、 淘 房 网 、 易 居 网 、 淘 房屋 、 超 级 经 纪 人 、21 世纪 不 动产 、 房 老大 等 网 站 。 

回 ”房屋 装修 : 搜房 装修 家 居 网 、 焦 点 装修 家 居 网 、 装 修 图 满 多 、CCTV- 交 换 空间 、 秀 家 网 、 
篇 多 网 、 我 爱 我 家 装饰 论坛 、 天 涯 房产 观澜 、 中 国 建材 网、 红星 美 饥 龙 、 土 巴 免 装修 网 等 
网 站 。 

建筑 行业 : ABBS 建筑 论坛 、 筑 龙 网、 天 工 网 、 中 国 建造 师 网 、 土 木 在 线 、 房 策 天 下 、 天 贺 
地 方 等 网 站 。 


给” 指点 迷津 : 房产 家 居 类 主题 网 站 随 着 房地产 业 的 火热 ,流量 大 多 被 知名 网 站 和 门户 网 站 的 相关 频 
道 分 化 ， 如 搜房 网 和 新 浪 房产 等 。 


12.8.15 汽车: 主打 交通 消费 


汽车 类 主题 的 网 站 因为 定位 的 消费 群体 稍 显 高 端 ， 所 以 绝对 人 气相 对 娱乐 类 站 点 来 说 并 不 高 , 但 | 
是 因为 汽车 已 经 日 渐 成 为 家 庭 必 备 的 消费 品 ,， 所 以 汽车 主题 的 网 站 也 越 来 越 多 ,受到 的 关注 度 也 越 来 
越 高 。 汽 车 类 主题 的 网 站 可 以 细 分 成 以 下 几 类 。 
回 ”汽车 资讯 : 汽车 之 家 、 新 浪 汽车 、 爱 卡 汽车 网 、 搜 狐 汽车 、 汽 车 之 家 报价 、 太 平 洋 汽车 网 、 
网 上 车 市 、 中 国 汽车 网 、 腾 讯 汽车 、 车 168、 易 车 网 、 汽 车 之 友 、 汽 车 探索 等 网 站 。 
回 ”用 车 /养车 : 驾校 一 点 通 、 驾 驶 员 考 试 网 、 驾 驶 技巧 、 百 度 知道 一 购车 养车 、 驾 驶 员 模拟 考 
试 、 无 敌 改装 、 汽 车 口碑 榜 等 网 站 。 
回 “” 汽 车 /摩托 车 论坛 : 越野 e 族 、 爱 卡 俱乐部 、 太 平 洋 汽 车 网 论坛 、 汽 车 之 家 社区 、 新 浪 汽车 
社区 、 摩 托 坊 等 网 站 。 
给 指点 迷津 : 以 汽车 为 主题 的 知名 网 站 有 汽车 之 家 、 易 车 网 等 后 来 者 可 以 尝试 通过 友 会 形式 做 站 ， 
如 跑 友 、 车 友 等 。 


12.8.16 ”旅游 :主打 旅游 消费 


旅游 主题 的 网 站 ， 可 以 分 为 咨询 、 酒 店 、 机 票 、 户 外 游 、 地 图 等 几 个 和 旅游 相关 的 站 点 。 

加 ”旅游 资讯 :携程 旅行 网 、 芒 果 网 、 艺 龙 旅 行 网 、 国 家 旅游 局 、 热 点 景区 、 中 国 通用 旅游 、 
穷游 网 、 中 国 古镇 网 、 搜 狐 旅 游 频 道 、 新 浪 旅 游 等 网 站 。 

加 ”旅行 社 /酒店 /机 票 : 中 旅 总 社 、 中 国 国旅 、 如 家 酒店 、 中 国 康辉 、 中 青 旅 、 信 天 游 、 锦 江 之 | 
星 、7 天 连锁 酒店 、 布 丁 酒店 、 淘 票 网 等 网 站 。 

回 ”自助 户外 游 : 绿 野 、 越 野 。 族 、 游 多 多 、 中 国 户外 资料 网 、 磨 房 网 、 色 影 无 忌 行 色 、 自 行车 
旅行 网 等 网 站 。 

回 地图: 百度 地 图 、 图 行 天 下 、 相 约 久 久 、 谷 歌 地 图 、 我 要 地 图 等 网 站 。 旅 游 类 网 站 中 ， 大 
型 知名 的 网 站 非常 多 ， 如 携程 、 绿 野 等 。 


号 ”指点 迷津 : 后 来 者 可 以 尝试 做 本 地 旅游 站 点 ， 或 者 做 旅游 附加 服务 网 站 。 








加 
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~ 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


12.8.17 ”体育 运动 ， 主 打 体育 消费 


。 | “体育 运动 类 主题 可 以 细 分 的 种 类 如 下 。 
全- | 体育 综合 ， 新 浪 竞技 风暴 、 搜 狐 体育 、 腾 讯 体育 、TOM 盗 威 体坛 、 虎 扑 体育 、 体 坛 周报 、 
| 网 易 体 育 、 直 播 吧 、ESPNSTAR 中 文 网 、 体 育 贴吧 目录 、CCTV5、 中 国体 彩 网 、 凤 凰 体育 、 
Note 新 华 体育 、 奥 迅 球 探 网 、 雅 虎 体育 等 网 站 。 


| 回 ”足球 : 新 浪 国际 足球 、 新 浪 国内 足球 、 搜 狐 国 际 足球 、ESPN 国际 足球 、 腾 讯 国际 足球 、 球 
探 比 分 、 雪 缘 园 、 网 易 国 际 足 球 、 天 下 足球 网 等 网 站 。 

NBA: NBA 中 国 官方 站 、NBA 视频 、 新 浪 NBA、 搜 狐 NBA、 新 华 网 NBA、 效 威 体坛 NBA、 
腾讯 NBA、 网 易 NBA 等 网 站 。 

回 ”其 他 : wwe 中 文 网 、39 健身 、 拳 击 帝国 、 新 浪 f 且 赛车 、 海 峡 钓鱼 论坛 、 中 国 羽球 在 线 、 天 
天 羽毛 球 、 新 浪 台 球 、 精 英 乒 乓 论坛 、 中 国 象 棋 大 师 网 、 新 浪 网 球 等 网 站 。 


叶 指点 迷津 : 体育 运动 类 主题 的 知名 网 站 ， 一般 都 被 各 大 门户 网 站 的 专业 频道 所 占据 ， 如 新 浪 竞 技 
风暴 、 搜 狐 体育 等 。 此 类 网 站 不 适合 个 人 创业 。 


12.8.18 ”投资 金融 : 主打 理财 消费 


投资 金融 主题 可 以 细 分 为 以 下 几 类 网 站 。 

加 ”财经 资讯 :东方 财富 网 、 新 浪 财 经 、 证 券 之 星 、 和 讯 财 经 、 中 国 证 券 网 、 天 天 基金 网 、 搜 
狐 财经 、 大 智慧 、 同 花 顺 、 中 财 网 、 金 融 界 、 中 人 金 在 线 、 凤 凰 财经 、 网 易 财 经 等 网 站 。 

加 ”数据 行情 : 新 浪 股市 行情 、 东 方 财富 网 行情 、 新 股 申购 /中 签 查询 、 基 金 申购 状态 、 外 汇 牌 

价 、 开 放 式 基金 每 日 净值 、 封 闭 式 基金 行情 、 最 近 发 行 基金 、 今 日 黄金 价格 等 网 站 。 

股市 周边 : 中 人 金 博客 、 新 浪 财经 博客 、 东 方 财富 网 博客 、 搜 狐 财经 博客 、 天 生 我 财 、 和 讯 

财经 博客 、 中 国 证 券 网 博客 、 老 沙 博 客 、 徐 小 明博 客 、 巨 潮 网 、 模 拟 炒股 等 网 站 。 

加 ”基金 : 天 天 基金 网 、 新 浪 基金 、 金 融 界 基金 、 中 国 基金 网 、 和 讯 基 金 、 开 放 式 基金 每 日 净 
值 、 酷 基金 网 、 基 金 查询 、 封 闭 式 基金 行情 、 百 度 基 金 等 网 站 。 

回 ”理财 交流 : 搜狐 一 理财 频道 、 银 行 理财 产品 查询 、 银 行 存款 利率 表 、 理 财 工 具 大 全 、 新 浪 
理财 频道 、 新 浪 期 货 、 财 帮 子 等 网 站 。 人 金融 投资 类 主题 的 网 站 ， 知 名 的 有 中 国 基金 网 、 财 
帮 子 等 。 


惟 ” 指点 迷津 : 投资 理财 类 网 站 行业 比较 窜 ， 可 以 做 投资 理财 咨询 方面 的 选 题 , 但 是 需要 这 方面 的 经 
验 积累 。 


12.8.19 ”新 闻 媒体 : 主打 新 闻 消 费 


新 闻 媒体 主题 可 以 分 为 媒体 、 报 刊 和 时 事 几 类 。 

回 “ 主要 媒体 报刊 : 新浪 新 闻 、 新 华 网、 腾讯 新 闻 、 凤 凰 网 、CCTV、 搜 狐 新 闻 、 环 球 时 报 、 中 
国 新 闻 网 、 网 易 新 闻 、 百 度 新 闻 搜索 、 联 合 早报 、 人 民 网 、 南 方 网 、 中 国 广 播 网 、 中 华 网 
等 网 站 。 

回 ”时 事 论 坛 : 新 华 网 论坛 、 凤 凰 网 论坛 、 天 涯 国际 观察 、 铁 血 社区 、 强 国 社区 、 天 涯 杂谈 等 

| 网 站 。 





加 
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性 


回 “ 新 闻 类 主题 的 网 站 已 经 是 比较 和 久远 的 网 站 类 型 ， 但 是 一 直 都 有 很 好 的 活力 ， 知 名 的 新 闻 媒 | 


体 主题 网 站 有 新 浪 新 闻 、 新 华 网 等 。 


C@@” 指点 迷津 : 新 闻 主题 网 站 适合 新 闻 职业 者 做 独家 新 闻 媒 体 。 而 平台 媒体 需要 资源 大 、 投 入 大 ， 不 


适合 初 入 行者 。 
12.8.20 小 说 : 主打 阅读 消费 





小 说 类 主题 网 站 ,也 是 当下 比较 热门 的 网 站 主题 之 一 。 此 类 网 站 往往 拥有 非常 庞大 的 读者 和 作者 | 


群体 ， 并 且 有 比较 完善 的 会 员 体制 和 盈利 模式 。 小 说 类 主题 网 站 可 以 细 分 成 以 下 的 小 类 。 
加 ”小 说 阅读 : 起 点 中 文 网 、 小 说 阅读 网 、 红 袖 添 香 、 潇 湘 书院 、 今 日 小 说 排行 榜 、 晋 江 文学 、 
言情 小 说 吧 、 快 眼看 书 、 约 剑 书 盟 、 网 络 小 说 目录 、 新 浪 读书 、 榕 树 下 等 网 站 。 
回电 子 书 ， 飞 库 、 天 下 电子 书 、 云 轩 阁 、 狗 狗 书籍 、 久 久 小 说 网 、 悠 悠 书 盟 、 派 派 小 说 论坛 、 
新 鲜 中 文 网 等 网 站 。 
回 文化 文学 ;腾讯 读书 、 搜 狐 读 书 、 百 度 国学 、 且 听 风 吟 、 青 年 文摘 、 读 者 、 诗 歌 库 、 好 心 
情 美文 站 、 国 家 图 书馆 、 天 涯 在 线 书库 、 百 度 文库 等 网 站 。 


7 指点 迷津 : 小 说 类 主题 的 知名 站 点 有 www.qzread.com、 起 点 中 文 网 、 榕 树 下 等 。 另 外 ， 小 说 主 | 


题 的 知名 站 点 还 包括 一 些 文化 文学 类 的 站 点 ， 如 百度 国学 、 读 者 等 。 创 作者 可 以 考虑 
做 自 媒体 ， 如 果 喜 欢 创作 ， 可 以 在 大 型 小 说 平台 上 做 个 人 作家 。 


12.8.21 人 才 招聘 : 主打 职业 消费 


招聘 类 网 站 在 众多 的 网 络 应 用 中 , 已 经 独立 一 脉 , 不管 是 人 气 、 特色 、 春 利 模式 都 已 经 非常 成 熟 ， 
知名 的 招聘 网 站 在 年 轻 网 民 群 体 中 更 是 得 到 非常 好 的 口碑 传播 效果 。 

人 才 招 聘 类 网 站 可 以 分 为 以 下 几 类 。 

综合 人 才 网 站 : 中 华 英才 网 、5ljob 前 程 无 忧 、 中 国人 才 热 线 、 智 联 招聘 网 等 网 站 。 

地 方 人 才 网 站 : 卓 博 人 才 网 、 湖 北 人 才 网 、 深 圳 人 才 网 、 湖 南 人 才 网 、 智 通 人 才 网 、 苏 州 
人 才 新 干线 、 厦 门人 才 网 、 南 方 人 才 网 、 杭 州 人 才 网 、 广 东 人 才 网 等 网 站 。 

行业 人 才 网 站 : 中 国 卫生 人 才 网 、 中 国 酒店 人 才 网 、 中 国外 语 人 才 网 、 职 友 集 、 高 校 人 才 
网 、 各 地 毕业 生 就 业 信息 官网 、 应 届 生 求职 网 、 中 国旅 游人 才 网 、 中 国 汽车 人 才 网 等 网 站 。 


(指点 迷津 : 知名 的 人 才 招 聘 类 网 站 有 智联 招聘 、 中 华 英才 网 等 。 初 入 行者 可 以 考虑 特殊 群体 的 职 
业 需 求 ， 如 互联 网 职业 的 拉 勾 网 (http://www.lagou.com/ ) ， 也 可 以 考虑 小 门类 求职 
网 站 ， 如 校园 兼职 等 ， 或 做 移动 端 求职 APP 等 。 


12.8.22 ”网 络 购物 ， 主 打 购 物 消费 


网 络 购物 是 正在 蓬勃 发 展 的 一 类 网 站 ， 这 类 网 站 的 主题 非常 明确 ， 而 且 一 般 情 况 下 都 很 精准 ， 会 
瞄准 某 个 用 户 群 进行 推广 。 下面 是 一 些 网 络 购物 网 站 的 细 分 主题 。 
购物 综合 : 淘宝 网 、 当 当 网 、 京 东 商 城 、 百 度 有 啊 、 卓 越 网 、 拍 拍 网 、 阿 里 巴巴 1688 等 网 站 。 
服装 服饰 : 玛 萨 玛 索 男装 网 、 时 尚 起 义 服饰 、D1 优 尚 网 、 乐 淘 网 上 鞋城 、 好 乐 买 品牌 鞋城 、 
VANCL 网 上 商城 等 网 站 。 
数码 家 电 : 国美 电器 、 北 斗 手机 网 、 大 中 电器 、 绿 森 数 码 、 锐 意 网 、 新 蛋 网 、 世 纪 电 器 网 、 
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迪 信 通 、 苏 宁 电 器 等 网 站 。 
女性 时 尚 : 麦考林 、 梦 芭 莎 内 衣 女 装 、 兰 缪 时 尚 内衣 、 走 秀 网 时 尚 购物 、 百 丽 官方 淘 秀 网 、 
悠 品 女 装 百货 等 网 站 。 


加 








优 疹 化 妆 品 : 果皮 网 、 天 天 购物 网 、N05 化 妆 品 商城 、 乐 蜂 时 尚 化 妆 品 等 网 站 。 
ee | 回 ” 母 婴儿 童 ， 红 孩子 母 婴 、 丽 家 宝贝 、 母 女 之 家 等 网 站 。 
Note | 加 ”日 用 百货 ， 橡 果 国 际 购物 、1 号 店 、 中 粮 集团 我 买 网 、 快 乐购 、 趣 玩 创意 百货 、2688 网 店 
| 等 网 站 。 
| 
| 回 ”团购 ;拉手 网 、 美 团 网 、 爱 帮 团 、 满 座 网 、F 团 、 团 宝 网 等 网 站 。 











回 ” 其 他 : 麦 包 包 、 钻 石 小 鸟 、 淘 宝 皇 冠 店 、 中 国 鲜花 礼品 网 等 网 站 。 


| 过 指点 迷津 :网络 购 物 是 最 近 几 年 才 流行 起 来 的 网 站 主题 ， 知 名 的 网 络 购物 主题 网 站 首 推 淘宝 、 训 
| 东 等 。 此 类 网 站 不 好 做 ， 但 可 以 做 小 店 ， 做 特 推 等 精品 店 。 


12.9 案例 引导 : 盘点 网 站 盈利 模式 


对 于 广大 初学 网 站 开发 的 读者 来 说 , 学 习 之 初 首先 应 该 了 解 并 思考 网 站 盔 利 模式 问题 , 虽然 成 功 
不 可 复制 ， 但 是 模式 却 可 以 借鉴 。 


12.9.1 广告 费 


广告 是 网 站 生存 的 最 基本 盈利 模式 , 各 种 各 样 的 广告 , 不 同 规模 的 网 站 都 在 做 , 但 是 在 做 广告 时 ， 
读者 一 定 要 选 好 定位 。 例 如 ， 做 彩铃 ， 在 数码 频道 、 时 尚 频 道 或 者 女性 频道 比较 好 做 ， 国 内 一 家 知名 
的 通信 资讯 公司 的 报告 显示 ，70% 的 彩铃 业务 来 自 女性 客户 。 

关于 网 站 广告 的 形式 有 多 种 多 样 ， 简 单 总 结 如 下 。 

回 “网 站 本 身 广 告 

几乎 所 有 网 站 都 有 广告 位 , 最 常见 的 是 横幅 式 广告 , 有 些 在 最 上 方 , 有 些 在 网 站 内 容 中 间 和 底部 。 
还 有 些 就 是 内 页 的 大 幅 广告 位 ， 这 些 尺寸 都 没 严格 限制 ， 具 体 根据 自己 网 站 的 布局 和 需求 制定 。 展 现 
形式 可 为 图 片 、 文 字 、 动 画 。 

回 ”悬浮 式 窗口 广告 

不 影响 网 站 本 身 布局 ， 内 容 自 由 的 广告 位 。 如 我 们 经 常 可 以 看 到 左右 两 侧 有 悬浮 的 广告 位 ， 以 及 
网 站 右 下 角 类 似 腾 讯 新 闻 提示 框 的 窗口 广告 位 ， 这 种 广告 位 多 为 图 片 和 动画 ， 文 字 类 较 少 。 

加 ” 弹 窗 广告 

该 种 广告 和 网 站 页 面 不 相关 ， 直 接 弹 出 新 的 窗口 。 现 在 各 类 小 说 站 大 多 都 含有 弹 窗 广告 。 不 过 用 
户 体验 度 差 ， 对 网 站 空间 和 速度 有 影响 。 

回 图片 广告 -NEW 

这 是 新 的 广告 形式 , 它 可 以 让 网 站 里 的 图 片 都 成 为 广告 位 .在 鼠标 没有 移动 到 图 片上 特定 区 域 前 ， 
展现 出 来 的 是 网 站 本 身 的 样式 ， 如果 移 动 到 图 片 的 特定 区 域 ， 则 会 出 现 提示 性 的 广告 。 这 种 广告 不 影 
| 响 网 站 本 身 内 容 ， 针 对 性 强 ， 用 户 体验 度 高 ， 有 发 展 前 途 。 
网 站 广告 收费 形式 总 结 如 下 。 
| 回 “CPM (COST PER MILLION) 每 千 人 成 本 
这 种 广告 形式 是 指 广告 展示 1 千 次 ， 就 计 费 一 次 。 现 在 的 弹 窗 广告 就 是 这 种 形式 。 不 看 重 实际 效 
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果 ， 只 在 乎 展示 次 数 。 
CPA (COST PER ACTION) 





这 种 广告 收费 形式 是 按 特 定 的 动作 进行 收费 。 例 如 ， 成 功 购买 一 件 东 西 ， 注 册 一 个 用 户 ， 点 击 一 | 


个 网 页 等 。 这 种 广告 形式 对 广告 主 比 较 不 错 ， 根 据 实际 工作 来 计 费 。 


现在 很 多 免费 网 站 ， 都 以 引导 客户 做 出 以 上 行为 为 工作 重点 。 用 广告 方面 赚 的 钱 保持 对 用 户 的 免 | 


费 。 因 此 很 多 网 站 采取 激励 的 方式 ， 只 要 用 户 完成 以 上 行为 ， 就 可 以 获取 积分 ， 积 分 到 一 定量 之 后 就 
可 以 换取 网 站 服务 等 。 

回 CPC (COST PER CLICK) 

点 击 付费 ， 根 据 实际 点 击 进行 计 费 。 这 个 是 推广 广告 最 常用 的 形式 。 如 百度 推广 、 阿 里 巴巴 的 网 

CPS (COST PER SALE) 

根据 实际 销售 情况 来 计算 广告 费 ， 一 般 按 利 润 的 百分率 来 计算 。 淘 宝 客 就 是 这 种 模式 ， 根 据 实际 
产品 销售 出 去 的 利润 按 30% 或 50% 的 比例 分 成 。 

包月 

这 主要 出 现在 网 站 的 固定 广告 位 上 ， 以 一 个 价格 买 断 一 个 广告 位 ， 不 计算 展示 ， 不 计算 点 击 ， 也 
不 计算 实际 销售 情况 。 很 多 喜欢 固定 收入 的 站 长 比较 喜欢 这 种 形式 。 

在 此 类 春 利 模式 中 ， 国 内 做 的 较 好 的 是 新 浪 (www.sina.com.cn)、 搜 狐 〈www.sohu.com)、 网 易 
(www.163.com)、 雅 虎 (www.yahoo.com.cn) 等 门户 网 站 (包括 行业 门户 )。 另 外 ， 视 频 网 站 通过 影音 
载 入 前 后 的 等 待 时间 播 放 广告 主 的 在 线 广告 也 是 一 个 非常 可 观 的 盈利 点 ， 如 国外 的 youtube (www. 
youtube.com)、 国 内 的 56 (www.56.com)、 土 豆 (www.toodou.com)、 六 间 房 (www.6rooms.com) 等 。 


12.9.2 ”技术 费 


实施 这 种 模式 的 网 站 需要 拥有 专业 人 才 ， 在 某 一 特殊 领域 建立 良好 的 声誉 。 国 内 的 一 些 CMS、 
BBS 系统 提供 者 ， 如 风 讯 、 动 易 、 动 网 、 帝 国 等 。 国 外 的 也 有 类 似 的 免费 开源 项 目 ， 如 WordPress。 

WordPress 是 一 种 使 用 PHP 开发 的 博客 平台 ， 用 户 可 以 利用 它 在 支持 PHP 和 MySQL 数据 库 的 
服务 器 上 架设 自己 的 博客 。 也 可 以 把 WordPress 当 作 一 个 内 容 管理 系统 (CMS ) 来 使 用 。 WordPress 是 
一 个 免费 的 开源 项 目 。 但 是 最 初时 ， 这 个 项 目 也 仅 是 一 个 自 娱 自 乐 的 网 站 ， 由 于 该 网 站 比较 专业 ， 并 
最 先 实现 开源 和 免费 ， 于 是 很 多 个 人 网 站 使 用 了 它 。 目 前 WordPress 是 美国 最 富 创新 的 网 站 ， 网 站 价 
值 超过 了 几 十 亿美 元 。 


12.9.3 ”标准 费 
这 种 网 站 致力 于 建立 业界 的 标准 ， 一 旦 标准 建立 则 可 获得 丰富 报酬 。 这 种 网 站 对 于 站 长 来 说 要 





求 很 高 ， 不 仅仅 要 求 要 有 深厚 的 专业 知识 ， 还 要 有 极 强 的 创新 能 力 ， 如 百度 、 谷 歌 ， 他们 旨 在 建立 一 | 


种 搜索 行业 的 标准 ， 后 来 者 只 是 模仿 者 ， 但 是 模仿 者 想 要 超过 标准 建立 者 ， 需 要 付出 很 高 的 代价 ， 而 
且 是 几乎 不 可 能 的 ， 这 类 网 站 还 有 hao123、chinabbs、qihoo 等 。 
对 于 hao123 来 说 ， 确 实 是 一 个 奇迹 ， 建 站 之 初 ， 仅 仅 是 作者 的 一 个 业余 爱好 ， 把 自己 看 到 的 好 





玩 的 网 站 都 收集 汇总 在 一 起 ， 然 后 提供 给 网 友 ， 方便 网 友 访 问 互联 网 ， 但 是 没有 想到 最 后 居然 那么 成 | 


功 ， 最 终 作 者 以 5000 万 元 卖 给 了 百度 ， 并 在 不 经 意 间 建 立 一 个 行业 的 标准 ， 从 网 址 导航 成 为 一 种 新 
的 门类 网 站 。 
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12.9.4 ”服务 费 


这 种 网 站 会 深入 了 解 客户 的 状况 ， 协 助 他 们 解决 问题 ， 因 此 能 够 和 客户 建立 非常 好 的 关系 ,网 站 
知 也 因 客 户 的 成 长 而 赢利 。 这 类 网 站 站 长 要 在 某 一 行业 里 面 有 着 足够 的 实力 或 者 说 很 强 的 话语 权 。 
| 这 种 网 站 有 很 多 ， 如 提供 电子 商务 解决 方案 ,帮助 客户 梳理 产品 流程 ， 降 低 企业 成 本 ， 还 有 一 种 
Note | 是 论文 发 表 网 站 , 帮助 有 发 表 需 求 的 客户 发 表 论 文 , 这 种 收益 绝对 比 广告 来 得 多 , 此 外 还 有 翻译 网 站 ， 
| 归根 结 底 ， 是 以 提供 服务 为 主 。 


12.9.5 平台 费 


这 种 网 站 扮演 像 电话 系统 交换 机 的 角色 ， 提 供 一 个 平台 ， 让 买卖 双方 交易 ， 从 中 收取 费用 ， 因 此 
交易 量 越 大 ， 赢 利 越 高 。 最 成 功 的 网 站 应 该 属于 淘宝 网 了 ， 国 外 的 有 eBay 拍卖 网 站 ，eBay 也 成 为 全 
| 世界 最 大 且 最 赚钱 的 拍卖 网 站 公司 ， 其 实 淘宝 网 站 也 是 在 模仿 eBay 的 模式 中 走向 成 功 的 。 还 有 其 他 
一 些小 型 的 C2C、B2B 空间 ， 各 种 各 样 的 交友 网 站 。 

目前 这 类 网 站 发 展 空间 比较 小 了 ， 不 过 读者 可 以 在 专业 化 上 谋求 发 展 ， 如 做 点 卡 、 虚 拟 财产 ， 其 
至 同志 交友 等 。 


12.9.6 会 员 费 


这 类 网 站 最 成 功 案例 还 要 算 QQ 会 员 站 了 , 因为 这 种 网 站 才 会 拥有 如 此 多 的 忠实 会 员 ， 定 期 向 会 
员 收 取 会 员 费 。 如 果 读 者 期 望 通过 会 员 模 式 和 盈利 ， 那 么 在 设计 网 站 时 ， 就 应 该 思考 网 站 的 内 容 ， 网 站 
内 容 应 该 具有 专 、 精 、 深 特性 ， 同 时 在 互联 网 上 又 无 法 找到 ， 仅 此 一 家 ， 而 这 些 内 容 对 于 特定 用 户 群 
来 说 ， 又 是 必需 的 。 例 如 ， 淘 宝 营销 经 验 、 个 人 独门 秘方 、 技 术 专 供 等 。 

这 类 网 站 想 要 拥有 数量 众多 的 忠实 会 员 必须 要 在 内 容 上 下 工夫 , 但 这 又 与 互联 网 共享 的 精神 相 矛 
盾 。 例 如 ， 建 个 学 习 资料 的 收费 会 员 站 ， 苦 心经 营 一 段 时 间 后 ， 读 者 会 发 现 网 上 类 似 的 资料 满天飞 ， 
因此 做 好 内 容 的 同时 ， 一 定 要 想 办 法 控制 内 容 的 流失 ， 办 法 是 多 种 多 样 ， 国 内 有 几 家 提供 电子 杂志 的 
网 站 可 以 借鉴 ， 还 有 一 些 论文 、 电 影 、 文 秘 网 站 。 当然 做 这 类 网 站 是 比较 辛苦 的 ， 风 险 比较 大 。 

注册 会 员 收 费 ， 提 供与 免费 会 员 差 异化 的 服务 ， 这 类 礁 利 模式 比较 成 功 的 网 站 举例 如 下 。 

回 ”阿里 巴巴 (www.cn.alibaba.com) ， 中国 B2B 网 站 典范 ， 还 有 慧聪 商情 (www.hc360.com) 、 

金 银 岛 (www.315.com.cn) 等 B2B 类 型 网 站 。 

回 ”中国 化 工 网 (www.chemnet.com.cn) 、 我 的 钢铁 (www.mysteel.com) 等 行业 门户 网 站 。 

回 ” 配 货 网 (www.peihuo.com) 等 专业 服务 网 站 。 

51 (www.51.com) 等 娱乐 游戏 网 站 。 


12.9.7 ”增值 费 


这 种 模式 主要 通过 短信 的 途径 实现 , 短信 成 功 的 实质 是 一 个 运营 模式 的 胜利 。 中 国 移动 通过 利益 
分 成 的 形式 将 SP《〈 内 容 提供 商 ) 团结 在 一 起 ， 形 成 了 一 个 完整 的 包括 电信 运营 商 、 内 容 提供 商 、 系 
统 和 终端 设备 提供 商 、 用 户 的 产业 链 ， 并 担负 着 联系 各 方 、 协 调整 个 链条 正常 运转 的 最 关键 责任 。 中 
| 国 移动 通过 这 个 由 运营 商 主导 施行 的 一 种 公平 的 互惠 互利 商业 模式 , 让 各 个 环节 的 参与 者 都 真切 地 得 
| 到 实惠 ， 而 通过 榜样 的 力量 更 是 吸引 到 了 越 来 越 多 的 公司 和 个 人 参与 。 
| 目前 ， 它 是 最 赚钱 的 网 络 盘 利 模式 之 一 ， 几 乎 每 个 进入 全 球 排名 前 10 万 位 的 商业 性 网 站 和 个 人 





.474 。 


第 12 章 网 站 策划 和 规划 





网 站 都 在 通过 SP 来 获取 经 济 回报 ， 不 过 由 于 SP 受到 中 国 移动 等 运营 商 的 限制 ， 盈 利率 有 些 下 降 ， 
以 此 类 模式 为 主 的 上 市 公司 市 值 较 以 前 有 缩水 ， 比 较 典 型 的 网 站 有 空中 网 《wwwkong.neb)、3G 门户 


(www.3g.net.cn)、Zcom (www.zcom.com)、 唯 刊 (www.vika.cn)、51 (www.51.com) 等 。 


12.9.8 游戏 费 


这 类 网 站 主要 以 网 络 游戏 为 平台 , 通过 游戏 相关 的 服务 和 虚拟 物品 进行 盈利 ， 如 虚拟 装备 和 道具 | 
买卖 。 相 信 很 多 玩 过 网 络 游戏 的 读者 都 会 了 解 这 种 盈利 模式 的 形式 。 

这 方面 比较 成 功 的 网 站 包括 网 易 游 戏 (www.163.com)、 盛 大 游戏 (www.poptang.com 、 
www.shanda.com.cn)、 九 城 游 戏 (www.the9.com、www.ninetowns.com)、 久 游 (www.9you.com ) 及 


其 游戏 地 方 代理 运营 商 。 
12.9.9 电 商 盈利 费 


电子 商务 盈利 模式 将 是 未 来 网 站 盈利 模式 的 主要 方向 ， 它 主要 通过 网 上 交易 获取 实际 收益 ， 类 似 
的 网 站 形式 包括 各 种 网 上 商店 ， 以 及 现在 正在 流行 的 团购 网 站 ， 都 是 电子 商务 盈利 模式 的 新 形式 ， 值 
得 读者 认真 思考 和 研究 。 

这 类 模式 又 可 以 分 为 以 下 两 种 。 

销售 别人 的 产品 

根据 对 象 不 同 可 分 为 B2C 商 家 对 个 人 ) 和 C2C 〈 个 人 对 个 人 ) 两 种 模式 。C2C 网 站 包括 淘宝 
(www.taobao.com)、 易 趣 (www.ebay.com.cn) 等 ， 易 趣 通过 在 线 竞拍 ， 从 成 功 交 易 中 抽取 佣金 。B2C 
网 站 包括 卓越 (wwwjoyo.com)、 当 当 (www.dangdang.com)， 而 豆瓣 网 (www.douban.com) 通过 营 
造 社 区 ， 推 荐 销售 来 抽取 佣金 。 
销售 自己 的 产品 
也 就 是 企业 网 店 ,大 多 数 外 贸 网 站 和 国内 中 小 企业 网 站 都 会 包含 该 功能 模块 , 或 者 建立 独立 的 产 
品 销售 网 站 。 
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大 型 网 站 一 般 都 由 成 二 上 万 个 网 页 及 其 他 文件 构成 ， 合 理 地 组 织 这 些 网 页 和 文件 在 网 站 后 
期 维护 中 显得 非常 重要 ， 完 善 的 组 织 可 以 提高 站 点 建设 与 维护 效率 。 本 章 首先 介绍 了 如 何 利用 
Dreamweaver 提供 的 站 点 管理 工具 有 效 地 组 织 和 管理 站 点 文件 夹 及 文件 ， 建 立 本 地 文件 与 远程 
站 点 之 间 的 映射 关系 ; 接着 介绍 如 何 利用 【 站 点 管理 】 窗 口 将 网 页 的 制作 与 编辑 任务 分 配 到 工 
作 组 成 员 的 方法 ; 最 后 介绍 了 在 上 传 站 点 之 前 ， 如 何 测试 站 点 的 完整 性 与 修复 错误 链接 ， 


【学 习 重 点 】 

上 传 站 点 的 方法 与 技巧 
管理 站 点 中 的 文件 与 文件 夫 
测试 站 点 内 链接 
检查 站 点 的 兼容 性 
检验 站 点 下 载 速 率 


至 至 至 至 至 


第 13 章 网 站 管理 | | 


> 


13.1 定义 站 点 


根据 网 站 运行 位 置 的 不 同 , 可 以 把 站 点 分 为 本 地 站 点 和 远程 站 点 两 种 。 本 地 站 点 以 个 人 系统 为 服 | 
务 器 环境 进行 运行 ， 而 远程 站 点 则 以 互联 网 上 的 服务 器 为 环境 进行 运行 。 大 部 分 初学 者 在 学 习 和 上 机 
时 都 会 在 本 地 上 机 练习 ， 因 此 本 节 具 体 介 绍 如 何在 本 地 定义 站 点 。 


13.1.1 新 建 静态 站 点 


静态 站 点 ， 也 称 为 静态 页 面 站 点 ,就 是 不 需要 服务 器 环境 的 支持 也 能 够 运行 页 面 。 定义 本 地 站 点 
的 具体 操作 步骤 如 下 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 选 择 【 站 点 】|【 新 建站 点 】 命 令 ， 打 开 【 未 命名 站 点 1 的 站 点 定 
义 为 】 对 话 框 。 

第 2 步 ， 在 【站 点 名 称 】 文 本 框 中 输入 站 点 名 称 ， 如 mysite， 在 【本 地 站 点 文件 夹 】 文 本 框 中 设 | 
置 站 点 在 本 地 文件 中 的 存放 路 径 ， 可 以 直接 输入 ， 也 可 以 用 鼠标 单 击 右 侧 的 【选择 文件 】 按 钮 选择 相 | 
应 的 文件 夹 ， 如 图 13.1 所 示 。 
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13.1 定义 本 地 信息 


第 3 步 ， 选 择 【 高 级 设置 】 选 项 卡 ， 展 开 高 级 设置 选项 ， 在 左 侧 的 选项 列表 中 单 击 【 本 地 信息 】 

选项 。 然 后 在 【本 地 信息 】 对 话 框 中 设置 本 地 信息 ， 如 图 13.2 所 示 。 

【默认 图 像 文 件 夹 】 文 本 框 : 设置 默认 的 存放 站 点 图 片 的 文件 夹 。 但 是 对 于 比较 复杂 的 网 
站 ， 图 片 往往 不 仅仅 只 存放 在 一 个 文件 夹 中 ， 因 此 可 以 不 输入 。 

回 【链接 相对 于 】 栏 :定义 当 在 Dreamweaver 为 站 点 内 所 有 网 页 插入 超 链接 时 是 采用 相对 路 
径 ， 还 是 绝对 路 径 ， 如 果 希 望 是 相对 路 径 则 可 以 选中 【文档 】 单 选 按钮 ， 如 果 希 望 以 绝对 
路 径 的 形式 定义 超 链接 ， 则 可 以 选中 【站 点 根 目录 】 单 选 按钮 。 

回 Web URL 文本 框 : 输入 网 站 的 网 址 ， 该 网 址 能 够 供 链接 检查 器 验证 使 用 绝对 地 址 的 链接 。 
在 输入 网 址 时 需要 输入 完全 网 址 ， 例 如 ，http://localhost/msite/。 该 选项 只 有 在 定义 动态 站 点 
后 有 效 。 

回 【区 分 大 小 写 的 链接 检查 】 复 选 框 : 选中 该 复 选 框 可 以 对 链接 的 文件 名 称 大 小 进行 区 分 。 
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图 13.2 定义 高 级 信息 


【启用 缓存 】 复 选 框 :选中 该 复 选 框 可 以 创建 缓存 ， 以 加 快 链接 和 站 点 管理 任务 的 速度 ， 
建议 用 户 要 选中 。 


13.1.2 新建 虚拟 站 点 


| 定义 本 地 动态 虚拟 站 点 可 以 在 13.1.1 节 介绍 的 定义 本 地 静态 站 点 基础 上 , 添加 虚拟 服务 器 环境 设 
| 置 即 可 。 

| 【操作 步骤 】 

| 第 1 步 ， 启动 Dreamweaver， 先 在 本 地 创建 一 个 虚拟 远程 目录 ， 用 来 作为 服务 器 端 应 用 程序 的 根 
| 目录 ， 然 后 在 本 地 再 创建 一 个 本 地 目录 。 

| 容 提示 : 为 了 测试 方便 ,可 以 定义 本 地 目录 和 远程 目录 为 同一 个 文件 天 ， 这 样 更 方便 文件 管理 和 测 
| 试 ， 避 免 文件 频繁 上 传 和 下 载 。 

| 第 2 步 ， 在 Dreamweaver 中 ， 选 择 【 站 点 】|【 新 建站 点 】 命 令 ， 打 开 【 站 点 设置 对 象 mysite】 
| 对 话 框 ， 单 击 【 服 务 器 】 选 项 ， 切 换 到 服务 器 设置 面板 。 

| 第 3 步 ， 在 【服务 器 】 选 项 面板 中 单 击 世 按钮， 如 图 13.3 所 示 。 显 示 增 加 服务 器 技术 面板 ， 在 
| 该 面板 中 定义 服务 器 技术 ， 如 图 13.4 所 示 。 
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| 13.3 ”增加 服务 器 技术 
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13.4 定义 服务 器 技术 
第 4 步 ， 在 【基本 】 选 项 卡 中 设置 服务 器 基本 信息 ， 如 图 13.5 所 示 。 







































































图 13.5 定义 基本 信息 


(1) 在 【服务 器 名 称 】 文 本 框 中 输入 站 点 名 称 ， 如 php_site。 

(2) 在 【连接 方式 】 下 拉 列 表 框 中 选择 【本 地 /网 络 】 选 项 。 实 现在 本 地 虚拟 服务 器 中 建立 远程 
连接 ， 也 就 是 说 设置 远程 服务 器 类 型 为 在 本 地 计算 机 上 运行 网 页 服务 器 。 

(3) 在 【服务 器 文件 夹 】 文 本 框 中 设置 站 点 在 服务 器 端的 存放 路 径 ， 可 以 直接 输入 ， 也 可 以 用 
鼠标 单 击 右 侧 的 【选择 文件 】 按 钮 加 选择 相应 的 文件 夹 。 为 了 方便 管理 ， 可 以 把 本 地 文件 夹 和 远程 文 
件 夹 设置 相同 的 路 径 。 

(4) 在 Web URL 文本 框 中 输入 虚拟 服务 器 的 网 址 , 也 可 以 暂时 不 定义 , 等 设置 测试 服务 器 之 后 ， 
Dreamweaver 会 自动 设置 ， 其 他 选项 可 以 保持 默认 值 。 

第 5 步 ， 在 【站 点 设置 对 象 mysite】 对 话 框 中 选择 【高 级 】 选 项 卡 ， 设 置 服务 器 的 其 他 信息 ， 如 
13.6 所 示 。 

在 【服务 器 模型 】 下 拉 列 表 框 中 选择 PHP MySQL 技术 。 服 务 器 模型 用 来 设置 服务 器 支持 的 脚本 
模式 ， 包 括 无 、ASP JavaScript、ASP VBScript、ASPNET C#、 ASPNET VB、ColdFusion、JSP 和 PHP 
MySQL。 目 前 使 用 比较 广泛 的 有 ASP、JSP 和 PHP 3 种 服务 器 脚本 模式 。 
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图 13.6 定义 高 级 信息 


【远程 服务 器 】 栏 中 ， 还 可 以 设置 各 种 协助 功能 ， 详 细 说 明 如 下 。 
选中 【维护 同步 信息 】 复 选 框 ， 可 以 确保 本 地 信息 与 远程 信息 同步 更 新 。 
= 选中 【保存 时 自动 将 文件 上 传 到 服务 器 】 复 选 框 ， 可 以 确保 在 本 地 保存 网 站 文件 时 ， 会 自 
动 把 保存 的 文件 上 传 到 远程 服务 器 。 
回 ”选中 【启用 文件 取出 功能 】 复 选 枉 ， 则 在 编辑 远程 服务 器 上 的 文件 时 ，Dreamweaver 会 自动 
锁定 服务 器 端 该 文件 ， 禁 止 其 他 用 户 再 编辑 该 文件 ， 防 止 同步 操作 可 能 会 引发 的 冲突 。 
回 在 【取出 名 称 】 和 【电子 邮件 地 址 】 文 本 框 中 输入 用 户 的 名 称 和 电子 邮件 地 址 ， 确 保 网 站 
团队 内 部 即时 进行 通信 ， 相 互 沟通 。 
第 6 步 ， 设 置 完毕 ， 单 击 【 保 存 】 按 钮 ， 返 回 【站 点 设置 对 象 php_site】 对 话 框 ， 这 样 即 可 建立 
一 个 动态 网 站 ,如 图 13.7 所 示 。 此 时 如 果 选 中 新 定义 的 服务 器 ， 则 可 以 单 击 下 面 的 【编辑 】 按 钮 要 重 
新 设置 服务 器 选项 。 当 然 也 可 以 单 击 【删除 】 按 钮 囊 删 除 该 服务 器 ， 或 者 单 击 【 增 加 】 按 钮 车 再 定 
义 一 个 服务 器 。 而 单 击 【 复 制 】 按 钮 本 复制 选中 的 服务 器 。 





Ss ee 此 对 话 械 的 设置 来 白 
Mr ar rs et 














13.7 ”定义 测试 服务 器 信息 
| 第 7 步 ， 选 择 【 站 点 】| 【管理 站 点 】 命 令 ， 打 开 【 管 理 站 点 】 对 话 框 ， 用 户 就 可 以 看 见 刚刚 建 
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| 
立 的 动态 站 点 ， 如 图 13.8 所 示 。 | 
| 



























































图 13.8 管理 站 点 


第 8 步 ， 选 择 【窗口 】|【 文 件 】 命 令 ， 或 者 按 F8 键 ， 打 开 【 文 件 】 面 板 。 单 击 【 文 件 】 下 拉 列 
表 右 侧 的 向 下 三 角 按钮 站， 在 打开 的 下 拉 列 表 中 选择 刚 建立 的 php_site 动态 网 站 ， 这 时 就 可 以 打开 | 
php_site 站 点 ， 然 后 进行 站 点 内 容 管理 ， 或 者 创建 站 点 页 面 等 操作 ， 如 图 13.9 所 示 。 
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13.9 启动 站 点 








Go 


会 提示: 用 户 就 可 以 在 该 站 点 下 新 建文 件 夫 和 网 页 文档 ，PHP 动态 网 页 的 扩展 名 为 php。 本 书后 面 | 
的 实例 都 是 在 这 样 的 环境 下 运行 和 测试 。 | 


13.1.3 ”新建 FTP 站 点 


通过 FTP 服务 器 可 以 把 本 地 站 点 的 文件 和 文件 夹 内 容 上 传 到 远程 服务 器 上 ， 这 样 就 可 以 不 用 在 | 
本 地 安装 和 配置 PHP 环境 ， 让 远程 服务 器 帮助 完成 系统 运行 任务 ， 当 然 使 用 FTP 服务 器 之 前 ， 先 需 | 
要 购买 虚拟 空间 。 

定义 FTP 站 点 的 具体 步骤 与 定义 WWW 服务 站 点 的 基本 方法 相同 。 不 同 的 是 在 13.1.2 节操 作 步 
又 的 第 4 步 中 ， 选 择 【 访 问 】 的 方式 为 FTP 选项 ， 如 图 13.10 所 示 。 
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图 13.10 定义 FTP 站 点 


【操作 步骤 】 
第 1 步 , 在 【FTP 地 址 】 文 本 框 中 设置 FTP 主机 的 名 称 ， 如 ftp.mysite.cn。 请 输入 完整 的 主机 名 ， 
并 且 不 要 附带 其 他 任何 文本 。 特 别 是 不 要 在 主机 名 前 面 加 上 FTP 协议 名 。 


这 提示 : 如 果 不 知 道 FTP 主机 ， 可 以 联系 Web 站 点 托管 服务 商 索 取 。 如 果 知 道 主 机 名 的 全， 也 可 
以 直接 输入 卫 地 址 ， 如 221.195.613.111， 这 样 能 够 更 快速 地 连接 到 服务 器 。 


第 2 步 ， 在 【用 户 名 】 和 【密码 】 文 本 框 中 输入 用 于 连接 到 FTP 服务 器 的 用 户 名 和 密码 。 该 登 
录 名 和 密码 由 Web 站 点 托管 服务 商 提供 , 也 可 以 通过 Web 站 点 托管 服务 商 的 后 台 管理 网 站 进行 修改 。 
第 3 步 , 在 【 根 目 录 】 文 本 框 中 输入 用 户 在 远程 站 点 上 存储 公开 显示 的 文档 的 主机 目录 (文件 夹 )。 


容 提示 : 如 果 不 能 确定 应 输入 哪些 内 容 作为 主机 目录 ， 请 与 服务 器 管理 员 联系 或 将 文本 框 保留 为 空 
白 。 在 有 些 服务 器 上 ， 根 目录 就 是 用 户 首 次 使 用 FTP 连接 到 的 目录 。 若 要 确定 这 一 点 ， 
请 连接 到 服务 器 .如果 出 现在 [文件 ] 面 板 【 远 程 文件 视图 中 的 文件 夹具 有 像 public_html、 
Www 或 用 户 的 登录 名 这 样 的 名 称 ， 它 可 能 就 是 用 户 应 该 在 【主机 目录 】 文 本 框 中 输入 的 
目录 。 


第 4 步 , 在 Web URL 文本 框 中 输入 网 站 的 网 址 , 该 
网 址 能 够 供 链接 检查 器 验证 使 用 绝对 地 址 的 链接 。 在 输 
入 网 址 时 需要 输入 完全 网 址 ， 如 http://localhost/msite/。 

第 5 步 ， 单 击 【 测 试 】 按 钮 可 以 测试 登录 名 和 密码 
是 否 正确 ， 如 果 连 接 成 功 会 显示 提示 对 话 框 。 默 认 情 况 
下 ，Dreamweaver 会 保存 密码 。 如 果 用 户 希 望 每 次 连接 





















































| 到 远程 服务 器 时 ，Dreamweaver 都 提示 输入 密码 ， 可 以 Web ums [reopen] 

| 取消 选中 【保存 】 复 选 框 。 ~ ES 

| 【拓展 】 如 果 防 火 墙 配置 要 求 使 用 被 动 式 FTP， 用 ee 

| 户 可 以 单 击 【更 多 选项 ] 选 项 , 展开 更 多 选项 , 如 图 13.11 Denar en 

| 所 示 。 在 这 里 如 果 选 中 【使 用 被 动 式 FTP】 复 选 框 ， 一 Dan rp Bes 

| 般 服务 商都 会 提供 说 明 。【 使 用 被 动 式 FTIP】 能够 使 用 补 i [ER 























动 方式 建立 本 地 软件 与 FTP 服务 器 的 连接 ， 而 不 是 请 求 a 
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】 

远程 服务 器 来 建立 它 。 如 果 不 能 确定 是 否 使 用 被 动 式 FTP， 可 以 询问 系统 管理 员 。 | 
如 果 使 用 支持 IPv6 的 FTP 服务 器 ， 请 选中 【使 用 IPv6 传输 模式 】 复 选 框 。 随 着 Internet 协议 第 | 

6 版 (IPv6) 的 发 展 ，EPRT 和 EPSV 已 分 别 蔡 代 FTP 命令 PORT 和 PASV。 因 此 ， 如 果 用 户 正 试图 | 
连接 到 支持 IPv6 的 FTP 服务 器 ， 必 须 为 数据 连接 使 用 被 动 扩展 (EPSV) 和 主动 扩展 (EPRT) 命令 。| 





13.2 管理 站 点 


Dreamweaver 支持 多 站 点 的 管理 , 用 户 可 以 在 Dreamweaver 中 同时 定义 多 个 不 同 服务 器 类 型 的 站 
点 ， 然 后 再 利用 Dreamweaver 提供 的 【管理 站 点 】 对 话 框 进行 管理 。 


13.2.1 编辑 站 点 


管理 多 个 已 定义 的 站 点 可 以 在 【管理 站 点 】 对 话 框 中 完成 。 

【操作 步骤 】 

第 1 步 ， 启动 Dreamweaver。 选 择 【站 点 】 代 管理 站 点 】 命 令 ， 打开 【管理 站 点 】 对 话 框 ， 如 图 13.12 
所 示 。 
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图 13.12 【管理 站 点 】 对 话 框 


第 2 步 ， 在 【管理 站 点 】 对 话 框 的 列表 框 中 显示 已 定义 的 站 点 。 

第 3 步 ， 从 列表 框 中 选择 一 个 站 点 ， 然 后 单 击 对 话 框 底部 的 【编辑 】 按 钮 臣 ， 将 会 打开 【站 点 定 
义 为 】 对 话 框 ， 可 以 模仿 13.1 节 介 绍 的 方法 重新 修改 站 点 的 相关 设置 ， 包 括 本 地 、 远 程 和 测试 服务 
器 信息 等 。 

第 4 步 ， 选 中 站 点 之 后 ， 单 击 【复制 】 按 钮 喇 可 以 快速 复制 一 个 站 点 。 复制 站 点 的 目的 是 能 够 帮 | 
助 用 户 快速 引用 已 定义 站 点 的 设置 信息 , 这 样 能 够 加 快 站 点 定义 的 速度 , 方便 在 团队 内 部 共享 定义 站 
点 的 设置 ， 避 免 重 复 操作 。 
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| 容 提示 : 虽然 复制 站 点 没有 复制 站 点 内 部 结构 和 信息 ， 但 是 复制 与 被 复制 的 站 点 设置 信息 是 重复 的 。 
| 例如 ， 本 地 目录 和 远程 目录 都 是 相同 的 ， 所 以 当 用 户 复制 站 点 后 , 还 需要 修改 其 中 的 站 点 
| 设置 ,特别 要 修改 复制 站 点 的 本 地 目录 和 远程 目录 , 避免 在 不 同 站 点 内 进行 操作 时 可 能 会 


傅 凡 | 发 生 的 冲突 。 
| 如 果 已 定义 的 站 点 不 再 需要 ， 建 议 选择 该 站 点 ， 然 后 单 击 【删除 了】 按钮 一 删除 该 站 点 ， 但 
Note 是 站 皮 所 对 应 的 本 地 目录 和 远程 目录 没有 被 删除 ,目录 中 包含 的 文件 和 文件 夹 没有 受到 影 


| 响 。 如 果 和 希望 同时 也 删除 目录 中 包含 的 内 容 ， 则 先 在 【文件 】 面 板 中 进行 删除 ， 或 者 在 本 
| 地 系统 的 资源 管理 器 中 删除 。 


| 13.2.2 备份 站 点 
| 考虑 到 系统 的 安全 性 和 站 点 移植 , 用 户 应 备份 


| 已 定义 的 站 点 ， 避 免 系统 出 现 问题 后 ， 可 以 恢复 和 @ 作 训 匡 

| 失 的 设置 信息 ， 也 可 以 实现 与 团队 内 其 他 成 员 共享 呈 ee 
| 站 点 设置 。 

| 【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 在 【管理 站 点 】 对 话 框 中 选中 需要 备 
份 的 站 点 ， 然 后 单 击 【导出 】 按 钮 苹 ， 打 开 【 导 出 

第 3 步 , 在 该 对 话 框 中 设置 备份 文件 要 保存 的 
位 置 和 名 称 即 可 ， 如 图 13.13 所 示 。 

第 4 步 ,Dreamweaver 将 站 点 设置 导出 为 XML 图 13.13 导出 站 点 
文件 ， 扩 展 名 为 .ste。 可 以 在 记事 本 中 打开 查看 设 
置信 息 ， 如 图 13.14 所 示 。 
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图 13.14 查看 站 点 设置 信息 


第 5 步 ， 恢 复 站 点 是 备份 站 点 的 逆 过 程 。 在 【管理 站 点 】 对 话 框 中 单 击 【 导 入 站 点 】 按 钮 ， 打 开 
| 【导入 站 点 】 对 话 框 ， 这 时 可 以 选择 以 前 备份 的 文件 (.ste 文件 )， 然 后 单 击 【确定 】 按 钮 即 可 。 
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13.3 设计 站 点 


定义 站 点 之 后 ，Dreamweaver 会 自动 把 该 站 点 设置 为 当前 站 点 ， 此 时 可 以 在 【文件 】 面 板 中 查看 | 
和 管理 网 站 结构 和 文件 。 使 用 它 来 访问 站 点 ， 管 理 服务 器 ， 或 者 浏览 本 地 驱动 器 ， 查 看 和 管理 文件 和 
文件 夹 。 


13.3.1 切换 站 点 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver。 
第 2 步 ， 在 【管理 站 点 】 对 话 框 中 选中 需要 编辑 的 站 点 。 
第 3 步 , 单 击 【完成 】 按 钮 ， 则 Dreamweaver 会 自动 把 该 站 点 设置 为 当前 站 点 , 并 保存 这 种 状态 。 
每 次 启动 Dreamweaver 之 后 ， 会 自动 进入 此 站 点 的 编辑 环境 中 。 此 时 ， 在 【文件 】 面 板 中 会 默认 
显示 该 站 点 的 本 地 目录 内 容 。 
窑 提示 :考虑 到 每 一 次 切换 站 点 时 ，Dreamweaver 都 要 重 构 站 点 缓存 ， 如 果 站 点 内 容 很 多 的 话 ， 这 个 | 
过 程 是 很 慢 的 ， 不 建议 频繁 在 多 个 站 点 之 间 来 回 切换 。 除 非 站 点 内 容 很 小 ， 或 者 必须 在 站 点 
之 间 进 行 切 换 。 用 户 可 以 在 【文件 】 面 板 的 站 点 下 拉 列 表 中 快速 进行 切换 ， 如 图 13.15 所 示 。 





~ 单 击 当前 站 点 , 可 以 打开 【站 点 定 
so 义 为 】 对 话 框 ， 编 辑 当前 站 点 








ELE BE 














13.3.2 编辑 站 点 文件 


【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【窗口 】 | 文件 】 命 令 ， 打 开 
【文件 】 面 板 ， 如 图 13.16 所 示 。 


容 提示: 【文件 】 面板 的 操作 与 在 本 地 资源 管 
理 器 中 操作 相似 . 网 站 结构 一 般 通 过 
文件 夹 来 实现 ， 不同 版 块 、 不 同 栏目 
以 及 不 同类 型 的 文件 都 可 以 通过 文 。。 夺 17iR EET5 一 
件 立 来 进行 组 织 。 图 13.16 【文件 ] 面板 








文件 赤 。 2013t113 15:59 一 
2013/4/13 21:35 一 
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第 3 步 ， 右 击 某 个 文件 夹 或 者 文件 夹 内 的 文件 ， 在 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 
|， 即 可 在 当前 文件 夹 内 新 建 一 个 子 文件 夹 。 

| 【拓展 】 文 件 夹 可 以 多 层 居 套 ， 形 成 多 层 结构 关系 ， 但 是 不 要 把 这 个 层次 结构 设计 得 太 深 ，2~4 
| 级 结构 层次 基本 上 够 用 了 。 文 件 的 建立 与 文件 夹 的 操作 方法 相同 ， 在 PHP 服务 器 类 型 的 动态 网 站 中 
| 新 建 的 文件 扩展 名 为 php。 也 可 以 在 重 命名 时 修改 文件 的 类 型 。 


会 用 快捷 键 。 例 如 ，Ctrlt+A (全 选 ) 、CtrlHX ( 剪 切 文件 夹 或 文件 ) 、CtrlH+C〈 复 制 ) 、Ctrl 
+D (复制 ) 、CtrlHV〈 粘 贴 ) 、Del (删除 ) 、F2 〈 重 命名 ) 、F5 (刷新 站 点 等。 

巧 用 鼠标 左右 键 。 例 如 ， 单 击 文件 或 文件 夹 可 以 重 命名 ， 双 击 可 以 在 编辑 窗口 中 打开 文件 ， 
双击 文件 夹 名 称 可 以 展开 文件 夹 ， 右 击 可 以 弹出 快捷 菜单 ， 拖 动 文件 和 文件 夹 可 以 移动 位 
置 ， 按 住 Ctrl 键 拖 动 鼠标 可 以 快速 复制 文件 夹 或 文件 等 。 

使 用 快捷 菜单 。 选 中 操作 的 文件 夹 或 文件 ， 右 击 ， 然 后 在 弹出 的 快捷 菜单 中 可 以 找到 需要 
的 所 有 操作 功能 。 

使 用 面板 菜单 。 单 击 【 文 件 】 面 板 右 上 角 的 菜单 按钮 (图) ， 从 弹出 的 菜单 中 选择 相应 的 
命令 即 可 。 





第 4 步 ， 如 果 要 执行 删除 操作 ， 可 以 先 选中 要 删除 的 文件 ， 然 后 选择 【文件 】| 【删除 】 命 令 ， 
ff， 在 弹出 的 快捷 菜单 中 选择 【编辑 】| 【删除 】 命 令 。 


@ 警告 在 【文件 ] 面板 中 所 有 操作 都 是 不 能 恢复 的 ， 因 此 在 【文件 】 面 板 中 操作 时 要 特别 谨慎 ， 


第 5 步 ，Dreamweaver 会 弹出 提示 对 话 框 ， 询 问 用 户 是 否 确实 要 删除 所 选 文件 。 单 击 【 确 定 】 按 
钮 ， 删 除 所 选 文件 ; 单 击 【取消 〗 按 钮 ， 则 取消 删除 操作 。 


容 提示 : 删除 文件 的 最 简单 的 方法 是 : 选 定 要 删除 的 文件 后 ， 按 Delete 键 ， 然 后 在 弹出 的 对 话 本 





中 单 击 【 确 定 】 按 钮 即 可 将 其 删除 。 如 果 要 删除 菜 个 文件 来 下 的 全 部 文件 ， 只 需 选中 该 文 
件 夹 ， 然 后 按照 删除 文件 的 方法 操作 即 可 。 

如 果 要 一 次 删除 多 个 文件 或 文件 夹 ， 可 以 在 单 击 文件 时 按 下 Ctrl 键 或 Shift 键 协助 选中 多 
个 文件 按 住 Shift 键 ， 可 连续 选中 多 个 文件 ; 按 住 Ctrl 键 ， 可 以 选中 不 连续 的 多 个 文件 。 
选 定 文件 后 ， 再 按 Delete 键 即 可 删除 。 


13.3.3 查看 站 点 文件 


在 网 站 创建 与 维护 的 过 程 经 常 需要 查看 文件 和 文件 夹 ， 当 网 站 内 容 越 来 越 多 时 ， 有 时 是 非常 麻烦 
的 。 下 面 介绍 一 些 快捷 操作 方法 。 

【操作 步骤 】 

第 1 步 ， 启动 Dreamweaver。 

第 2 步 ， 选择 【窗口 】| 【文件 】 命 令 ， 打开 【文件 】 面 板 。 

第 3 步 ， 如 果 文 件 名 太 长 ， 可 以 通过 拖 虚 改变 【文件 】 面 板 的 宽度 来 实现 ， 把 光标 移 到 面板 的 左 
右边 框 ， 当 光标 变 成 双向 箭头 时 ， 按 住 左 键 拖 电 即 可 快速 改动 面板 的 宽度 。 

以 同样 的 方法 可 以 改变 面板 的 高 度 ， 以 便 在 列表 框 中 看 到 更 多 的 文件 ， 方 便 浏览 和 操作 。 

第 4 步 ， 通 过 隐藏 或 调整 面板 中 的 详细 列 可 以 加 快 浏览 速度 。 

例如 ， 在 【站 点 定义 为 】 对 话 框 的 【文件 视图 列 】 分 类 中 设置 默认 列 的 显示 或 隐藏 ， 以 及 排列 顺 
序 。 这 对 于 经 常 查看 文件 的 相关 属性 时 非常 重要 。 例如 , 如 果 经 常 关注 文件 的 修改 时 间 , 则 可 以 把 【 修 
改 】 列 调整 到 前 面 ( 选 中 该 项 ， 然 后 单 击 咎 和 国 按 钮 来 调整 排列 顺序 )。 
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第 5 步 ， 如 果 觉得 文件 大 小 信息 没有 多 大 参考 价值 ， 则 可 以 双击 【大 小 】 选 项 ， 在 打开 的 选项 中 | 
取消 选中 【显示 】 复 选 框 ， 如 图 13.17 所 示 。 这 样 可 以 集中 精力 浏览 文件 或 参考 关注 的 文件 信息 ， 避 | 
免 其 他 无 用 的 文件 影响 。 | 








ogs mnmate 次 大 


























图 13.17 设置 文件 视图 列 


【拓展 】 在 【文件 】 面板 右上 角 单 击 面板 菜单 按钮 (图 )， 从 弹出 的 下 拉 菜 单 中 选择 【查看 】 人 显 
示 隐 藏 文件 】 命 令 ， 可 以 浏览 网 站 中 所 有 隐藏 文件 。 这 些 隐藏 文件 多 半 由 系统 自动 产生 ， 用 来 辅助 完成 
某 些 功 能 。 例 如 ， 存 回 和 取出 文件 〈.lck 文件 )、 设 计 备注 文件 〈.mno 文件 ) 等 。 这 样 信息 对 于 网 站 管 
理 至 关 重 要 ， 一 般 不 要 轻易 删除 。 通 过 开启 显示 隐藏 文件 ， 但 是 不 要 觉得 这 些 文件 无 用 而 全 部 删除 。 


13.3.4 ”站 内 文 件 快 速 定 位 


在 庞杂 的 站 点 内 定位 文件 不 是 件 很 容易 的 事情 , 但 是 Dreamweaver 提供 了 很 多 支持 功能 , 使 得 在 
站 点 中 查找 选 定 、 打 开 、 取 出 或 最 近 修改 过 的 文件 非常 容易 。 也 可 以 在 本 地 站 点 或 远程 站 点 中 查找 较 
新 的 文件 。 

1， 在 站 点 内 定位 打开 的 文件 

在 Dreamweaver 的 主 窗口 的 菜单 栏 中 选择 【站 点 】|【 在 站 点 定位 】 命 令 ，Dreamweaver 会 自动 
在 【文件 】 面 板 中 帮 用 户 找到 打开 的 文件 ， 并 使 其 处 于 选中 状态 。 

2. 选择 取出 的 文件 

取出 的 文件 一 般 都 会 在 文件 图 标 后 面 显示 一 个 “Vv” 符号 。 如 果 网 站 结构 比较 复杂 ， 在 不 同文 件 
夹 中 进行 操作 ， 这 样 被 取出 的 文件 会 很 多 。 但 是 在 工作 时 ， 由 于 忙 可 能 会 忘记 很 多 被 取出 的 文件 , 因 | 
此 会 妨碍 其 他 成 员 的 编辑 操作 。 这 时 ， 用 户 不 妨 在 【文件 】 面 板 菜单 中 选择 【编辑 】|【 选 择 取出 的 | 
文件 】 命 令 ， 则 Dreamweaver 会 自动 把 所 有 取出 的 文件 选中 显示 ， 这 样 用 户 就 可 以 一 目 了 然 地 知道 站 
点 内 被 取出 的 文件 情况 。 

3. 选择 修改 的 文件 

如 何 确 定 站 点 内 最 近 修改 的 文件 ? 在 【文件 】 面 板 菜单 中 选择 【编辑 】|【 选 择 最 近 修改 期 】 命 
令 ，Dreamweaver 会 打开 【选择 最 近 修 改 日 期 】 对 话 框 ， 如 图 13.18 所 示 。 在 该 对 话 框 中 用 户 可 以 设 
置 时 间 段 来 查找 最 近 修改 的 文件 ,或 者 指定 某 个 时 间 段 的 文件 ， 然 后 单 击 【 确 定 】 按 钮 ，Dreamweaver 
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会 自动 高 亮 显示 所 有 符合 条 件 的 文件 。 


刚 于 仅 Conmouts 站 点 ) 





图 13.18 选择 最 近 修改 日 期 


13.4 网 站 上传 


在 网 站 开发 期 一 般 都 在 本 地 /网 络 中 进行 ， 当 开发 和 测试 完毕 ， 就 需要 把 整个 网 站 上 传 到 远程 服务 器 
| 上， 当然 在 上 传 之 前 ， 用 户 应 该 定义 远程 FTP 站 点 。 下 面 介绍 如 何 快速 把 网 站 上 传 到 远程 服务 器 上 。 


13.4.1 快速 上 传 


上 传 之 前 , 应 确定 网 站 是 团队 开发 , 还 是 个 人 建设 。 如 果 是 在 协作 环境 中 工作 , 建议 在 上 传 之 前 ， 
先 利用 存 回 和 取出 功能 把 需要 上 传 的 文件 取出 来 , 避免 别人 同时 操作 。 如 果 只 有 一 个 人 在 远程 站 点 上 
工作 ， 就 不 需要 考虑 这 些 问题 了 。 

【操作 步 又】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】|【 文 件 】 命 令 ， 打 开 【 文 件 】 面 板 。 

第 3 步 ， 在 【文件 】 面 板 的 工具 栏 中 单 击 【连接 到 远 端 主机 】 按 钮 器 先 建立 本 地 与 远程 服务 器 
的 连接 。 如 果 连 接 成 功 ， 则 该 按钮 会 显示 为 器 ]， 再 次 单 击 可 以 挂 断 连接 。 

第 4 步 ， 连 接 之 后 ， 单 击 【 刷 新 】 按 钮 & 刷新 本 地 目录 ， 以 保证 本 地 目录 为 最 新 内 容 。 

第 5 步 ， 如 果 是 第 一 次 上 传 ， 不 妨 选中 本 地 站 点 根 目 录 ， 然 后 单 击 【 上 传 文件 】 按 钮 全 。 

第 6 步 ，Dreamweaver 会 询问 是 否 上 传 整个 站 点 ， 单 击 【确定 】 按 钮 ， 则 系统 自动 把 本 地 目录 中 
所 有 文件 上 传 到 远程 服务 器 上 。 

第 7 步 ， 如 果 单 击 【 文 件 】 面 板 底部 的 【日 志 】 按 钮 ， 则 可 以 查看 上 传 日 志 ， 如 网 13.19 所 示 。 

在 这 个 后 台 文 件 活动 日 志 中 ,用 户 可 以 查看 哪些 文件 上 传 成 功 ， 哪 些 文件 上 传 失 败 ， 以 便 即 时 采 
取 措 施 ， 继 续 上 传 失 败 的 文件 。 

当 网 站 内 容 很 多 时 ， 网 站 上 传 会 持续 很 长 时 间 ， 这 时 用 户 可 以 隐藏 【后 台 文件 活动 】 对 话 框 ， 让 
文件 上 传 在 后 台 继续 操作 ， 这 样 就 可 以 继续 执行 其 他 任务 。 

第 8 步 ， 如果 不 是 初次 上 传 ， 建 议 在 【文件 】 面 板 中 选择 部 分 文件 夹 或 文件 进行 上 传 ， 这 样 能 够 
加 快 上 传 速度 ， 对 于 上 网 速度 比较 慢 的 用 户 ， 更 是 应 该 如 此 。 

第 9 步 ， 当 远程 服务 器 为 FTP 服务 器 时 ， 用 户 可 以 开启 【FTP 记录 】 面 板 ， 实 时 跟踪 信息 的 传 
输 情况 。 方 法 是 在 【结果 】 面 板 组 中 选择 【FTP 记录 】 面 板 ， 当 连接 到 FTP 服务 器 之 后 ， 该 面板 会 
不 断 滚动 显示 实时 传输 信息 ， 如 图 13.20 所 示 ， 如 果 了 解 FTP 传输 协议 ， 则 可 以 从 中 洞察 到 文件 上 传 
的 更 多 信息 。 
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图 13.19 上 传 日 志 图 13.20 FTP 记录 
13.4.2 同步 上 传 


文件 同步 就 是 Dreamweaver 能 够 保持 本 地 目录 或 远程 目录 中 的 文件 都 是 最 新 修改 的 内 容 。 这 对 于 
文件 反复 被 上 传 而 不 知 本 地 哪些 文件 是 最 新 的 用 户 来 说 ， 使 用 文件 同步 操作 或 许 能 够 解决 用 户 的 困 
扰 。 实 现 站 点 文件 同步 的 方法 如 下 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】| 【文件 】 命 令 ， 打 开 【 文 件 】 面 板 。 

第 3 步 ， 在 工具 栏 中 单 击 【 展 开 以 显示 本 地 和 远 端 站 点 】 按 钮 国 ， 然 后 在 本 地 站 点 选中 部 分 文件 
或 者 整个 站 点 ， 如 图 13.21 所 示 。 
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13.21 在 本 地 选择 部 分 上 传 文件 
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第 4 步 ， 单 击 【 文 件 】 面 板 中 的 【同步 】 按 钮 仿 。 此 时 ，Dreamweaver 会 打开 【与 远程 服务 器 同 
步 】 对 话 框 ， 如 图 13.22 所 示 。 

第 5 步 ， 在 【同步 】 下 拉 列 表 框 中 选择 要 同步 的 范围 ， 有 两 种 选择 : 同步 选中 的 文件 或 者 整个 站 
全 | 点 。 然 后 在 【方向 】 下 拉 列 表 框 中 选择 同步 的 方法 。 
| 回放 置 较 新 的 文件 到 远程 : 上 传 到 远程 服务 器 上 不 存在 或 自从 上 次 上 传 以 来 已 更 改 的 所 有 本 





Note | 地 文件 。 

| 从 远程 获得 较 新 的 文件 : 下 载 本 地 不 存在 或 自从 上 次 下 载 以 来 已 更 改 的 所 有 远程 文件 。 

| 获得 和 放置 较 新 的 文件 : 将 所 有 文件 的 最 新 版 本 放置 在 本 地 和 远程 站 点 上 。 

| 第 6 步 ， 如 果 在 上 传 的 同时 ， 和 希望 清除 远程 服务 器 上 多 余 的 文件 〈 相 对 于 本 地 目录 )， 则 可 以 选 

| 中 【从 远程 获得 较 新 的 文件 】 复 选 框 。 

| 第 7 步 ， 如 果 在 【方向 】 下 拉 列 表 框 中 选择 【获得 和 放置 较 新 的 文件 】 选项 ， 则 该 复 选 框 不 可 用 。 
| 第 8 步 ， 如果 在 【方向 】 下 拉 列 表 框 中 选择 【放置 较 新 的 文件 到 远程 】 选 项 ， 则 该 复 选 框 显示 为 
“删除 本 地 驱动 器 上 没有 的 远 端 文件 ”， 此 时 选中 该 复 选 框 ， 则 将 删除 远程 站 点 中 没有 相应 本 地 文件 
的 所 有 文件 。 

第 9 步 ， 如 果 在 【方向 】 下 拉 列 表 框 中 选择 【从 远程 获得 较 新 的 文件 】 选 项 ， 则 该 复 选 框 显示 为 
“删除 远 端 服务 器 没有 的 本 地 文件 ”此 时 选中 该 复 选 框 ， 则 将 删除 本 地 站 点 中 没有 相应 远程 文件 的 
| 所 有 文件 。 

第 10 步 ， 单 击 【 预 览 】 按 钮 ， 此 时 Dreamweaver 会 自动 检查 本 地 和 远程 文件 中 哪个 属于 最 新 ， 
并 根据 用 户 在 【同步 文件 】 对 话 框 中 设置 进行 反应 。 

第 11 步 ， 如 果 每 个 选 定 文件 的 最 新 版 本 都 已 位 于 本 地 和 远程 站 点 并 且 不 需要 删除 任何 文件 ， 则 
将 显示 提示 对 话 框 ， 提 示 无 须 进行 任何 同步 。 否 则 将 显示 【同步 】 对 话 框 ， 允 许 用 户 是 否 把 最 新 的 文 
件 上 传 到 远程 服务 器 ， 如 图 13.23 所 示 。 此 时 ,可 以 在 该 对 话 框 中 选择 是 否 上 传 、 获 取 、 删 除 和 忽略 。 


文件 :0 个 村 被 更 新 ，1334 个 村 补水 过 








已 同步 
风沙 6)， 可 修 jste 器 BERS DD ii elf? Hf 








方向 0) 家 二 入 3i 广 件 回 时 未 所 有 文件 
于 要 更 动作， 清远 择 文件 并 时 击 下 万 的 其 中 一 个 图 标 ， 然 后 单 击 " 本 定 "" 
口 本 5 动 器 上 没有 的 运 油 文件 一 全 8] ejs] 四 和 





图 13.22 【与 远程 服务 器 同步 】 对 话 框 图 13.23 【同步 】 对 话 框 


第 12 步 ， 若 要 更 改 特定 文件 的 操作 ， 请 选择 该 文件 ， 然 后 单 击 对 话 框 底部 的 动作 图 标 之 一 进行 
操作 。 用 户 也 可 以 直接 单 击 【 确 定 】 按 钮 同步 所 有 文件 ， 此 时 Dreamweaver 将 最 新 的 本 地 文件 自动 上 
传 到 远程 服务 器 上 。 


13.4.3 ”遮盖 上 传 


遮盖 就 是 排除 某 些 文件 夹 或 某 类 文件 的 操作 。 使 用 遮盖 有 什么 好 处 呢 ” 举 一 个 简单 的 例子 , 在 网 
站 上 传 中 ， 用户 可 能 希望 所 有 多 媒体 文件 暂时 先 不 上 传 ， 等 待 上 网 宽松 时 再 继续 上 传 ， 这 时 用 户 可 以 
利用 遮盖 功能 ， 把 所 有 多 媒体 文件 遮盖 住 ， 不 允许 其 上 传 。 这 样 能 够 加 快 网 站 上 传 的 速度 。 当 然 让 盖 
功能 不 仅 影响 文件 上 传 ， 还 会 影响 获取 、 存 回 、 取 出 和 声称 报告 等 操作 。 
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【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】| 【文件 】 命 令 ， 打开 【 文 件 】 面 板 。 

第 3 步 ， 在 默认 状态 下 ， 站 点 遮盖 功能 是 被 启动 的 。 用 户 可 以 关闭 遮盖 功能 ， 如 图 13.24 所 示 ， 


当 禁用 站 点 遮盖 功能 之 后 ， 所 有 喧 盖 文件 都 会 取消 这 盖 。 当 再 次 启用 站 点 嘻 盖 功能 时 ， 所 有 先前 包头 | 


的 文件 将 恢复 遮盖 。 





第 4 步 ， 在 【站 点 设置 对 象 js_site】 对 话 框 的 【遮盖 】 分 类 选项 中 ， 用 户 可 以 设置 要 遮盖 的 文件 | 


类 型 ， 选 中 【遮盖 具有 以 下 扩展 名 的 文件 】 复 选 框 ， 然 后 在 下 面 的 文本 框 中 输入 要 谈 盖 的 文件 类 型 ， 
以 扩展 名 来 表示 ， 例 如 ，.png 就 表示 遮盖 站 点 中 名 称 以 .png 结尾 的 所 有 文件 。 如 果 和 遮盖 多 个 类 型 的 文 
件 ， 则 应 该 使 用 空格 分 隔 多 个 文件 类 型 ， 不 要 使 用 逗号 或 分 号 。 

第 5 步 ， 启 动 遮盖 功能 之 后 ， 在 本 地 或 远程 目录 中 选择 一 个 或 多 个 文件 夹 。 

第 6 步 ， 在 右键 菜单 中 选择 【遮盖 】|【 遮 盖 】 命 令 ， 即 可 对 选中 文件 夹 执行 遮盖 功能 。 此 时 一 
条 红线 将 穿 过 受 影响 的 文件 夹 以 及 内 部 文件 ， 如 图 13.25 所 示 ， 指 示 它们 已 被 让 闵 。 注 意 ， 遮 盖 功 能 
只 能 够 作用 于 文件 夹 或 某 一 类 文件 上 面 ， 不 能 作用 于 单个 文件 。 


迹 盖 用 于 在 所 有 站 点 所 作 中 六 队 指 定单 文件 夫 和 文件 
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图 13.24 设置 遮盖 图 13.25 遮盖 的 文件 
第 7 步 , 用 户 可 以 在 右键 菜单 中 选择 【全 部 取消 遮盖 】 命 令 来 取消 所 有 文件 的 遮盖 ,但 这 不 会 禁 
用 遮盖 ,而 且 无 法 重新 让 盖 所 有 先前 被 遮盖 的 文件 夹 和 文件 ,除非 对 各 个 文件 夹 和 文件 类 型 逐个 重新 
设置 遮盖 。 


13.5 远程 管理 


上 传 站 点 之 后 ， 就 要 对 站 点 进行 维护 与 管理 了 。 站 点 管理 不 像 上 传 站 点 那样 一 下 子 就 能 完成 ， 它 
涉及 站 点 文件 的 方方面面 ， 是 一 个 长 期 而 繁琐 的 过 程 ， 专 业 站 点 管理 人 员 几 乎 每 天 都 要 去 做 这 些 工作 。 

Dreamweaver 提供 的 远程 管理 功能 比较 强大 ， 操 作 也 非常 直观 。Dreamweaver 中 的 网 站 远程 管理 
都 可 以 在 【网 站 管理 器 】 窗 口中 完成 。 


13.5.1 认识 网 站 管理 器 
在 【文件 】 面 板 的 工具 栏 中 单 击 【 展 开 以 显示 本 地 和 远 端 站 点 】 按 钮 国 ， 把 【文件 】 面 板 切换 到 
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【网 站 管理 器 】 窗 口 ， 如 图 13.26 所 示 。 
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图 13.26 【网 站 管理 器 】 窗 口 


【网 站 管理 器 】 窗 口 实际 上 就 是 【文件 】 面 板 的 扩展 视图 ， 不 过 它 是 一 个 独立 的 网 站 管理 工具 ， 
具有 独立 的 窗口 。 从 功能 上 讲 【 网 站 管理 器 】 窗 口 与 【文件 】 面 板 完全 相同 ， 但 【网 站 管理 器 】 窗 口 
提供 了 更 便于 管理 的 视图 和 操作 环境 。 

切换 到 【网 站 管理 器 】 窗 口 时 ， 用 户 就 无 法 在 Dreamweaver 中 进行 网 页 编辑 操作 。 

如 果 要 编辑 文档 ， 需 单 击 【 展 开 以 显示 本 地 和 远 端 站 点 】 按 钮 国 返回 。 如 果 【 文 件 】 面 板 被 以 浮 
动 的 方式 显示 ， 则 切换 到 【网 站 管理 器 】 窗 口 时 ,【 网 站 管理 器 】 窗 口 将 覆盖 Dreamweaver 文档 编辑 
窗口 。 

在 【网 站 管理 器 】 窗 口中 ， 所 有 操作 命令 和 功能 都 可 以 在 菜单 栏 中 找到 ， 实 际 菜单 栏 中 每 项 都 与 
【文件 】 面 板 的 面板 菜单 是 对 应 的 。 
工具 栏 集成 了 【文件 】 面板 中 的 工具 栏 ， 但 是 把 视图 下 拉 选 项 设计 为 按钮 形式 ， 也 是 从 操作 的 便 
利 性 考虑 的 。 单 击 窗口 工具 栏 中 的 【测试 服务 器 】 按 钮 女 ， 用 户 还 可 以 查看 测试 服务 器 中 的 文件 ， 如 
果 单 击 【 站 点 文件 】 按 钮 匡 可 以 返回 远程 视图 。 


13.5.2 ”操作 远程 文件 


【网 站 管理 器 】 窗 口 提供 了 可 视 化 操作 方式 允许 用 户 快速 进行 远程 文件 操作 。 在 窗口 左 侧 的 【 远 
程 目录 】 列 表 框 中 , 用 户 可 以 直观 地 查看 远程 服务 器 上 的 文件 , 并 借助 本 地 操作 方式 来 操作 远程 文件 。 
例如 ， 复 制 、 粘 贴 、 删 除 、 拖 动 。 如 果 是 宽带 网 的 话 ， 用 户 基本 上 感觉 不 到 操作 的 延迟 ， 狂 如 在 本 地 
自由 地 操作 文件 。 

使 用 【网 站 管理 器 】 窗 口 可 以 方便 备份 远程 站 点 内 容 。 在 远程 目录 中 选中 指定 文件 或 整个 站 点 ， 
单 击 工具 栏 中 的 【获取 文件 】 按 钮 咏 ， 从 远程 服务 器 下 载 文件 〈 获 取 文件 是 与 上 传 文件 的 反 操作 )。 
用 户 可 以 利用 这 个 功能 随时 备份 远程 站 点 或 部 分 文件 , 防止 远程 服务 器 因 意 外 事故 , 而 丢失 网 站 数据 。 
虽然 一 般 服 务 商都 会 定期 备份 服务 器 ， 但 是 如 果 自 己 能 够 随时 下 载 备 份 ， 这 样 会 更 放心 。 而 对 于 团队 
协作 开发 中 ， 这 种 做 法 更 值得 提倡 。 

在 【网 站 管理 器 】 窗 口中 准确 定义 远程 文件 。 用户 也 许 正在 右 侧 列表 框 的 本 地 目录 中 查看 一 些 文 
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件 ， 想 确 知 远程 目录 是 否 存在 该 文件 ， 以 及 这 些 所 在 的 位 置 。 这 时 用 户 可 以 在 本 地 选中 文件 ,然后 在 
窗口 菜单 栏 中 选择 【编辑 】|【 远 端 站 点 中 定位 】 命 令 ， 则 Dreamweaver 会 自动 帮助 用 户 在 左 侧 列表 框 
中 选中 显示 对 应 的 文件 。 反 之 ， 用 户 可 以 在 远程 目录 中 选中 文件 ， 然 后 在 窗口 菜单 栏 中 选择 【编辑 】| | 
【本 地 站 点 中 定位 】 命 令 会 自动 在 本 地 目录 中 选中 对 应 文件 。 这 个 功能 对 于 网 站 结构 复杂 、 内 容 繁多 | 
的 站 点 来 说 ， 是 一 个 不 错 的 小 功能 。 | 
另外 ， 用 户 在 【选择 】 菜单 中 选择 【 较 新 的 本 地 文件 】 和 【 较 新 的 远 端 文件 】 命令， 可 以 分 别 在 

本 地 和 远程 目录 中 选中 最 新 修改 的 文件 。 这 在 多 人 协作 开发 中 是 一 个 很 重要 的 功能 ,这样 用 户 可 以 快 | 
速 知道 远程 服务 器 上 哪些 文件 被 同事 修改 过 。 


13.6 合作 开发 





大 型 或 商业 网 站 一 般 都 是 团队 合作 的 结晶 ， 依 靠 个 人 的 力量 是 远 远 不 够 的 。 例 如 ， 在 一 个 团队 中 
美工 负责 图 样 ， 设 计 师 负责 网 页 布局 和 前 台 效果 设计 ， 网 页 编辑 负责 内 容 的 编排 ， 开 发 人 员 负 责 后 台 
风 辑 开发 ,规模 比较 大 的 网 站 甚至 还 有 网 站 策划 、 数 据 库 开发 和 维护 、 网 站 测试 评估 等 人 员 。 多 人 共 
同 操作 一 个 网 站 ， 不 可 避免 地 会 发 生 操作 冲突 问题 ， 在 这 种 情况 下 ， 如 果 一 时 朴 忽 或 协调 不 好 ， 很 容 
易 出 现 两 个 (或 更 多 ) 人 同时 修改 同一 页 面 的 情况 ， 更 新 时 相互 覆盖 ， 造 成 页 面 的 混乱 ， 甚 至 可 能 使 
得 某 人 长 时 间 的 工作 付 之 东 流 。 因 此 ，Dreamweaver 提供 了 一 套 技术 来 保证 团队 开发 中 的 协作 问题 。 


13.6.1 远程 文件 存 回 和 取出 


存 回 和 取出 是 Dreamweaver 提供 的 一 项 技术 , 它 可 以 保证 一 个 文档 在 某 个 时 间 内 只 能 够 由 一 个 人 
进行 操作 ， 其 他 人 不 允许 进行 操作 。 要 启动 存 回 和 取出 功能 ， 必 须 在 定义 站 点 时 在 【远程 信息 】 中 设 
置 勾 选 【启动 存 回 和 取出 】 功 能 。 

【操作 步 又】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】|【 文 件 】 命 令 ， 打 开 【 文 件 】 面 板 。 

第 3 步 ， 当 需要 编辑 某 个 公共 文件 时 ， 在 【文件 】 面 板 的 本 地 视图 中 选中 该 文件 。 

第 4 步 , 单 击 面板 顶部 的 [取出 文件 ] 按 钮 余 , 该 文件 图 标 后 面 会 显示 一 个 灰色 的 锁 状 标识 (于 8)， 
表示 该 文件 处 于 只 读 状态 ， 此 时 文件 处 于 被 锁定 状态 。 这 时 在 其 他 成 员 的 站 点 内 将 会 看 到 一 个 红色 的 
V， 表 示 该 文件 已 经 被 他 人 编辑 ， 同 时 可 以 查看 到 编辑 者 的 姓名 。 

原则 上 Dreamweaver 会 禁止 他 人 操作 ， 如 果真 要 操作 ， 则 给 出 一 个 提示 对 话 框 ,提示 是 否 覆 盖 取 
出 者 的 操作 。 

第 5 步 ， 如 果 取 出 者 双击 打开 文件 ， 则 Dreamweaver 会 提示 是 否 取出 ， 如 果 单 击 【 取 出 】 按 钮 ， 
则 该 文件 就 处 于 取出 状态 ， 此 时 该 成 员 编辑 的 【文件 】 面 板 远程 视图 和 本 地 视图 中 ， 取 出 文件 图 标 后 
面 会 跟随 一 个 绿色 的 VY， 表示 该 文件 已 经 被 取出 ， 在 【取出 者 】 列 中 会 显示 该 成 员 的 姓名 。 

第 6 步 ， 当 在 【远程 信息 】 选 项 中 选中 【打开 文件 之 前 取出 】 复 选 框 ， 则 每 当 用 户 打 开 一 个 文件 ， 
Dreamweaver 都 会 把 该 文件 转换 为 取出 状态 ， 其 他 成 员 就 无 法 打开 该 文件 ， 这 样 能 够 防止 用 户 在 操作 
文件 时 忘记 了 单 击 【取出 文件 】 按 钮 。 

如 果 某 个 文件 已 经 被 其 他 成 员 取 出 ， 则 用 户 就 无 法 操作 该 文件 ，Dreamweaver 会 禁止 操作 。 团 队 
成 员 之 间 可 以 在 【取出 者 】 列 单 击 取出 者 名 称 自动 发 送 电子 邮件 以 实现 相互 联系 。 
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第 7 步 ， 当 编辑 完毕 之 后 ,不 要 忘记 把 取出 的 文件 存 回 ,方法 是 选中 存 回 的 文件 ， 单 击 【 存 回 文 
件 】 按 钮 急 ， 存 回 操作 实际 上 就 是 解锁 该 文件 ， 以 便 其 他 成 员 能 够 继续 操作 。 此 时 在 该 文件 图 标 后 
面 出 现 一 个 灰色 的 锁 状 标识 〈 了 8)， 表 示 该 文件 处 于 只 读 状 态 。 如 果 要 取消 只 读 属性 ， 可 以 右 击 该 文 
件 ， 在 弹出 的 快捷 菜单 中 选择 【取消 只 读 属 性 】 命 令 即 可 。 


13.6.2 ”使 用 设计 备注 实现 合作 开发 
设计 备注 相当 于 开发 日 志 , 是 设计 人 员 在 设计 过 程 中 随手 记录 的 心得 和 体会 ， 以 方便 日 后 阅读 程 





| 序 ， 发 现 问题 后 便于 维护 。 更 重要 的 是 团队 成 员 之 间 通 过 设计 备注 可 以 交流 心得 、 沟 通信 息 。 


Dreamweaver 支持 设计 备注 功能 。 

1. 启动 站 点 设计 备注 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 站 点 】|【 管 理 站 点 】 命 令 。 

第 3 步 ， 在 打开 的 【管理 站 点 】 对 话 框 中 选择 要 启动 设计 备注 的 站 点 。 

第 4 步 ， 单 击 【编辑 】 按 钮 ， 打 开 【 站 点 设置 对 象 js_site】 对 话 框 。 

第 5 步 ， 在 【高 级 设置 】 选 项 中 选择 【设计 备注 】 选 项 ， 然 后 在 右 侧 选中 对 应 的 选项 ,如 图 13.27 

如 果 选 中 【维护 设计 备注 】 复 选 框 ， 可 以 在 本 地 启动 设计 备注 ，Dreamweaver 仅 在 本 地 维护 
设计 备注 ， 但 不 将 这 些 备 注 与 站 点 文件 一 起 上 传 。 

如 果 选 中 【启用 上 传 并 共享 设计 备注 】 复 选 框 ， 则 Dreamweaver 会 自动 将 与 站 点 关联 的 设 
计 备 注 与 其 余 的 文档 一 起 上 传 。 以 便 与 其 他 成 员 共享 设计 备注 。 当 下 载 文件 时 , Dreamweaver 
也 会 自动 获取 相关 的 设计 备注 文件 ， 以 便 了 解 其 他 成 员 的 设计 心得 或 开发 信息 。 当 然 如 果 
网 站 由 自己 独立 开发 ， 就 没有 必要 选择 该 选项 了 ， 这 样 能 够 提高 文件 传输 的 性 能 。 

加 ”如 果 要 删除 所 有 设计 备注 文件 ， 只 需要 单 击 【 清 理 设计 备注 】 按 钮 即 可 ，Dreamweaver 会 自 
动 删除 站 点 的 所 有 本 地 设计 备注 文件 。 

2. 为 文件 创建 设计 备注 

用 户 可 以 为 任何 文件 创建 设计 备注 , 如 模板 文件 、 图 像 、Flash 等 , 甚至 还 可 以 为 网 页 中 的 Applet、 


| ActiveX 控件 、 图 像 、Shockwave 对 象 等 创建 设计 备注 。 


【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】|【 文 件 】 命 令 ， 在 【文件 】 面 板 中 打开 一 个 文件 ， 然 后 在 面板 菜单 中 选 
择 【 文 件 】 | 人 【设计 备注 】 命 令 ， 或 者 在 右键 菜单 中 选择 【设计 备注 】 命 令 ， 打 开 【 设 计 备注 】 对 话 
框 ， 如 图 13.28 所 示 。 

第 3 步 ， 在 【基本 信息 】 选 项 卡 的 【状态 】 下 拉 菜 单 中 选择 一 种 文档 的 状态 (如 草稿 、 保 留 1、 
保留 2、 保留 3、alpha、beta、 最 终 版 和 特别 注意 )。 

第 4 步 ， 单 击 日 期 图 标 (图 ) 为 备注 添加 当前 本 地 日 期 。 然 后 在 【备注 】 文 本 区 域 中 输入 备注 信 
息 。 选 中 【文件 打开 时 显示 】 复 选 框 ， 则 在 每 次 打开 文件 时 显示 设计 备注 文件 。 

第 5 步 ， 切 换 到 【所 有 信息 】 选 项 卡 中 ， 可 以 增加 多 条 消息 ， 以 便 其 他 会 员 补 加 信息 。 单 击 由 按 
钮 可 以 添加 新 的 名 / 值 对 ， 如 图 13.28 所 示 。 
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图 13.27 设计 备注 图 13.28 添加 备注 


第 6 步 ， 单 击 【确定 】 按 钮 即 可 。Dreamweaver 将 创建 的 备注 保存 到 名 为 notes 的 文件 夹 中 ( 隐 
藏 状态 )， 与 当前 文件 处 在 相同 的 位 置 。 文 件 名 是 文档 的 文件 名 加 上 .mno 扩展 名 。 例 如 ， 如 果 文 件 名 
是 index.html， 则 创建 的 设计 备注 文件 名 为 index.html.mno。 


3.， 阅读 设计 备注 
如 果 在 创建 设计 备注 时 选中 【文件 打开 时 显示 】 复 选 框 ， 则 当 该 文件 被 打开 时 ,会 自动 打开 【 设 
计 备 注 】 对 话 框 。 如 果 没 有 则 可 以 选择 【文件 】| 【设计 备注 】 命 令 ， 打开 【设计 备注 】 对 话 框 。 


13.6.3 使 用 自 定义 列 实现 合作 交互 


团队 开发 中 的 信息 交互 和 沟通 是 件 很 重要 的 事情 。 毕 竟 在 多 人 组 成 的 开发 小 组 中 , 各 自 独处 一 隅 ， 
甚至 身 在 天 涯 海边 ， 虽 说 各 种 通信 工具 发 达 〈 如 电话 、E-mail、QQ、MSN、 传 真 等 )， 相 互 之 间 的 联 
系 也 比较 快速 ， 但 是 比较 麻烦 。 

使 用 设计 备注 来 实现 相互 沟通 ， 但 是 它 还 不 够 直观 ， 适 合 慢 时 交流 ， 不 适合 即时 应 答 或 提示 。 这 
时 团队 内 部 不 妨 利用 【文件 】 面 板 的 自 定义 列 来 实现 即时 提示 效果 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 站 点 】|【 管 理 站 点 】 命 令 ， 打 开 【 管 理 站 点 】 对 话 框 。 

第 3 步 ， 选 择 预 定义 的 站 点 ， 然 后 单 击 【 编 辑 】 按 钮 ， 打 开 【 站 点 设置 对 象 js_site】 对 话 框 。 

第 4 步 ， 在 【高 级 设置 】 选 项 中 选择 【文件 视图 列 】 选 项 。 

第 5 步 ， 单 击 外 按钮 ， 则 Dreamweaver 会 自动 生成 一 个 untitled 列 ， 在 【 列 名 称 】 文 本 框 中 输入 
列 的 标题 ， 该 名 称 将 显示 在 【文件 】 面 板 的 列 标题 栏 中 。 

第 6 步 ， 在 【与 设计 备注 关联 】 下 拉 列 表 框 中 选择 一 个 值 ， 或 者 输入 一 个 值 (建议 输入 与 列 名 称 
一 致 的 值 )， 这 样 好 在 【设计 备注 】 中 查看 或 修改 其 值 。 

第 7 步 ， 在 【设计 备注 】 中 修改 自 定义 列 的 值 ， 也 可 以 在 自 定 义 列 中 修改 【设计 备注 】 中 的 名 / 
值 对 ， 如 图 13.29 所 示 。 这 样 在 【文件 】 面 板 中 查看 Dreamweaver 站 点 时 ， 有 关 文 件 和 文件 夹 的 信息 
将 在 列 中 显示 。 

第 8 步 ， 在 【对 齐 】 下 拉 列 表 框 中 选择 列 标题 和 列 信息 的 对 齐 方式 。 选 中 【显示 】 复 选 框 保证 该 
列 被 显示 在 【文件 】 面 板 中 。 
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图 13.29 自 定义 列 


第 9 步 ， 选 中 【启用 列 共 享 】 和 【与 该 站 点 所 有 用 户 共享 】 复 选 框 ， 这 时 Dreamweaver 会 提示 用 
户 开启 站 点 设计 备注 功能 ， 并 保证 共享 设计 备注 。 

第 10 步 ， 还 可 以 更 改 列 的 排列 顺序 、 隐 藏 列 〈 文 件 名 列 除 外 )、 删 除 列 〈 仅 限 自 定义 的 列 )、 重 
| 命名 列 ( 仅 限 自 定义 的 列 )、 建 立 列 与 设计 备注 的 关联 ( 仅 限 自 定义 的 列 )。 增 加 自 定义 列 时 最 多 允许 
增加 10 列 。 


13.7 站 点 测试 和 维护 


在 建立 远 端 站 点 并 将 其 声明 为 可 浏览 之 前 , 应 在 本 地 机 上 对 本 地 站 点 进行 完整 的 测试 , 使 网 页 在 
浏览 器 中 显示 出 预期 的 效果 。 测试 的 主要 内 容 包括 检验 网 页 与 目标 浏览 器 的 兼容 性 、 在 浏览 器 中 预览 
网 页 、 检 验 下 载 的 时 间 和 网 页 文件 的 大 小 等 。 

测试 实际 上 就 是 模拟 用 户 访问 站 点 的 过 程 ， 从 中 发 现 问题 并 对 设计 加 以 改进 。 站 点 测试 和 维护 是 
网 站 开发 中 一 项 不 可 或 缺 的 环节 。 许 多 成 功 的 经 验 表 明 ， 让 不 是 很 熟悉 计算 机 的 人 来 参加 站 点 的 测试 
工作 ， 效 果 非 常 好 。 这 些 人 会 提出 许多 专业 人 员 没有 顾及 到 的 问题 或 一 些 好 的 建议 。 


13.7.1 检查 断 开 链接 


网 站 开发 的 过 程 就 是 不 断 重新 设计 、 重 新 组 织 的 过 程 ， 修 修补 补 、 涂 涂改 改 是 经 常 的 事情 ， 也 许 
某 个 链接 的 页 面 已 被 移动 或 删除 ， 但 是 链接 还 存在 。 因 此 用 户 应 该 使 用 【链接 检查 器 】 对 站 内 所 有 链 
接 进 行 测试 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 窗 口 】|【 结 果 】 命 令 。 

第 3 步 ， 在 Dreamweaver 主 窗口 底部 将 打开 【结果 】 面 板 组 ， 从 中 选择 【链接 检查 器 】 面 板 ， 如 
图 13.30 所 示 。 

第 4 步 , 按 图 中 的 提示 进行 操作 , 即 可 快速 检查 站 点 内 所 有 断 开 的 链接 。 也 可 以 在 菜单 中 选择 【站 
| 点 】|【 检 查 站 点 范围 的 链接 】 命 令 快 速 进行 操作 ， 检 测 的 结果 将 显示 在 【链接 检查 器 】 面 板 中 。 
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图 13.30 【链接 检查 器 】 面 板 


第 5 步 ， 发 现 问题 之 后 ， 就 应 该 赶紧 修复 ， 这 里 有 两 种 方法 可 以 实现 。 

第 一 ， 直 接 在 【链接 检查 器 】 面 板 中 修复 断 开 的 链接 和 图 像 引用 。 方 法 是 在 【 断 开 的 链接 】 列 中 (而 
不 是 【文件 】 列 ) 单 击 断 开 的 链接 ， 此 时 链接 处 于 可 编辑 状态 ， 然 后 在 其 中 设置 正确 的 链接 路 径 即 可 。 

第 二 ， 在 【属性 】 面 板 中 修复 的 链接 和 图 像 引 用 。 方 法 是 先 在 【文件 】 列 中 双击 打开 文件 ， 在 编 
辑 窗口 中 会 以 【代码 】 视 图 自动 选中 显示 断 开 的 链接 ， 此 时 用 户 在 【属性 】 面 板 中 修复 链接 即 可 。 这 
种 方法 的 优势 是 可 以 单 击 【 属 性 】 面 板 中 【链接 】 文 本 框 右 侧 的 文件 夹 图 标 ， 进 行 快速 选择 修复 。 

第 6 步 ， 如 果 在 同一 文件 中 还 有 其 他 断 开 的 链接 ，Dreamweaver 会 提示 修复 其 他 文件 中 的 这 些 引 
用 。 单 击 【是 】 按 钮 ，Dreamweaver 将 更 新 列表 中 引用 此 文件 的 所 有 文档 。 

第 7 步 , 如 果 网 站 开启 了 【启用 存 回 和 取出 】 功 能 , 则 Dreamweaver 将 尝试 取出 需要 更 改 的 文件 。 
如 果 不 能 取出 文件 ， 则 Dreamweaver 将 提示 不 能 更 改 断 开 的 引用 。 


13.7.2 检查 孤立 文件 


孤立 的 文件 就 是 那些 文件 本 身 还 在 站 内 , 但 是 站 内 没有 任何 文件 链接 到 该 文件 。 孤立 的 文件 很 多 
时 候 是 在 操作 中 遗忘 的 废 的 文件 ， 对 于 这 些 无 用 的 垃圾 一 定 要 清理 出 去 ， 否则 会 占用 空间 和 带宽 ,不 
利于 网 站 的 维护 和 管理 。 

孤立 的 文件 是 不 会 被 访问 的 ， 除 非 用 户 直 接 访问 该 文件 ， 例如， 新闻 的 目录 页 。 但 是 并 不 是 所 有 
孤立 的 文件 都 是 废 文件 ， 有 些 文件 虽然 自己 没有 被 别 的 文件 链接 ,但 是 它 却 链接 着 别 的 文件 。 此 种 情 
况 下 ， 操 作 时 就 应 该 小 心 了 ， 最 好 是 打开 文件 看 看 页 面 内 容 ， 和 避免 误 删 文件 。 

查找 孤立 的 文件 可 以 在 【链接 检查 器 】 面 板 中 实现 。 

【操作 步骤】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 在 【链接 检查 器 】 面 板 中 单 击 【 检 查 链接 】 按 钮 所， 然后 在 检查 类 型 下 拉 菜 单 中 选择 【 孤 
立 的 文件 】 选 项 ，Dreamweaver 将 显示 没有 孤立 的 文件 。 

第 3 步 ， 选 中 要 删除 的 文件 ， 然 后 按 Delete 键 即 可 快速 删除 。 
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| 总 提示 : 对 于 孤立 的 图 像 文件 来 说 ,可 以 大 胆 地 删除 ， 但 是 对 于 网 页 文件 ,建议 最 好 打开 看 看 所 包 
| 含 的 内 容 ， 再 决定 是 否 删除 。 
! 


会 内 | 87:3 验证 Web 标准 


yote Dreamweaver 提供 验证 程序 ， 能 够 快速 验证 站 点 内 所 有 标签 是 否 存在 语法 错误 。 该 验证 程序 可 以 检 
测 的 语言 包括 HIML、XHTML、CFML (ColdFusion 标记 语言 )、WML (无 线 标记 语言 ) 和 XML 等 。 

1. 设置 验证 程序 

在 启动 验证 程序 之 前 ， 用 户 最 好 在 【首选 参数 】 对 话 框 中 设置 验证 程序 的 首选 参数 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 选 择 【 编 辑 】|【 首 选 参数 】 命 令 ， 打 开 【 首 选 参数 】 对 话 框 。 

第 3 步 ， 在 左 侧 【 分 类 】 列 表 中 选择 【W3C 验证 程序 】 分 类 项 ， 即 可 在 右 侧 设置 验证 程序 的 参 
| 到 如 图 13.31 所 示 。 
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图 13.31 设置 要 验证 参照 的 标签 库 


第 4 步 ， 设 置 要 验证 参照 的 标签 库 ， 同 一 标签 库 或 语言 只 能 选择 一 个 版 本 。 
第 5 步 ， 单 击 【 管 理 】 按钮 ， 可 以 在 打开 的 对 话 框 中 选中 要 在 验证 程序 报告 中 包含 的 错误 和 警告 
类 型 。 
2， 验 证 站 点 标签 
在 【结果 】 面 板 组 中 选择 【验证 】 面 板 ， 然 后 单 击 面板 左 侧 的 〖 验 证】 按钮 ， 从 弹出 的 下 拉 菜单 
中 选择 【验证 当前 文档 】 选 项 ， 则 Dreamweaver 会 自动 对 当前 文档 进行 标签 的 语法 验证 ， 如 图 13.32 
所 示 。 
所 有 检测 到 的 记录 分 类 说 明 如 下 。 
如 果 前 面 标识 图 标 显示 为 食 ， 则 表示 该 记录 是 一 条 语法 错误 ， 用 户 可 以 根据 指示 的 文件 名 、 
所 在 的 行 ， 以 及 错误 描述 进行 修复 。 Dreamweaver 暂时 还 没有 提供 自动 修复 功能 ， 所 以 还 需 
要 用 户 手动 逐条 修改 。 有 些 错 误 可 能 是 因为 用 户 设 置 的 验证 版 本 较 低 ， 而 该 版 本 还 支持 这 
种 语法 功能 ， 所 以 应 根据 实际 需要 酌情 选择 修改 。 修 改 时 ， 直 接 双击 【文件 】 列 的 文件 名 ， 
| Dreamweaver 会 自动 打开 该 文件 ， 在 【 拆 分 】 视 图 下 选中 显示 错误 的 标签 或 属性 。 
| 回 ” 如 果 前 面 标识 图 标 显示 为 全， 则 表示 该 记录 是 一 条 非 标准 的 用 法 ，Dreamweaver 提出 警告 
| 建议 不 要 使 用 ， 最 好 能 够 修复 。 
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图 13.32 验证 整个 当前 本 地 站 点 


如 果 前 面 标识 图 标 显示 为 昂 , 则 表示 该 记录 是 一 条 消息 , Dreamweaver 提示 该 用 法 已 经 过 时 ， 
或 将 被 淘汰 ， 建 议 避 免 使 用 。 

如 果 前 面 标 识 图 标 显示 为 她 ， 则 表示 该 记录 是 一 条 震 套 错误 ，Dreamweaver 会 提示 用 户 在 使 
用 时 标签 嵌 套 出 现 错误 ， 例 如 ， 缺 少 封 闭 标签 ， 或 者 嵌 套 的 层次 不 正确 。 因 此 用 户 应 该 及 
时 修复 过 来 。 对 于 正 浏览 器 来 说 ， 它 会 很 智能 地 帮助 用 户 进行 纠 错 显 示 ， 但 是 对 于 其 他 标 
准 浏览 器 来 说 ， 就 会 认为 这 是 一 个 错误 而 不 予 解析 。 

如 果 在 【验证 】 面 板 左 侧 单 击 【 浏 览 报告 】 按 钮 肪 ， 则 Dreamweaver 会 自动 生成 报告 ， 以 网 页 

的 形式 把 所 有 记录 列 出 来 ， 这 样 用 户 可 以 在 放大 的 窗口 中 预览 所 有 验证 信息 。 
3， 站 点 报告 


站 点 报告 是 Dreamweaver 提供 的 另 一 个 站 点 验证 工具 ， 该 工具 能 够 允许 用 户 有 选择 地 进行 验证 ， 
这 样 能 够 使 验证 工具 更 具 目 的 性 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver。 

第 2 步 ， 在 【结果 】 面 板 组 的 【站 点 报告 】 面 板 中 单 击 左 侧 的 【报告 】 按 钮 包 ， 用 户 也 可 以 选择 
【站 点 】|【 报 告 】 命 令 。 

第 3 步 ， 打开 【 报 告 】 对 话 框 ， 如 图 13.33 所 示 。 在 该 对 话 框 中 可 以 自 定义 要 验证 的 项 目 ， 并 进 
行 流程 控制 。 

第 4 步 ， 在 【报告 在 】 下 拉 列 表 框 中 选择 要 报告 的 内 容 ， 并 设置 要 运行 的 任意 一 种 报告 类 型 〈 工 
作 流 程 或 HTML)。 只 有 在 【文件 】 面 板 中 己 经 有 选 定 文件 的 情况 下 ， 才 能 运行 【站 点 中 的 已 选 文件 】 
报告 。 

第 5 步 ， 如果 选择 了 工作 流程 报告 ， 单 击 【 报 告 设置 】 按 钮 进行 设置 ， 如 果 选 择 不 止 一 个 工作 流 
程 报告 ， 则 对 每 个 报告 都 需要 单 击 【 报 告 设置 】 按 钮 进行 设置 。 其 中 几 个 选项 说 明 如 下 。 

取出 者 : 创建 一 个 报告 ， 列 出 某 特定 小 组 成 员 取 出 的 所 有 文档 。 

回 ”设计 备注 : 创建 一 个 报告 ， 列 出 选 定 文档 或 站 点 的 所 有 设计 备注 。 

最 近 修 改 的 项 目 : 创建 一 个 报告 ， 列 出 在 指定 时 间 段 内 发 生 更 改 的 文件 。 


。499 。 





es 


第 6 步 ， 如 果 选 择 HIML 报告 ， 则 可 以 进行 如 下 选择 。 
可 合并 赚 套 字体 标签 列 出 所 有 可 以 合并 的 嵌 套 字体 标签 以 便 清 理 代码 。 例 如 ，<font 
color="#FF0000"><font size="4">STOP!</font></font> 将 被 显示 出 来 。 
全 内 | 没有 蔡 换文 本 : 列 出 所 有 没有 设置 蔡 换文 本 的 img 标签 , 即 没有 设置 alt="" 或 tile="" 属 性 的 
YY | <img> 标 签 。 在 纯 文本 浏览 器 或 设 为 手动 下 载 图 像 的 浏览 器 中 ， 蔡 换文 本 将 蔡 代 图 像 出 现在 
Note | 应 显示 图 像 的 位 置 。 
多 余 的 说 套 标签 : 列 出 应 该 清理 的 翌 套 标签 。 例 如 ，<i>abc<i>efg</i>hij</i>。 
可 移 除 的 空 标签 : 列 出 所 有 可 以 移 除 的 空 标签 以 便 清理 HTML 代码 。 例 如 ， 可 能 在 【代码 】 
视图 中 已 删除 了 某 项 或 某 个 图 像 ， 却 留 下 了 应 用 于 该 项 的 标签 。 
无 标题 文档 : 列 出 在 选 定 参数 中 找到 的 所 有 无 标题 的 文档 。Dreamweaver 报告 所 有 具有 默 
认 标 题 、 重 复 标 题 或 缺少 标题 标签 的 文档 。 
4. 清理 标签 
选择 【命令 】|【 清 理 HTML】 命 令 ， 将 打开 【清理 HIMLAXHTML】 对话 框 ， 使 用 该 对 话 框 则 
可 以 快速 清除 当前 文档 中 的 指定 标签 或 者 错误 、 不 规范 的 标签 ， 如 图 13.34 所 示 。 


加 加 


要 各 在 四 : 当前 文档 





口 下 大 于 Dieamweavar 的 HTML 生 骸 


口 Dreamweaver 特殊 标记 
口 振 天 的 标 符 . 

此 天 回 尽 可 服 侣 开 起 天 的 <ioxt> 杯 葵 
回 完成 时 且 示 动作 记 条 
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13.33 【报告 】 对 话 框 13.34 【清理 HTML/XHTML)】 对 话 框 
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网 站 推广 和 SEO 


中 国有 名 古话 :“ 好 酒 不 怕 埠 子 深 "。 这 话 在 很 多 地 方 都 有 一 定 的 道理 ， 但 运用 到 互联 网 上 
却 行 不 通 。 现 在 每 天 都 有 成 二 上 万 个 新 网 站 推出 ， 即 使 自己 的 主页 再 出 色 ， 也 应 该 努力 进行 
宣传 。 

在 推广 站 点 之 前 ， 必 须 确定 所 制作 的 站 点 是 否 独 具 特 色 ， 内 容 是 否 充实 ?如 果 只 是 确定 了 
站 点 的 框架 或 只 是 首页 上 的 内 容 ， 就 不 要 急 着 进行 推广 。 等 站 点 已 经 制作 得 较 完整 之 后 ， 再 开 
始 “ 促 销 ”。 网络 推广 方法 很 多 ,但 真正 实用 的 方法 却 少 之 又 少 ,适合 普通 用 户 的 方法 就 更 加 少 
了 。 本 章 分 析 当 前 网 络 比较 有 效 的 几 种 推广 方法 


【 学 习 重 点 】 

PH 精心 设计 网 站 域名 

在 各 大 搜索 引擎 上 注册 站 点 

在 电子 邮件 签名 中 添加 站 点 地 址 
到 BBS 上 公布 站 点 信息 

通过 友情 链接 推广 


至 至 至 至 





砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 





14.1 网 站 推广 概述 


不 要 被 各 种 术语 所 迷惑 了 ， 网 站 推广 就 分 为 两 种 : 一 种 是 花 钱 的 ， 一 种 是 免费 的 。 花 钱 的 推广 有 
很 多 ， 尤 其 是 广告 ， 可 以 选择 在 门户 、 中 小 型 网 站 投放 广告 ， 也 可 以 到 杂志 上 投放 广告 ， 还 可 以 与 知 
名 网 站 合作 ， 搞 团购 之 类 的 活动 。 

不 花 钱 的 推广 ， 包 括 通过 链接 交换 、QQ、 邮 件 、 博 客 、 微 博 、 站 群 等 方式 进行 ， 最 终 目的 就 是 
留 下 个 人 网 址 或 相关 信息 。 在 不 花 钱 的 推广 方法 中 ， 推 荐 SEO 优化 ， 如 果 稍微 懂 点 SEO 的 话 ， 那 么 
网 站 将 获得 稳定 的 流量 和 潜在 客户 。 


14.1.1 写 给 网 站 推广 初学 者 


加 ”网 站 推广 是 一 个 不 断 变化 的 过 程 

推广 就 是 推销 自己 的 网 站 ， 和 人 推广 自己 一 样 。 例 如 ， 我 每 天 很 勤奋 地 写 博客 ， 然 后 一 篇 博客 到 
处 发 ， 到 任何 一 个 博客 写 评论 ， 在 网 易 、 搜 狐 、 新 浪 、 百 度 等 媒体 上 都 能 见 到 ， 甚 至 在 微 博客 上 都 能 
见 到 文章 链接 。 这 虽然 讨厌 ， 但 总 归 是 让 很 多 人 知道 。 

推广 是 一 种 日 积 月 累 的 过 程 ， 而 在 这 个 过 程 中 只 是 每 日 在 一 些 特定 的 网 站 发 帖 ， 那么 这 种 推广 只 
能 是 一 种 思春 的 体力 劳动 ， 在 这 个 过 程 中 ， 似 乎 看 不 出 任何 变化 。 

变化 , 是 推广 最 大 的 特点 。 你 是 干 体力 活 的 推广 员 , 还 是 不 断 进取 的 营销 师 , 全 在 自己 用 不 用 心 。 

回 ”推广 是 一 个 不 断 迎 合 客户 的 过 程 

推广 不 仅仅 是 在 特定 的 网 站 发 帖 这 么 简单 ， 除 了 发 帖 之 外 ， 还 需要 每 日 观察 统计 数据 ， 根 据 数 据 
提出 更 优秀 的 推广 方案 ， 下 面 会 介绍 如 何 通过 数据 分 析 做 精准 推广 。 

经 过 一 段 时 间 的 积累 ， 来 访 的 用 户 会 越 来 越 多 ， 随 着 推广 的 深入 ， 网 站 在 SEO 方面 也 要 进行 相 
应 的 变化 ， 一 成 不 变 地 推广 是 没有 意义 的 。 


14.1.2 ”网络 推广 4 个 层次 


网 站 推广 可 以 分 为 4 个 层次 ， 具 体 说 明 如 下 。 

回 ”第 一 层次 : 纯 体 力 推广 者 

初期 网 络 推广 非常 简单 ， 机 械 的 换 JP、 在 不 同 网 站 发 贴 ， 按 照 写 好 的 基本 思路 扮演 不 同 角色 ， 
在 A 网 是 富婆 、 在 B 网 是 农民 、 在 论坛 就 是 路 见 不 平 一 声 吼 的 甲 、 乙 、 两 、 丁 ， 这 是 最 普通 的 马 
前 卒 。 

最 典型 的 是 在 各 个 分 类 、 招 聘 、 兼 职 网 站 都 能 看 到 这 类 人 ， 一 般 大 部 分 都 是 学 生 ， 都 会 注 明 “发 
帖 者 ”“ 网 络 推广 ”的 字眼 。 通 常 搞 网 站 的 人 会 叫 这 类 人 是 “水 军 ”“ 人 肉 spam”。 

回 ”第 二 层次 : 全 能 网 络 推广 者 

稍微 深入 后 ， 则 需要 熟悉 各 个 类 型 的 大 小 论坛 ， 要 熟悉 SNS、Blog、 门 户 网 站 、 微 博 、IM 软件 
等 各 种 网 络 有 效 沟通 发 布 平台 ， 而 通常 这 个 层次 的 人 更 看 重 做 搜索 引擎 优化 (SEO) 。 

例如 ， 许 多 人 会 在 微 博 、 博 客 中 分 享 自 己 所 收集 的 论坛 网 址 列表 ， 这 类 人 通常 也 会 带领 若干 成 员 
成 为 全 能 网 络 推广 领袖 ， 这 个 阶段 依然 是 兼职 占 多 数 ， 不 过 却 要 花费 不 少 精 力 。 

网 络 推广 工作 往往 是 从 兴趣 或 兼职 开始 , 大 部 分 人 只 想 赚 点 零花 钱 , 能 做 到 领队 也 差不多 到 头 了 。 
通常 搞 网 站 的 人 会 叫 这 类 人 是 “高 手 ”“ 牛 人 ”“ 专 家 ”。 
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回 ”第 三 层次 : 网 络 推手 
再 深入 一 步 ， 则 需要 掌握 上 文 所 述 的 每 一 种 推广 平台 的 属性 、 特 点 和 运作 方法 ， 掌 握 大 量 各 平台 


ID,， 能 够 结合 产品 选择 最 佳 的 宣传 平台 和 方式 。 做 到 这 个 程度 已 经 是 资深 推广 人 员 了 , 可 以 在 业界 小 | 


有 名 气 了 ， 基 本 上 都 是 全 职 网 络 推广 。 


例如 ， 先 制造 事件 ， 或 者 塑造 “负面 明星 ”， 让 人 吕 ， 甸 得 越 历 害 ， 关 注 度 就 越 高 ， 靠 负面 事情 | 


先 把 知名 度 炒 起 来 ， 第 二 步 再 把 形象 板 正 过 来 ， 让 网 民 同 情 你 ， 再 花 点 钱 删 删 帖 ， 负 面 形象 基本 就 没 
了 。 通 常 搞 网 站 的 人 会 叫 这 类 人 是 “网 络 推手 ”。 

加 ”第 四 层次 : 资深 网 络 推广 者 

最 后 这 种 网 络 推广 要 求 最 高 ， 需 要 能 够 根据 不 同 的 产品 的 特性 、 预 算 并 结合 时 下 的 热点 和 手头 的 
平台 资源 策划 完整 的 网 络 推广 方案 , 做 到 这 个 程度 一 般 是 有 一 定 规模 的 工作 室 或 专业 的 从 业 公司 的 资 
深 行销 策划 ， 这 也 是 行业 中 最 缺 的 人 才 ， 通 常 也 叫 “ 策 划 ”“ 营 销 ”。 

做 一 个 出 色 的 网 络 推广 人 员 ， 需 要 有 耐力 、 加 班 熬夜 的 过 人 体 氏 、 顶 得 住 客户 无 理 要 求 的 抗 压 能 
力 、 不 断 吸收 身边 各 种 知识 的 学 习 能 力 ， 最 重要 的 是 不 能 急功近利 、 人 懂得 脚踏实地 。 


14.1.3 ”网 站 推广 常见 问题 


网 站 推广 的 方法 很 多 , 但 真正 做 好 的 却 没有 几 人 , 这 是 为 什么 呢 ? 主要 是 在 推广 过 程 中 出 现 的 效 
率 问题 上 。 

回 ”现象 一 : 边 聊天 边 搞 推 广 。 

好 不 容易 抽出 时 间 摘 网 站 推广 ， 突 然 企 鹅 的 脑袋 一 个 劲 晃 动 ,还 是 聊 会 吧 ， 虽 然 聊天 能 增强 人 际 
关系 , 但 原本 一 个 小 时 可 以 把 网 址 推广 出 去 的 工作 ， 却 用 了 两 个 小 时 。 有 时 候 跌跌撞撞 做 推广 ， 总 是 
会 发 生 难 免 的 差错 。 

回 ” 现 象 二 :喜欢 随意 浏览 网 页 。 

在 网 站 推广 的 过 程 中 ， 难 免 会 到 处 点 击 ， 如 果 不 能 够 很 好 地 控制 自己 ， 如 果 没 有 很 强 的 计划 性 
点 开 一 百 个 链接 一 个 个 地 看 ， 看 完了 ， 心 情 和 舒畅 ， 推 广 的 事 又 拖 后 了 。 

回 “现象 三 : 没有 明确 目的 。 

在 网 站 推广 过 程 中 ， 很 容易 失去 方向 。 因 此 ， 推 广 网 站 要 有 目的 性 ， 而 不 是 上 前 就 点 击 ， 到 一 些 
不 相关 的 网 站 推广 网 站 ， 连 拉 带 搜 、 故 布 疑 阵 ， 用 尽 各 种 手段 说 到 : “欢迎 到 我 的 博客 或 者 小 站 ”。 
例如 ， 在 我 的 博客 中 每 天 都 有 一 堆 群 发 垃圾 评论 。 如 果 你 的 网 站 是 关于 减肥 、 保 健 方面 的 内 容 ， 偏 偏 
跑 到 我 这 个 网 站 设计 博客 搞 推广 ， 首 先 用 户 群 就 不 对 ， 再 次 ， 我 不 删 你 评论 才 怪 呢 。 所 以 说 ， 发 布 信 
息 一 定 要 有 针对 性 。 

回 ”现象 四 : 喜欢 听 别 人 忽悠 。 

原本 想 好 一 个 小 时 应 该 完成 的 工作 ， 竟 然 不 自觉 地 就 跑 到 站 长 站 听 别 人 忽悠 去 了 , 尤其 是 在 一 些 
推广 经 验 分 享 的 文章 里 ， 深 陷 不 能 自拔 ， 于 是 放下 手头 推广 工作 ， 紧 闭 双眼 ， 开 始 幻想 。 








如 何 保持 定 力 ， 不 被 互联 网 世界 纷纷 扰 拓 的 东西 所 打扰 ， 是 一 个 问题 。 在 我 半年 时 间 细心 推广 博 | 


客 的 经 验 里 ， 终 于 找到 一 条 可 行 的 办 法 : 在 网 络 推广 时 ， 关 掉 QQ， 摘 下 耳机 ， 告 诉 自己 ， 我 只 有 一 
个 小 时 。 


14.2 精心 设计 网 站 域名 


网 站 推广 的 第 一 步 就 是 注册 一 个 好 记 的 域名 。 爱 上 网 或 对 网 络 有 兴趣 的 朋友 可 能 都 有 这 样 的 切身 
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体会 : 当 行走 在 大 街 上 时 ， 到 处 都 是 .com 的 广告 ， 有 些 看 一 眼 就 能 记 住 ， 有 些 则 不 然 。 当 然 ， 它 们 
的 广告 效应 也 会 有 差别 。 


| 14.2.1 域名 概述 


Note 从 技术 上 讲 ， 域 名 只 是 互联 网 中 用 于 解决 网 站 地 址 问题 的 一 种 方法 。 可 以 说 只 是 一 个 技术 名 词 。 


但 是 ， 由 于 互联 网 已 经 成 为 了 全 世界 人 的 互联 网 ， 域 名 也 自然 地 成 为 了 一 个 社会 科学 名 词 。 域 名 是 互 
| 联网 上 的 一 个 服务 器 或 一 个 站 点 系统 的 名 字 ， 在 全 世界 ， 没 有 重复 的 域名 。 无 论 是 国际 或 国内 域名 ， 
| 全 世界 接 入 互联 网 的 人 都 能 够 准确 无 误 地 访问 到 。 从 社会 科学 的 角度 看 ， 域 名 已 成 为 了 互联 网 文化 的 
组 成 部 分 。 从 商界 看 ， 域 名 已 被 誉 为 “企业 的 网 上 商标 ”。 没 有 一 家 企业 不 重视 自己 产品 的 标识 一 一 
商标 ， 而 域名 的 重要 性 及 其 价值 ， 也 已 经 被 全 世界 的 企业 所 重视 。 


| 14.2.2 域名 命名 规范 


| 域名 名 称 一 般 由 26 个 英文 字母 和 10 个 阿拉 伯 数 字 以 及 横 杠 “_” 组 成 。 
| 内 域名 的 注册 ， 有 很 多 不 同 于 国际 域名 注册 的 地 方 ， 在 对 域名 的 命名 上 有 比较 多 的 限制 ,包括 
| 以 下 方面 。 
不 得 使 用 CHINA、CHINESE、CN、NATIONAL 等 作为 域名 的 一 部 分 。 
不 得 使 用 公众 知晓 的 其 他 国家 或 者 地 区 名 称 、 外 国 地 名 、 国 际 组 织 名 称 。 
未 经 各 级 地 方 政府 批准 ， 不 得 使 用 县 级 以 上 〈 含 县 级 ) 行政 区 划 名 称 的 全 称 或 者 缩写 。 
不 得 使 用 行业 名 称 或 者 商品 通用 名 称 。 
不 得 使 用 他 人 已 在 中 国 注册 过 的 企业 名 称 或 商标 名 称 。 
不 得 使 用 对 国家 、 社 会 或 者 公共 利益 有 损害 的 名 称 。 

对 于 公司 站 点 来 说 ， 把 公司 名 称 注册 为 域名 是 一 个 较 好 的 选择 。 这样 让 用 户 在 记 住 公司 名 称 的 同 
时 ， 也 记 住 了 公司 站 点 的 域名 。 这 是 业界 一 条 不 成 文 的 做 法 ， 也 是 非常 行 之 有 效 的 方法 。 

相信 很 多 爱 上 网 的 朋友 都 有 过 这 样 的 经 历 : 如 果 要 查找 某 公司 的 产品 信息 , 但 是 只 知道 该 公司 名 
称 ， 而 不 知道 公司 域名 ， 这 时 往往 就 在 浏览 器 地 址 栏 中 输入 “www. 公 司 名 称 〈 英 文 ) .com”， 然 后 
按 Enter 键 ， 基 本 上 都 能 满意 而 归 。 如 要 查找 有 关 Dreamweaver 的 信息 ， 知 道 它 是 Adobe 公司 发 行 的 
软件 后 ， 就 可 以 在 浏览 器 的 地 址 栏 中 输入 “www. adobe.com”， 并 按 Enter 键 ， 可 打开 Adobe 公司 的 
站 点 ， 执 行 相应 的 搜索 ， 就 可 以 查找 到 想 要 的 信息 。 


你 提示 : 国内 域名 由 中 科 院 域名 管理 中 心 负责 ， 国 际 域名 由 设 在 美国 的 Internet 信息 管理 中 心 
InterNIC 和 它 设 在 世界 各 地 的 分 支 机 构 负 责 批 准 域名 的 申请 。 


14.3 友情 链接 推广 
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用 户 可 以 在 互联 网 上 查找 与 自己 站 点 主题 类 似 的 站 点 , 通过 友好 协商 后 相互 交换 链接 。 随 着 链接 
站 点 的 增多 ， 形 成 类 似 “ 蜂 蛛网 ” 般 的 外 链 后 ， 可 以 吸引 大 量 的 浏览 者 。 彼 此 互相 宣传 ， 效 果 非 常 好 。 


14.3.1 诚恳 地 申请 友情 链接 


| 在 网 上 有 很 多 人 在 讲 如 何 申请 友情 链接 , 方法 其 实 都 大 同 小 异 ， 只 要 认真 做 了 ， 就 一 定 要 找到 权 
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重 比较 高 的 友情 链接 。 
肉 提示 : 友情 链接 几乎 不 会 给 你 的 网 站 带 来 流量 ， 但 是 又 是 一 件 必 须要 做 的 推广 工作 . | 
由 于 这 种 合作 方式 一 般 是 通过 友好 协商 建立 的 ， 所 以 合作 过 程 中 可 能 会 出 现 很 多 问题 . 这 | 
就 要 求 在 寻找 链接 伙 件 时， 本 着 诚信 、 公 平 的 原则 建立 合 伯 关系. 另外 ， 不 要 单纯 为 了 增 | 医 记 
加 彼此 链接 的 数量 ， 而 忽视 了 其 他 站 点 的 质量 ，“ 宁 缺 勿 滥 ” 才 是 正确 的 选择 。 
例如 ， 在 我 的 博客 上 线 第 一 天 ， 优 化 推广 工作 是 以 做 友情 链接 为 主 ， 通 过 Z-Blog 的 官方 | 
网 站 ,我 找到 了 很 多 博客 网 站 设计 、 网 站 优化 类 的 博 主 ， 并 在 他 们 的 博客 当中 留言 希望 能 | 
与 他 们 做 链接 。 这 一 天 大 概 给 58 个 左右 的 博 主 留言 ， 希 望 能 做 友情 链接 ， 有 E-mail 的 均 
发 送 了 E-mail。 截止 到 晚上 21:40， 就 收 到 了 19 个 人 回复 有 14 人 愿意 和 我 做 友情 链接 ， 
5 人 拒绝 和 我 做 连接 ， 原 因 是 对 搜索 引擎 丰 友好， 百度 没有 收录 ， 所 以 暂 不 交换 链接 ， 待 | 
资 博客 收录 正常 后 ， 再 交换 链接 也 不 迟 。 | 


14.3.2 ”如 何 寻 找 友情 链接 


申请 友情 链接 比较 简单 ， 关 键 问 题 是 如 何 寻找 合适 的 目标 链接 ， 下 面 列举 一 些 比较 好 的 寻找 友情 | 
链接 方法 。 

回 ”友情 链接 互 换 QQ 群 。 

优点 : 通过 QQ 群 寻找 友情 链接 是 最 快捷 的 方法 ， 直 接 可 以 联系 到 站 长 本 人 ， 省 时 省 力 ， 可 快速 





链接 。 
缺点 : QQ 群 里 的 网 站 什么 类 型 的 都 有 ， 而 且 里 面 的 人 大 部 分 都 是 为 了 SEO 才 去 做 友情 链接 的 
没有 感情 基础 。 

回去 论坛 专 版 、SNS 网 站 群 组 交换 链接 。 

这 个 方法 是 很 多 站 长 都 用 的 方法 ， 把 个 人 网 站 信息 发 布 上 去 ， 顺 带 推广 而 已 。 

优点 : 可 以 快速 发 布 。 

缺点 : 容易 作为 广告 被 删除 ， 目 标 散 ， 劳 动量 大 ， 效 果 比 较 低 。 

加 ”在 别人 的 友情 链接 中 寻找 友情 链接 。 

在 申请 友情 链接 时 , 找到 一 些 权重 比较 高 的 网 站 ,当然 人 家 是 不 会 和 你 做 链接 的 。 那么 这 时 候 ， 
我 们 就 找 他 的 友情 链接 中 的 小 网 站 ,看 看 哪些 权重 比较 高 ， 然 后 就 主动 发 信息 给 他 ,这 样 申请 链接 的 
成 功率 是 很 高 的 。 

加 ”在 自己 网 站 的 链接 中 寻找 友情 链接 。 

与 上 面 方法 类 似 , 但 前 提 是 自己 网 站 已 经 建立 了 友情 链接 。 如果 发 现 自己 网 站 有 更 高 PR 的 链接 ， 
那么 就 去 找 这 个 站 长 。 原 因 很 简单 : 高 PR 的 链接 愿意 和 你 的 友 链 的 网 站 做 链接 ， 那 么 你 的 网 站 也 比 | 
较 容易 和 这 个 高 PR 的 网 站 做 上 链接 。 那 么 就 厚 着 脸皮 去 找 这 个 高 PR 的 网 站 做 链接 ， 总 有 一 个 人 会 | 
给 你 做 友情 链接 的 。 

回 ”努力 和 一 个 大 网 站 做 友情 链接 。 

这 应 该 算是 品牌 效应 。 所 谓 的 大 网 站 ， 就 是 类 似 于 门户 网 站 的 链接 ，PR 可 能 不 高 ， 但 这 是 以 后 
做 友情 链接 的 夸 码 。 

例如 ,我 博客 刚刚 独立 的 时 候 做 了 一 个 政府 网 站 的 单 向 链接 ， 其 实 这 是 我 参与 的 一 个 项 目 。 这样 
当 我 在 申请 链接 的 时 候 会 告诉 他 : “ 某 政府 网 站 都 给 我 博客 做 单 向 链接 了 ”。 在 得 到 他 的 证 实 之 后 
就 很 容易 得 到 友情 链接 。 所 以 无 论 用 什么 手段 ， 尽 可 能 地 找 一 个 门户 网 站 做 链接 ， 博 客 做 一 个 门户 频 
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ne 
| 道 链接 就 行 。 
| 
|14.3.3 “友情 链接 资源 


国史 | 网 上 有 太 多 复杂 和 重复 的 寻找 友情 链接 的 方法 ， 但 操作 永远 比 理念 更 重要 。 如 果 要 找到 适合 自己 
| 申请 友情 链接 的 方式 ， 则 需要 练 就 一 副 火 眼 金 金 的 眼睛 ， 并 不 断 去 尝试 。 
7 下面 失 供 一 些 友情 链接 资源 
go9go 友情 链接 平台 : http://www.go9go.cn。 
go9go 友情 链接 初级 3 群 (PRO-PR3 ) 38093333 。 
go9go 友情 链接 中 级 2 群 (PR4-PR5) 92522636。 
go9go 友情 链接 高 级 群 (PR6 以 上 ) 86017541。 
go9go 友情 链接 顶级 群 (PR7 以 上 ) 83687665。 


144 平台 推广 


办 办 办 办 旬 


网 络 推广 离 不 开 网 络 平台 ， 根 据 不 同 平台 种 类 ， 我 们 将 最 常用 的 网 络 推广 方法 分 为 3 类 : 一 类 是 
| 利用 高 权重 平台 进行 网 络 推广 ,一 类 是 利用 高 流量 平台 进行 网 络 推广 ， 另 一 类 是 高 权重 和 高 流量 平台 
综合 推广 。 


14.4.1 利用 高 权重 平台 进行 网 络 推广 


| 高 权重 平台 指 的 是 一 些 高 权重 的 论坛 、 微 博 等 ， 如 天 涯 、 豆 辩 、 优 酷 、 贴 吧 等 。 先 看 一 个 利用 高 
| 权重 平台 进行 网 络 推广 的 例子 。 

| 【示例 1】 在 百度 搜索 “ 古 剑 奇 谭 51”， 如 图 14.1 所 示 。 

! 





9 
Bai 人 百度 十 他 村 语 51 百度 一下 
ES 
痛 适 ， 创 千 你 的 半 
百 里 希 苏 体内 有 一 股神 秘 起 气 舍 贰 敲 列 压 制 ” 信 在 web sm com 





少 要 用 再 玉 全 弟子 ,长生 谷 严 旬 位 
中 品 吗 ? 


次 击 和 疆 : 400-800-8888 
ebaidu com 









直 伸 章 谭 61- 在读 观看 - 未 要 网 
下 09 
兰 到 少 关 的 登 卉 ， 见 到 他 与 县 于 的 过 去 " 
we aps 365 经 典 网 的 文章 











图 14.1 百度 搜索 “ 古 剑 奇 谭 51” 


在 首页 可 以 发 现 365 经 典 网 发 的 文章 ， 感 兴趣 的 读者 可 以 点 开 看 看 别人 的 文章 页 是 怎么 操作 的 。 
【示例 2】 该 示例 是 利用 腾讯 微 博 操作 的 ， 百 度 搜索 “婴儿 车 ”， 如 图 14.2 所 示 。 
| 在 百度 首页 出 现 了 一 个 腾讯 微 博 关 于 婴儿 车 的 介绍 。 
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图 14.2 百度 搜索 “婴儿 车 ” 


通过 这 两 个 例子 , 可 以 发 现 用 户 完全 可 以 利用 高 权重 平台 进行 网 络 推广 ,而且 目前 有 很 多 人 依然 
在 操作 。 利 用 高 权重 平台 进行 网 络 推广 的 优点 如 下 : 

加 ”可 快速 提高 热门 词 的 百度 排名 。 例 如 ， 热 门 电视 剧 、 热 门 事件 等 。 我 们 可 以 创造 出 这 些 热 
门 词 相 关 的 长 尾 词 进 行 网 络 推广 ， 结 合 高 权重 平台 可 以 快速 得 到 很 好 的 排名 。 

加 ”流量 损失 小 。 通 过 高 权重 平台 吸引 的 流量 损失 小 ， 因 为 我 们 是 直接 从 百度 获取 的 流量 。 

利用 高 权重 平台 推广 也 存在 着 一 些 缺点 : 

回 ”运行 周期 长 。 利 用 高 权重 平台 进行 推广 没有 立竿见影 的 效果 ， 需 要 自身 花费 一 些 时 间 和 精 
力 进行 维护 ， 如 做 外 链 ， 定 期 更 新 等 。 

回 ”运营 风险 高 。 可 能 刚刚 把 关键 词 的 排名 做 上 去 ， 就 会 被 删除 ， 前 功 尽 弃 。 


14.4.2 利用 高 流量 平台 进行 网 络 推广 


高 流量 平台 是 指 目的 性 强 、 流 量 大 的 网 络 平台 。 例 如 ， 各 大 门户 网 站 的 博客 、 新 闻 源 、 蘑 菇 街 社 
区 、 美 丽 说 社区 、 热 门 帖子 等 。 

【示例 】 利 用 高 流量 平台 进行 网 络 推广 ， 在 豆瓣 的 一 个 小 组 里 的 一 个 热门 帖子 里 面 做 推广 的 ， 如 
图 14.3 所 示 。 


区 血 入 ”2014-09-22 17-21:15 

| 我 原来 癌 间 多 的 都 不 二 出 门 ， 尝 试 过 各 种 方法 没有 效果 ， 后 来 还 是 靠 一 个 中 医 世家 的 社 全 本 
方才 彻底 去 掉 间 六 的 ， 所 以 真诚 分 享 给 各 位 姐妹 ， 
希望 者 能够 摆脱 辣 癌 的 烦恼 ， 真 想 社 癌 的 加 我 Q 753098912 非 减 力 扰 


图 14.3 ”使 用 豆 辩 小 组 进行 推广 
可 以 看 出 这 个 人 在 这 个 小 组 里 悄悄 地 留 下 了 QQ 号 。 利 用 高 流量 平台 进行 网 络 推广 的 优点 如 下 
回转 化 快 。 因 为 是 利用 高 流量 平台 ， 在 很 短 的 时 间 内 就 会 获得 很 大 的 流量 ， 可 以 帮助 我 们 在 
很 短 的 时 间 内 完成 流量 转化 。 





“SOF 


i 


流量 极其 精准 ， 转 化 率 高 。 高 流量 平台 吸引 过 来 的 流量 几乎 全 部 都 是 精准 流量 。 

利用 高 流量 平台 进行 网 络 推广 也 存在 很 多 缺点 : 

流量 损失 大 。 因 为 利用 别人 的 流量 再 转化 成 自己 的 流量 ， 这 样 一 个 繁琐 的 过 程 必定 要 损失 
全 站 | 很 大 一 部 分 流量 。 

sw 回 “操作 繁琐 ， 消 耗 大 量 人 力 。 这 种 方法 需要 大 范围 的 留 联系 方 式 ， 这 样 效果 才 会 明显 ， 这 个 


yote 过 程 特别 繁 天。 
| 14.4.3 ”利用 高 权重 和 高 流量 平台 综合 推广 
| 这 类 方法 最 常见 的 是 软文 推广 。 


【示例 】 百 度 搜索 “ 老 中 医 祛 疗 怎 么 样 ， 会 不 会 有 副作用 ”， 在 百度 知道 中 可 以 看 到 其 中 有 个 答 
| 复 ， 如 图 14.4 所 示 。 
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图 14.4 百度 搜索 
接着 ， 百 度 “ 洪 琴 雨 5 年 辛酸 祛 疗 史 ”， 如 图 14.5 所 示 。 
[Bale 洪 到 和 5 年 本 社 证 ES aa a 
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让 5 生 二 本 尘 富 中 到 百度 站 到 
上 7 过 0 去 于 5 年 队 社 全 富 关 主 了 了 目 好 其 信守 本 上 村 示 入 和 
1 类 5 科 当 村 旭 人 481 条 叶 二 
SE 10 





| 图 14.5 百度 搜索 
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| 
可 以 看 出 这 是 一 个 典型 的 利用 高 权重 和 高 流量 平台 综合 推广 的 例子 。 先 利用 百度 这 个 高 流量 平 | 
台 ， 然 后 将 流量 转化 到 高 权重 平台 ， 最 终 完成 流量 转化 。 | 
这 种 方法 的 优势 很 多 。 | 
回避 免 在 百度 知道 留 链接 。 在 百度 知道 留 链接 是 很 难 的 ， 这 个 方法 可 以 避免 不 能 留 链接 的 篮 俯 。 | 
回 ”综合 利用 了 两 种 性 质 平台 的 优势 。 | 
但 这 种 方法 的 缺点 也 是 不 容 忽 视 的 。 

回 “ 多重 流量 转化 会 大 大 降低 流量 的 质量 和 精准 度 。 
回 。 需要 耗费 更 多 的 经 历 去 维护 两 种 平台 。 | 
以 上 只 是 从 网 络 平台 的 角度 分 析 了 网 络 上 常见 的 几 类 网 络 推广 的 方法 , 目的 是 为 用 户 指明 一 个 方 | 
向 ， 每 个 人 都 要 根据 自己 的 实际 情况 选择 实际 的 推广 方法 。 


14.4.4 豆 轩 网 推广 


豆 辩 相 比 很 多 网 站 来 说 , 它 有 无 可 比拟 的 品牌 推广 的 优势 。 豆 六 网 的 用 户 不 像 人 人 网 实名 制 那么 | 
拘谨 ， 也 不 像 新 浪 微 博 粉 丝 那 么 没有 条 性 ， 豆 辩 网 是 一 个 以 “兴趣 爱好 ”为 基础 的 社交 平台 。 豆 办 网 | 
在 社交 网 络 中 排名 第 二 ，alexa 中 国 网 站 排名 22， 世 界 排名 108， 足 可 以 看 到 它 汇集 了 多 少 用 户 。 而 | 
像 豆 辩 网 这 种 开放 自由 的 网 络 环境 ， 无 疑 是 网 络 推广 者 最 需要 去 争取 的 地 盘 。 | 

豆 准 拥有 庞大 的 自发 形成 的 小 组 ， 每 天 产生 数 十 万 话题 ， 聚 集 了 各 种 各 样 的 人 群 ， 每 一 个 人 都 能 
轻松 找到 他 喜欢 的 主题 和 一 群 志同道合 的 人 ， 如 图 14.6 所 示 。 














豆瓣 社区 39769 个 小 站 15961 个 独立 音乐 人 1877 个 作者 译 者 1286 家 电影 院 
14.6 豆瓣 社区 


豆 辩 网 主要 客户 群体 是 以 80 后 、90 后 为 主 ， 遍 及 各 个 行业 白领 、 高 校 学 生 、 自 由 职业 者 。 而 这 | 
样 的 一 个 客户 群体 已 经 拥有 很 高 的 购买 力 了 。 所 以 与 艺术 、 健 康 、 娱 乐 、 衣 食 住 行 相关 的 产品 在 豆瓣 
网 推广 ， 都 可 以 获得 很 好 的 效果 。 

在 豆 辩 小 组 发 外 链 是 很 容易 的 ， 也 可 以 获得 良好 排名 。 豆瓣 小 组 就 像 一 个 论坛 ， 只 要 话题 得 当 就 
会 有 人 气 ， 带 来 流量 和 转化 率 。 

从 豆瓣 带 去 流量 和 转化 率 ， 养 活 了 很 多 淘宝 卖家 、 淘 宝 客 、 博 客 主 。 如 图 14.7 所 示 是 关于 “ 淘 
宝 ”的 某 个 小 组 的 外 链 、 话 题 和 活跃 度 的 截图 。 
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649 个 城市 5652 万 居民 26 万 个 兴趣 个 组 | 
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! 
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淘 字 X 

| 
全 部 相关 小 组 : | 
图 片 | 
网 给 若 | 





搜索 “淘宝 ”出 现 的 第 一 个 小 组 
图 14.7 豆瓣 小 组 
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T 页 设计 与 网 站 建设 从 入 门 到 精 


EE 淘宝 好 店 | 微 信 号 : kongbutuan 











创建 于 2008-12-06 。 组 长 : 夏天 的 里 T 怕 
淘宝 买 家 小 组 ， 严 禁 私自 发 广告 ! 


小 组 团购 微 博 (恐怖 团 ): http /weibo comykongbutuan 
微 信号 : kongbutuan 


“对 组 卖家 








【 丽 甘 韩 妆 ] 面 脐 马 油 ， 一 家 值得 信赖 的 护肤 小 店 一 【; 

















【 独 秦 庄 园 ] 简约 知性 美 一 【http-/dou bz/1iaBxp】 

【自在 工作 室 ] 选 一 束 简 约 的 包 包 : 【http ydou bz/1Bufz3] 

商务 合作 QQ-89321000 

【 观 必 团 第 58 期] 卖家 报名 10-31 截 止 ， 地 址 : httpJmengxie. comihread-1205-1-1.html 

小 组 标签 。、 淘宝 。 美容 。 服饰 ”团购 购物 

推荐 
小 组 外 链 

最 近 话 题 / 最 热 话 题 + 发 襄 

话题 作者 回应 。 最 后 回应 

成 里 荐 ] 凡事 可 以 周 钱 的 好 方法 ， 我 们 部 该 试 试 

六 【恐怖 团 ] 运动 裤 + 钱 包 + 手 机 亦 + 风 衣 (11 2 蓓 团 ) 杨桃 1027 1520 
| 语 【 鸡 怖 团 ] 届 笔 + 手 大 + 内 衣 +T 划 (10.31 蕉 团 ) 杨桃 10-25 13.53 
| 人 组 内 声明 : 小 组 内 求 好 店 攻略 ， 如 何 拒绝 卖家 本 机 66 10231255 

全 【 巩 虱 团 ] 卫衣 + 项 柑 + 皮 广 + 寻 宣 (10. 29 葵 团 ) 入 本 1023 1206 

全 【 丽 怖 团 】 Shero 优 品 打 度 小 浦 独家 团 (10.27 堆 团 ) 柄 代 10210945 

六 日 本 再 社 公司 专业 做 发 一 食品 ， 芋 素 ， 卡 乐 比 玫 片 ， 小 su 16 10192033 
| 全 【恐怖 团 ] 纯 需 + 短 芒 + 布 包 + 毛衣 (10.25 蓓 团 ) 1 10-19 12.42 

全 【鸡蛋 团 ] 短 娄 + 手 柑 + 项 檬 + 棉 T(10 23 蕉 团 ) 本 本 1 10182053 

售 【 鸡 性 团 ] 水 光 针 + 国 巾 +T 必 + 四 件 喜 (10 21 蕉 团 ) 杯 杭 1 104161105 

疗 【 丽 怖 团 】 保温 杯 + 裤 裕 + 幅 子 + 单 对 (10.19 考 团 ) 杨 本 10-1311:17 

天 气 这 么 冷 了 ， 又 是 双 十 一 了 ， 还 不 抓紧 固 贷 人 SEE 3 10290949 

靠 详 的 设计 师 在 家 里 承接 网 页 设计 的 笑 瑟 疙 10-29 0947 

原创 、 手 工 , 淘宝 开车 志 1 10290936 

秋冬 季节 补水 要 赴 早 christing 10-29 0928 

实体 青 仓 ! 老板 好 好 的 眼 错 店 不 开 ， 去 擅 房 地 产 ， 说 se 10 10290036 











小 组 活跃 的 话题 
14.7 豆瓣 小 组 〈 续 ) 
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对 于 很 多 网 络 推广 的 朋友 来 说 , 可 能 未 曾 接触 过 豆瓣 网 推广 或 者 仅仅 停留 在 发 帖 推 广 的 阶段 。 这 
些 都 没有 触及 到 在 豆 辩 网 推广 品牌 的 最 有 效 的 手段 。 下 面 将 总 结 笔者 在 豆 辩 网 推广 的 主要 手段 。 
做 好 基本 的 推广 操作 : 加 入 小 组 ， 加 友 邻 。 


在 注册 和 完善 豆瓣 账号 资料 后 ， 最 基础 和 最 重要 的 是 加 入 小 组 和 加 友 邻 。 加 入 那些 和 自己 推广 的 | 
产品 相关 度 高 和 人 气 较 足 的 小 组 ， 以 及 关注 “活跃 度 ” 高 的 豆 友 。 你 的 小 组 和 友 邻 的 基数 越 大 和 质量 ， 


越 好 ， 那 么 以 后 推广 工作 就 进行 得 越 顺 利 。 


一 般 小 组 是 杜绝 明显 的 广告 的 ， 所 以 在 小 组 发 帖 和 回帖 时 ， 尽 可 能 发 与 小 组 相关 话题 和 广告 不 明 | 


显 的 信息 。 
做 好 运营 和 转化 率 的 关键 : 创建 小 组 。 
运营 自己 的 小 组 ， 比 在 别人 的 小 组 里 面 发 帖 有 效 得 多 。 但 在 小 组 运营 的 初期 ， 要 注意 以 下 几 点 。 
小 组 的 主题 定位 不 能 太 细 分 ， 不 然 没 人 气 。 如 果 运 营 一 个 家 具 类 电子 商务 的 网 站 ， 那 么 不 
妨 以 “家 居 生 活 ” 为 主题 。 
前 期 小 组 的 介绍 页 面 要 亲切 和 有 煽动 性 。 
前 期 1000 个 用 户 ， 需 要 主动 去 邀请 ， 以 及 措 建 起 小 组 管理 团队 。 


如 上 面 关于 “淘宝 ”的 小 组 的 截图 ， 就 是 一 个 运营 比较 成 熟 的 小 组 。 小 组 介绍 页 中 就 可 以 加 外 链 | 


引流 量 ， 卖 广告 位 等 。 

超 强 的 曝光 度 : 策划 线 上 活动 和 同城 活动 。 

豆 准 网 的 同城 活动 和 线 上 活动 模式 一 直 做 得 很 成 功 。 它 不 仅 有 很 高 的 关注 度 和 参与 度 , 更 有 一 大 
批 媒体 人 采集 同城 活动 信息 。 所 以 在 豆瓣 上 的 活动 在 网 络 上 的 转载 率 很 高 ， 而 且 传统 媒体 也 会 偶尔 采 
集 相 关 同 城 活动 。 笔 者 举办 的 豆瓣 同城 活动 就 曾 两 次 登 上 平面 媒体 。 

创建 活动 的 同时 ， 也 要 去 小 组 推广 活动 ， 和 邀请 “ 友 邻 ”为 活动 前 期 积累 人 气 ， 如 图 14.8 所 示 。 


唐宁 新 文化 生活 馆 ， 国 内 外 各 大 名 校 就 读 分 享 嘉宾 征集 
时 间 ; 01 月 05 日 周 四 19:30-21:30 

地 点 ， 天 河 区 地 铁 五 号 线 谭 村 站 A 出 口 华 府 衡 11 号 金吉 华 许 
类 型 ， 生 活 诛 会 

主办 方 。 唐宁 新 文化 往 活 馆 加 
29 人 参加 】 172 人 局 兴趣 




















图 14.8 推广 活动 


随心 所 欲 打造 品牌 : 创建 小 站 。 
如 果 预 备 经 营 一 个 品牌 形象 ， 那 么 不 要 忘 了 创建 一 个 小 站 。 如 果 说 小 组 是 论坛 ， 那 么 小 站 就 是 主 


题 网 站 。 在 这 个 小 站 里 ， 可 以 随心 所 欲 地 发 布 相 关 产品 、 促 销 、 新 闻 等 。 如 图 14.9 所 示 是 小 站 相关 | 


功能 的 截图 。 

如 果 想 推广 一 个 公司 、 产 品 或 者 简单 一 个 话题 ， 都 可 以 利用 小 站 来 建立 自己 的 根据 地 ， 而 且 这 个 
小 站 的 名 称 也 将 会 获得 良好 的 排名 。 如 图 14.10 所 示 是 小 站 截图 。 

豆瓣 看 起 来 简单 ,其实 它 的 用 户 扩展 和 黏合 度 很 高 。 如 果 网 络 推广 者 能 花 点 时 间 经 营 豆 辩 的 推广 ， 
将 会 有 很 大 的 收获 。 在 豆瓣 ， 最 合适 的 是 全 方位 的 品牌 推广 ， 让 产品 拥有 自己 的 小 组 、 小 站 、 活 动 ， 
加 大 品牌 的 曝光 度 和 凝聚 力 。 


"511。 
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图 14.10 小 站 排名 


14.5 ” 自 媒 体 推广 
自 媒体 概念 的 产生 确实 让 很 多 人 思想 顿悟， 可 以 让 自己 成 为 一 个 明星 ， 拥 有 自己 的 粉丝 ， 与 粉丝 
分 享 自己 的 思想 。 当 然 ， 很 多 人 都 想 成 为 明星 ， 但 是 又 有 多 少 人 真正 成 了 一 个 明星 。 
14.5.1 ”打造 成 功 的 自 媒体 
| 在 美国 ， 有 一 个 八 九 岁 的 小 孩 ， 年 收入 竟然 达 百 万 美金 。 这 个 孩子 利用 视频 的 形式 ， 给 同龄 孩子 


“122 
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介绍 玩具 或 者 游戏 机 之 类 。 他 爸爸 负责 拍摄 视频 , 小 家 伙 负 责 给 同龄 孩子 演示 如 果 玩 这 个 玩具 或 者 游 
戏 机 ， 点 评 好 不 好 玩 之 类 的 。 


然后 他 爸爸 将 该 视频 上 传 到 Youtube。 因 为 形式 新 颖 ， 每 期 视频 都 有 百 万 观众 观看 ， 每 年 光 是 玩 | 


具 厂 商 广告 费 就 高 达 130 万 美金 。 现 在 流行 试 吃 员 、 试 睡 员 、 电 影 试 片 员 、 旅 游 体验 师 等 ， 这 个 孩子 | 


不 就 是 试 玩 员 吗 。 
仔细 分 析 会 发 现 ， 这 个 小 孩 的 成 功 模式 其 实 就 是 自 媒体 时 代 的 产物 。 





他 和 他 的 爸爸 通过 运营 Youtube 这 个 自 媒体 ， 将 其 打造 成 为 儿童 玩具 界 的 自明 星 ， 成 明星 了 , 在 | 
该 领域 中 ， 自 然 就 会 拥有 自己 的 影响 力 、 号 召 力 ， 所 以 获得 玩具 厂商 的 广告 费 、 赞 助 费 之 类 的 是 非常 | 


自然 而 然 的 事情 。 

很 多 读者 都 会 觉得 自 媒体 、 自 明星 对 于 自己 来 说 太 遥 远 了 。 其 实 不 然 ， 即 使 你 是 传统 意义 上 的 草 
根 、 属 丝 ， 没 有 财力 和 物力 ， 但 是 这 并 不 会 影响 你 通过 自 媒体 成 为 自明 星 。 

现在 ， 各 种 各 样 的 网 络 平台 ， 让 几乎 每 一 个 人 都 成 为 了 自 媒 体 。 我 们 都 可 以 通过 QQ、 微 信 、 微 
博 、 视 频 等 方式 ， 来 影响 我 们 生活 圈子 里 的 人 。 因 此 ， 每 一 个 人 都 有 同样 的 机 会 ， 利 用 自 媒体 平台 去 
鼻 利 和 推广 。 

正如 上 面 案例 当中 的 小 男孩 和 他 的 爸爸 ,他 们 其 实 就 是 普通 人 , 但 是 他 们 通过 打造 自己 的 自 媒体 
平台 ， 同 样 成 为 了 自明 星 。 下 面 介 绍 如 何 利用 自 媒体 实现 自我 推广 。 

1. 清楚 自己 的 目标 群体 

在 做 自 媒体 之 前 ， 也 要 清楚 自己 的 目标 群体 是 谁 。 

例如 ， 上 面 介绍 的 美国 能 孩子 ， 他 的 目标 群体 就 是 与 自己 年 龄 相仿 的 小 孩 们 和 孩子 家 长 。 

红 极 一 时 的 绿豆 专家 张 悟 本 ， 他 的 目标 群体 就 是 那些 希望 身体 健康 ， 热 衷 于 养生 的 中 老年 人 。 

美食 扎 稿 人 文 怡 ， 她 的 目标 群体 就 是 对 于 美食 制作 有 兴趣 的 人 以 及 全 职 太 太 。 

新 女 学 创始 人 苏 苓 ， 她 的 目标 群体 是 国内 20~45 岁 的 女性 群体 。 

2， 清楚 目标 群体 需要 什么 

在 网 络 营销 中 ,经常 提 到 一 个 专业 术语 : 痛 点 。 什 么 是 痛 点 ?就 是 一 个 群体 存在 什么 问题 。 有 这 
个 痛 点 ， 我 们 可 以 推断 出 ， 目 标 群体 需要 什么 。 

案例 当中 ， 和 他 年 龄 相仿 的 小 孩 们 和 他 们 的 家 长 ， 是 目标 群体 ， 他 们 的 痛 点 是 什么 ? 

他 们 存在 的 问题 就 是 ， 市场 上 的 玩具 非常 得 多 ， 形形色色， 各 种 各 样 ， 而 且 都 没有 提供 试 玩 的 机 
会 。 你 很 难 知道 ， 哪 个 玩具 好 玩 ， 哪 个 玩具 真正 地 适合 自己 的 小 孩 ， 这 种 玩具 怎么 玩 等 。 

所 以 这 些 都 是 该 目标 群体 的 痛 点 。 

有 了 这 些 痛 点 ， 我 们 就 很 容易 知道 他 们 需要 的 是 什么 了 。 

他 们 需要 一 个 途径 ， 向 他 们 详细 地 介绍 哪个 玩具 好 ， 这 些 玩具 都 应 该 如 何 去 玩 ， 通 过 这 样 的 介绍 
和 心得 ， 他 们 可 以 由 此 作出 准确 的 判断 ， 既 选择 适合 自家 小 孩 喜 欢 的 玩具 ， 又 能 够 不 浪费 财力 物力 。 

3. 清楚 自己 扮演 什么 角色 

清楚 自己 的 目标 群体 ， 以 及 他 们 的 痛 点 ， 那 么 自己 能 够 给 目标 群体 做 些 什么 ? 

在 互联 网 中 ， 已 经 兴起 了 很 多 这 种 “点 评 式 ”的 平台 ， 如 大 众 点 评 网 等 。 上 面 提 及 的 试 吃 员 、 试 
睡 员 、 电 影 试 片 员 、 旅 游 体验 师 等 ， 其 实 都 是 这 个 领域 催生 下 的 新 兴 职 业 。 

为 什么 会 出 现 这 样 的 平台 和 职业 呢 ? 

因为 ， 越 来 越 多 的 人 有 不 同 的 消费 需求 ， 但 是 在 消费 之 前 ， 他 们 都 需要 一 个 先驱 者 ， 提 供给 他 们 
可 观 、 实 在 的 意见 ， 这 样 有 助 于 他 们 选择 。 其 实 也 反映 了 人 们 的 从 众 心理 。 
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而 这 个 也 恰恰 决定 了 两 个 非常 关键 的 因素 。 

回 ”角色 定位 。 你 要 成 为 目标 群体 眼中 的 “先驱 者 ”。 说 白 了 ， 一 个 产品 好 不 好 ， 一 个 方法 好 
不 好 ， 这 个 玩具 好 不 好 玩 ， 这 个 面膜 好 不 好 用 ， 这 个 馆子 里 的 菜 好 不 好 吃 ， 空 口 无 赁 ， 你 
要 真正 去 做 了 ， 去 体验 了 ， 你 说 的 话 ， 才 有 说 服 力 。 

回 能够 给 目标 群体 些 什么 ? 当然 要 给 目标 群体 需要 的 。 目 标 群体 需要 的 就 是 “先驱 者 ”给 的 
“可 观 ， 实 在 ”的 意见 。 

例如 ， 要 去 操作 护肤 美白 领域 ， 那 么 就 要 选择 一 个 美白 产品 ， 自 己 或 是 找 人 使 用 后 ， 通 过 照片 、 


| 视频 等 证 明 你 是 “先驱 者 ”， 并 且 给 出 使 用 后 的 心得 和 意见 。 这 个 就 是 目标 群体 所 真正 需要 的 。 只 要 


给 他 们 这 些 ， 才 能 被 你 吸引 ， 持 续 关 注 ， 最 终 成 为 粉丝 。 


痊 提示 : 做 自 媒体 的 核心 是 “你 帮助 的 人 越 多 ， 你 得 到 的 就 越 多 ”。 

对 自己 有 一 个 准确 的 定位 ,知道 自己 想 做 什么 ,能 做 什么 ,在 清楚 自己 的 情况 下 再 来 决定 
做 什么 方面 的 自 媒体 。 例如， 对 于 我 来 说 ,由 于 自己 擅长 数据 库 营 销 ， 并 且 认识 到 数据 库 
营销 思维 可 以 帮助 更 多 的 商家 企业 赚钱 ,提升 他 们 业务 的 转化 率 , 可 以 避免 同 行 竞争 等 多 
个 好 处 ,对 他 们 的 业务 会 有 很 大 的 帮助 ， 于 是 我 给 自己 的 定位 就 是 做 数据 库 营 销 ， 把 数据 
库 营 销 思维 以 及 方法 传播 出 去 ， 帮 助 更 多 的 人 。 
做 自 媒 体 的 核心 是 提供 价值 
这 个 理由 很 简单 ， 那 就 是 给 粉丝 不 断 地 提供 价值 。 因 为 在 给 粉丝 提供 价值 的 时 候 ， 帮 助 他 
们 解决 了 不 少 问题 ， 于 是 粉丝 对 你 心 存 感激 ， 就 会 信赖 你 ， 从 而 成 为 忠实 粉丝 ， 他 们 就 会 
经 常 回访 ， 关 注 你 。 

4 选择 适合 的 自 媒体 平台 以 及 工具 

首先 ， 根 据 定位 的 领域 来 选择 使 用 哪 种 形式 呈现 ， 如 文字 、 图 片 、 音 频 或 者 视频 。 视 频 的 展示 性 


最 好 ， 当 然 ， 与 文字 、 图 片 结合 在 一 起 ， 效 果 最 佳 。 
自 媒体 平台 有 很 多 ， 可 以 利用 QQ 空间 、 博 客 、 微 博 、 微 信 。 当 然 ， 也 可 以 直接 建立 一 个 个 人 网 


| 站 ， 作 为 自己 的 自 媒体 平台 。 


在 上 面 案例 中 男孩 爸爸 将 视频 制作 后 ， 上 传 到 了 Youtube。 众 所 周知 ， 那 是 世界 上 最 大 的 视频 网 
站 ， 流 量 可 想 而 知 。 

同样 ， 国 内 也 有 不 错 的 视频 网 站 ， 如 土豆 、 优 酷 、 网 易 公 开课 、 腾 讯 课 堂 ， 审 核 并 不 是 很 严格 ， 
而 且 都 很 支持 原创 视频 ， 流 量 也 很 大 ， 是 不 错 的 推广 平台 。 

例如 ， 文 怡 刚 开始 也 是 名 不 见 经 传 ， 只 是 在 博客 当中 发 表 自己 的 美食 制作 的 心得 、 攻 略 。 她 的 博 
客 就 是 她 的 自 媒体 。 慢 慢 坚持 下 来 ， 她 现在 已 经 成 为 了 自明 星 ， 主 持 节目 ， 出 书 ， 办 培训 班 ， 代 理 各 
种 毫 饪 用 品 等 。 

















5. 推广 自 媒体 平台 

如 何 更 加 有 效 地 推广 ， 不 外 乎 两 种 方法 ， 一 是 借助 高 权重 平台 ， 二 是 借 力 该 领域 的 名 人 明星 。 高 
权重 平台 如 下 。 

回 ”博客 : 新 浪 博客 、 搜 狐 博 客 、 天 涯 博客 、 网 易 博客 。 

回 ” 微 博 : 新 浪 微 博 、 腾 讯 微 博 。 腾 讯 微 博 的 收录 和 排名 要 优 于 新 浪 微 博 。 

回 ”论坛 : 天 涯 、 豆 辩 、 百 度 贴吧 、 猫 扑 、 西 祠 胡同 。 

回 ”垂直 网 站 : 去 相关 的 垂直 网 站 ， 如 果 选 择 领域 是 母 婴 系列 ， 那 就 是 母 竖 方面 的 垂直 网 站 。 
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加 “视频 网 站 : 优酷 、 土 豆 、 第 56 步 ， 腾 讯 、 网 易 等 视频 网 站 。 
回 “问答 平台 : 知 乎 、 百 度 知道 、 搜 狗 问 问 、360 问答 。 


把 提供 给 目标 群体 需要 的 客观 、 实 在 的 意见 录制 成 视频 也 好 ， 或 写成 文字 ， 选 好 关键 词 ， 放 到 这 | 


些 平台 即 可 。 


定期 更 新 ， 现 在 不 同 领域 的 名 人 明星 几乎 都 有 微 博 微 信 ， 加 他 们 的 微 博 ， 私 信 他 们 ， 态 度 诚 野 、 | 


谦虚 。 
6， 自 媒体 如 何 虱 利 
自 媒体 春 利 模式 包括 以 下 两 个 方面 。 
回 ” 挂 广告 : 出售 广告 是 大 部 分 人 选择 的 赚钱 模式 ， 这 个 模式 适合 那些 流量 大 的 、 不 容易 产品 
化 ， 服 务 化 的 自 媒体 。 
现在 很 多 朋友 做 自 媒体 都 会 盲目 地 选择 挂 广告 , 但 是 只 有 几 百 个 他, 挂 广告 是 不 赚钱 的 ， 如 果 改 
变 下 思维 方式 ， 用 那 几 百 个 他 来 卖 暴利 产品 ， 利 润 会 很 惊人 。 
回 ” 卖 产品 或 者 服务 : 这 个 赚钱 模式 是 比较 稳定 的 模式 ， 因 为 这 个 模式 可 以 赚 大 钱 ， 如 果 做 得 
好 赚钱 的 速度 也 会 超出 想象 。 





其 实 自 媒体 也 就 是 一 个 打造 精准 数据 库 的 一 个 过 程 ， 自 媒体 也 就 是 一 个 建立 信任 的 媒介 ,让 大 家 | 
认识 你 、 信 任 你 ， 再 对 你 的 精准 数据 库 做 营销 ， 他 们 购买 你 的 产品 会 是 一 个 顺理成章 的 过 程 。 通 过 卖 | 


产品 来 做 自 媒体 ， 小 流量 也 可 以 赚 大 钱 。 对 于 产品 这 块 ， 可 以 有 很 多 , 可 以 找 人 合作 、 可 以 找 人 定制 、 
自己 也 可 以 是 产品 或 者 服务 。 

以 个 人 经 验 ， 在 刚 开始 做 自 媒体 时 ， 不 要 想 太 多 芥 利 的 事情 ,很 多 人 都 会 提前 制订 出 方案 , 但 是 
实践 的 时 候 才 发 现 ， 根 本 不 是 自己 想 的 那么 一 回 事 。 所 以 ， 爽 性 就 先 将 剧 利 的 事情 忘记 。 因 为 当 自 媒 
体 逐 渐 稳定 后 ， 真 正 适合 你 的 盈利 途径 会 自然 而 然 地 产生 。 到 时 候 ， 会 有 大 小 广告 商 主动 找 你 ， 和 你 
谈 合作 的 。 当 然 ， 你 也 可 以 自己 包装 产品 ， 自 己 销售 。 

例如 ， 文 怡 导 购 的 一 款 言 师 机 ， 六 分 钟 就 狂 销 了 四 百 多 万 。 这 足以 说 明 ， 当 自 媒体 运营 稳定 的 时 
候 ， 芥 利 是 一 件 自然 而 成 的 事 。 


14.5.2 ” 自 媒体 平台 推荐 


自 媒体 平台 类 似 于 新 浪 博 客 ,注册 就 可 以 开设 博客 等 ,而 自 媒体 平台 也 是 ， 所 有 巨头 都 在 自家 后 
院 搭建 了 免费 平台 供 网 民 自 由 使 用 。 下 面 设计 国内 比较 好 的 自 媒体 平台 。 

加 ” 微 信 公 众 平台 

微 信 载体 是 微 信 手 机 客户 端 ， 海 量 用 户 ， 营 销 效果 好 ， 它 的 公众 平台 是 目前 最 热 的。 

地 址 : https://mp.weixin.qq.com。 

回 ” 米 聊 订 阅 发 布 平台 

VIP 账号 订阅 发 布 平台 ， 目 前 米 聊 注册 用 户 27000 万 ，VIP 账号 采取 邀请 制 。 

地 址 : http://vip.miliao.com/。 

回 ”搜狐 新 闻 自 媒体 平台 

据说 搜狐 新 闻 客 户 端 安装 量 第 一 ， 它 的 自 媒体 平台 也 很 给 力 ， 后 台 很 简洁 ， 发 布 很 方便 ， 笔 者 在 
该 平台 发 布 文章 ， 几 乎 是 秒 过 。 流 量 的 话 还 行 ， 个 别 文章 会 有 上 干 的 阅读 量 。 

地 址 : http://mp.k.sohu.com/server/openquicklogin.jsp。 

回 网易 新 闻 媒 体 开 放 平 台 

网 易 新 闻 手 机 客户 端 是 一 款 不 错 的 APP。 


= 二 个 * 


~ 砚 南 设 计 与 网 站 建设 从 入 门 到 精通 


| 地 址 : http://open.m.163.com/。 
| 网 易 云 阅读 开放 平台 
| 推荐 这 个 平台 ， 云 阅读 采取 的 是 抓 取 网 站 RSS 源 ， 这 样 站 长 省 去 了 更 新 内 容 的 烦恼 。 注 册 过 程 
| 也 简单 ， 但 没有 任何 推荐 的 情况 下 ， 流 量 也 很 少 。 
YY 地 址 : http://open.yuedu.163.com/。 
Note | 回 ”360 自 媒体 平台 
从 360 导入 流量 很 多 ， 建 议 使 用 。 
地 址 : http://wemedia.so.com/。 
回 ”百度 百 家 自 媒体 平台 
百度 联盟 的 广告 全 部 分 给 自 媒体 人 ， 申 请 较 难 。 申 请 方式 Baijia@baidu.com。 
地 址 : http://baijia.baidu.com/。 
今日 头条 媒体 平台 
| 文章 人 工 审核 ， 发 布 速度 比较 慢 ， 但 是 数据 特别 亮 眼 ， 往 往 一 些 趣味 性 的 文章 可 以 达到 60 万 的 
| 阅读 量 ， 上 千 的 收藏 量 。 
| 地 址 : http://mp.toutiao.com/。 
| 加 ” 微 淘 公 众 平台 
很 早 进入 微 淘 的 都 能 得 到 官方 推荐 ， 很 适合 淘宝 卖家 、 淘 宝 客 注册 使 用 。 用 淘宝 ID 登录 后 台 ， 
这 个 信息 流 的 账号 运营 者 将 来 自 淘宝 商家 、 媒 体 机 构 ， 或 来 自 某 个 消费 领域 的 意见 领袖 等 。 
地 址 : http://we.taobao.com/。 
新 浪 微 博 粉 丝 服 务 平台 
| 新 浪 旗下 公众 账号 ， 单 击 【 我 的 主页 】| 【管理 】 即 可 找到 该 功能 ， 仅 限 +V 用 户 。 信 息 都 是 以 私 
| 信 的 形式 发 送 。 信 息 达到 率 较 高。 
| 地 址 : http://weibo.com。 
| 易 信 公众 平台 
| 这 里 主要 是 营销 人 太 多 ， 真 正 用 户 较 少 。 网 易 与 中 国电 信 推 出 的 “ 易 信 ”， 除 了 具备 微 信 的 大 多 
| 数 功能 之 外 ， 易 信 与 微 信 最 大 的 区 别 : 可 通过 易 信 给 用 户 发 送 手机 短信 。 
| 地 址 : https:/plus.yixin.inylogin。 
| 回 飞信 公众 平台 
| 其 优势 是 能 以 短信 形式 推送 到 手机 上 ， 中 国 移动 推出 的 公众 平台 ， 认 证 非常 麻烦 ， 还 要 填 表 格 、 
提交 营业 执照 、 加 盖 公 章 等 。 
地 址 : http://gz.feixin.10086.cn/。 
另外 ， 一 些 视 频 为 主 的 站 也 有 自 媒 体 平台 ， 如 优酷 士 豆 、 微 视 ， 这 里 就 不 做 介绍 了 。 








14.6 软文 推广 


软文 无 疑 是 网 络 推广 的 必 备 利器 , 它 对 于 网 站 或 者 品牌 推广 的 重要 性 是 有 目 共 睹 的 ,软文 营销 是 
| 成 本 最 低 、 效 果 最 好 的 营销 方式 。 但 并 不 是 每 个 网 络 推广 员 或 者 站 长 都 要 充当 文艺 青年 ， 写 得 一 手 好 
| 的 文章 ,也 并 不 是 所 有 人 都 可 以 把 软文 发 布 到 知名 网 站 上 去 , 软文 发 布 到 大 型 门户 网 站 和 新 闻 媒 体 可 
| 以 为 品牌 推广 带 来 很 好 的 效果 。 下 面 简 单 介绍 软文 推广 技巧 。 
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14.6.1 软文 写作 技巧 


软文 写作 是 站 长 必 会 的 一 项 技能 ,利用 软文 能 够 减轻 许多 负担 , 特别 是 在 现在 站 长 界 如 此 激烈 竞 | 


争 的 环境 下 ， 许 多 人 都 在 做 SEO 优化 ， 但 是 拼 的 除了 技术 之 外 就 是 资源 了 ， 谁 的 资源 更 多 ， 谁 就 能 | 


够 更 快 地 发 展 ， 而 软文 写作 一 直 是 站 长 的 苦恼 之 处 ， 毕 竟 写 作 是 一 门 很 深 的 学 问 ， 需 要 积累 ， 需 要 文 
笔 。 本 节 不 详细 说 明 软 文 写作 技巧 ， 仅 结合 案例 有 针对 性 地 进行 具体 说 明 。 

Chinaz (站 长 之 家 ) 和 Admin5〔 站 长 网 ) 是 国内 两 大 知名 站 长 类 网 站 ， 每 天 有 数 以 万 计 的 站 长 
访问 ,向 Chinaz 和 Admins 投稿 已 成 为 站 长 作为 软文 推广 渠道 必 选 之 地 .我 也 经 常 向 这 两 个 网 站 投稿 ， 
有 的 通过 ， 有 的 没 通过 。 

对 于 大 部 分 站 长 来 说 , 没 通过 审核 的 除了 文章 质量 不 高 之 外 ，, 另 一 个 重要 原因 是 和 该 站 的 整体 内 
容 取 向 不 符 ， 下 面 就 以 Chinaz 和 Admin5 为 例 通过 一 些 数 据 和 分 析 来 说 明 两 者 之 间 的 内 容 取 向 。 

Alexa 流量 对 比 

如 图 14.11 所 示 , 可 以 看 到 Chinaz 要 高 于 Admin5, 这 主要 与 两 家 的 用 户 群 有 关 ， Admin5 大 多 为 
草根 站 长 ，Chinaz 不 仅 有 站 长 ， 还 有 IT 从 业 人 员 、 设 计 师 、 程 序 员 ， 很 多 用 户 都 会 到 Chinaz 下 载 素 
材 和 源码 。 





者 日 用 户 量 (百分比 ) admin5 com 的 用 户 占 全 球 互联 网 用 户 
admin5.com ine om 的 百分比 : 


医 晶 029% 
1 最 近 七 天 平均 ”0272% 
最 近 一 月 平均 026% 
05 最 近 三 月 平均 0.2587% 
最 近 三 月 改变 里 37% 仿 


四 证 
Mena [se] 
Be nine co @ 


14.11 Alexa 流量 对 比 





流量 分 布 与 业务 对 比 
Chinaz 和 Admins 的 子 域名 分 布 如 图 14.12 所 示 。 
[JAdmin5.com 的 用 户 分 布 于 这 些 子 域名 : ”Chinaz.com 的 用 户 分 布 于 这 些 子 域名 : 


62.54% 国 bbs admin5 com 21.69% tool.chinaz com 

24.62% 0 admin5 com 1423% seo chinaz com 
8.25% 下 down_admin5 .com 1273% 厦 chinaz com 
125% tuan admin5 com 1149% alexa chinaz com 
1.00% eadmin5 com 1125% bbs chinaz com 
0.56% union admin5 com 6.83% down _chinaz com 
0.45% idc_ admin5 com 456% 量 Prchinaz com 
0.23% 2011.admin5 com 384% 1 link chinaz com 
021% seo.admin5.com 2.45% whois chinaz com 
0.20% sc.admin5 com 232% mytool chinaz com 
0.18% tool.admin5 com 178% sc chinaz com 
0.10% zadmin5.com 1.52% jy.chinaz com 
0.07% zjadmin5 com 1.50% my.chinaz com 
0.06% px admin5 com 0.87% font chinaz com 


图 14.12 流量 分 布 与 业务 对 比 
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~ 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


| 从 Alexa 统计 上 来 看 ，Admin5 有 62.54% 的 流量 都 产生 于 Admins 论坛 ， 而 且 24.62% 的 用 户 都 会 
| 阅读 Admins 的 文章 。 
| 而 Chinaz 则 不 同 了 ， 大 部 分 站 长 去 Chinaz 为 的 是 用 “站 长 工具 ”， 如 图 14.12 所 示 ， 在 抓 取 的 
全/ | 前 10 个 子 域名 中 ， 有 7 个 都 是 和 站 长 工具 相关 ， 两 家 网 站 的 业务 范围 一 下 就 能 明了 。 
Ye 回 “从 口号 看 内 容 取向 
Note | Chinaz 的 口号 是 “我 们 致力 于 为 中 文 网 站 提供 动力 !”，Admins 的 口号 是 “站 长 必 上 的 网 站 -站 
| 长 信息 和 服务 中 心 ”。 
从 口号 上 来 看 ， 反 映 出 两 者 之 间 的 业务 取向 ，Chinaz 的 主 营业 务 为 网 站 数据 分 析 、 源 码 下 载 和 软 
文 推广 ， 反 映 出 Chinaz 确实 能 为 网 站 提供 动力 ， 尤 其 是 站 长 工具 。 
而 Admin5 主 营业 务 为 站 长 交易 、IDC 托管 和 软文 推广 ， 所 以 论坛 占 了 大 部 分 流量 ， 凡 是 站 长 能 
过 到 的 问题 在 Admin5 基本 都 能 找到 解决 办 法 。 
回 ”导航 栏目 分 析 
Chinaz 和 Admins 的 导航 栏 对 比 图 如 图 14.13 所 示 。 





图 14.13 导航 栏目 分 析 


从 导航 栏 上 的 栏目 分 类 来 看 ，Chinaz 的 主打 栏目 为 IT 资讯 、 站 长 相关 、 移 动 互联 、 设 计 、 程 序 
方面 的 ， 几 乎 囊括 了 站 长 关注 的 所 有 信息 ， 也 包括 未 来 普通 草根 、IT 人 走向 创业 者 的 资讯 。 

Admin5 的 主打 栏目 为 站 长 新 闻 、SEO、 教 程 、 推 广 网 赚 等 站 长 在 做 站 的 方方面面 问题 ， 能 实际 
解决 大 多 数 新 站 长 的 SEO 问题， 当然 Admins 的 重点 在 于 论坛 的 站 长 交易 。 

回 ”用 户 投稿 分 析 

Admin5 的 文章 大 都 是 用 户 投稿 上 来 的 ， 但 审核 严格 ， 而 Chinaz 的 内 容 大 多 来 自 互联 网 上 ， 也 有 
部 分 用 户 投稿 ， 审 核 较 松 ， 容 易 通过 。 

Chinaz 不 仅 接 受 投稿 ， 还 会 主动 转载 ， 如 果 投稿 没 通过 会 提示 用 户 这 篇 文章 未 通过 。 

而 Admin5 大 部 分 都 是 用 户 投稿 , 而 用 户 投 的 大 部 分 是 关于 SEO 方面 的 文章 , 站 长 不 投 , Admin5 
不 发 ， 很 少 转载 〈 新 闻 除 外 ) ， 如 果 投 稿 没 通过 ， 便 会 删除 。 

从 两 家 网 站 首页 内 容 上 来 看 (首页 内 容 最 能 反映 一 个 网 站 的 特色 ) ，Admin5 大 部 分 文章 是 以 通 
俗 易 懂 的 文字 进行 ,干货 、SEO、 推 广 方面 的 内 容 较 多 ， 而 ChinaZ 内 容 比较 高 端 ， 适 合 创 业者 、IT 
| 从 业者 阅读 。 有 什么 样 的 内 容 就 会 有 什么 样 的 用 户 。 

【拓展 】Admin5 每 天 接受 投稿 300~400, 通过 只 有 100, 其 中 200 多 篇 会 被 退 稿 。 稿子 审核 时 间 : 
一 天 3 次 ， 上 午 9:00 一 12:00， 下 午 13.30 一 17:00， 晚 上 20.30 一 23:00。 

栏目 页 每 天 只 更 新 3 次 ， 由 于 织 梦 系 统 更 新 比较 慢 ， 数 据 有 几 十 万 ， 所 有 上 午 、 下 午 更 新 。 投 稿 
的 文章 中 ， 有 200 多 篇 SEO 的 文章 ， 内 容重 复 度 非常 高 。 

为 了 方便 用 户 投稿 ， 下 面 介绍 Admin5 发 稿 要 注意 的 问题 。 

加 ”文章 和 新 闻 中 不 能 含有 外 部 链接 和 超 链 接 。 

回 ”与 站 长 相关 或 者 与 互联 网 密切 相关 。 

加 ”标题 力求 简短 、 醒 目 、 新 颖 、 吸 引 人 ， 杜 绝 标 题 党 ， 标 题 尽量 不 少 于 9 个 汉字 ， 不 多 于 22 

个 汉字 。 
| 回 “文章 新 闻 应 避免 用 “今天 ”“ 上 昨天 ”， 应 改 成 具体 日 期 。 
| 回 ”统一 用 中 文 标点 符号 ， 英 文 的 不 要 用 ， 除 非 是 英文 或 者 数字 间 可 以 用 ， 标 题 不 要 用 叹 号 和 
| 逗号 、 问 号 、 顿 号 、 破 折 号 ， 括 号 可 以 用 ; 还 有 文章 中 禁止 表情 符号 。 
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回 ”文章 至 少 在 500 字 以 上 ,文章 有 配 图 更 好 ， 图 片 控制 在 620px 以 内 。 
哪些 稿子 不 会 被 通过 ? 





加 ”文章 网 址 不 符合 国家 规定 ， 链 接地 址 是 私服 、 赌 博 、 发 票 等 国家 不 容许 的 网 址 ， 即 使 写 得 | 


再 好 也 会 退 稿 ， 接 软文 的 时 候 最 好 也 不 要 接 这 样 的 网 址 。 
回 与、 互联 网 、 站 长 不 相关 的 稿子 。 


加 “文章 可 读 性 不 高 ， 编 辑 最 多 的 退 稿 原 因 ， 每 天 有 100 多 篇 稿子 因为 这 个 因素 ， 要 么 是 SEO 


文章 特别 多 ， 要 么 就 是 老生 常 谈 ， 要 么 就 是 纯 理 论 的 东西 。 用 户 看 到 这 篇 文章 要 深 受 启发 ， 
抱 着 与 大 家 分 享 的 精神 来 写 文章 ， 这 样 的 效果 才 明 显 。 

回 ”SEO 类 的 文章 要 与 案例 分 析 来 写 ， 如 分 析 美 乐 乐 家 具 网 的 网 站 ， 百 度 搜索 带 来 的 流量 30 万 
JP， 那 么 就 分 析 这 个 网 站 优化 做 得 好 的 原因 。 

回 ”每 天 有 200 多 篇 投稿 SEO 的 文章 。 用 心 写 ， 把 自己 擅长 的 东西 写 出 来 ， 别 人 肯定 会 给 比较 
好 的 评价 ， 而 且 软文 的 转载 效果 就 很 好 。 


容 提示: 把 SEO 优化 的 内 容 细 分 化 。 如 网 站 要 用 标签 ， 标 签 对 网 站 优化 的 作用 ， 优 化 中 很 细 的 东 
西 写 出 来 。 只 要 把 一 种 推广 方式 写 得 非常 详细 ， 这 种 软文 就 非常 成 功 了 ， 不 要 写 大 而 全 的 
软文 ， 如 网 站 推广 的 99 种 方法 等 ， 网 友 看 了 之 后 一 种 方法 都 不 实用 。 在 软文 写 出 来 ， 别 
人 可 以 按照 文中 思路 去 操作 。 
抄袭 别人 的 稿子 ， 把 别人 的 稿子 换 成 自己 的 链接 ， 然 后 投稿 。 随 便 拿 文章 在 Google 和 百 
度 搜索 ， 如 果 搜 出 来 的 话 ， 就 会 直接 删除 。 


回 ” 伪 原创 ， 先 根据 搜索 引擎 搜索 ， 再 根据 编辑 的 经 验 判断 是 否 是 伪 原 创 的 文章 。 

怎么 写 软文 ? 

很 多 站 长 朋友 喜欢 写 流水 账 , 这 种 文章 只 是 个 人 日 记 , 但 要 把 一 些 经 历 的 闪光 点 、 得 失 点 写 出 来 ， 
这 样 才能 对 站 长 有 所 帮助 、 受 到 什么 启发 。 在 写 文章 之 后 就 要 考虑 这 个 事情 。 

建议 一 篇 文章 只 写 一 个 核心 点 。 如 “标题 怎么 优化 ”， 把 标题 怎么 优化 上 去 的 写 出 来 ， 就 是 非常 
好 的 一 篇 内 容 。 每 个 文章 最 好 只 有 一 个 观点 。 

转载 的 文章 ， 如 互联 网 新 闻 ， 会 直接 取消 链接 。 如 果 想 到 网 址 ， 建 议 写 “ 快 评 ”， 一些 名 博 经 常 
写 新 闻 评论 型 文章 , 但 许多 站 长 写 得 非常 少 。 如 团购 网 站 倒闭 ， 那 么 你 对 团购 行业 的 看 法 ， 它 们 未 来 
的 出 路 ,团购 真 的 是 无 药 可 救 了 吗 。 写 上 自己 的 观点 。 这 样 的 文章 是 非常 有 价值 的 ， 这 对 于 团购 行业 
从 业 人 员 ， 或 即将 从 业 的 人 有 很 大 的 帮助 。 

越 是 权重 大 、 知名度 高 的 网 站 ， 即 使 不 带 链接 ， 只 带 个 网 址 , 带 来 的 权重 也 是 非常 高 的 。 比 论坛 、 
博客 权重 带 来 的 效果 还 高 。 

如 何 获得 写作 灵感 ? 

文章 要 想 写 得 好 ， 素 材 要 积累 ， 每 天 要 看 互联 网 新 闻 、 增 加 自己 的 阅历 和 知识 度 ， 如 百度 新 闻 、 





新 浪 科技 、 搜狐 , 还 可 以 去 国外 的 站 长 网 站 挖掘 点 数据 过 来 , 去 Admin5 发 很 好 通过 的 ,国外 没有 “站 | 


长 ”这 个 叫 法 ， 都 是 一 些 公 司 运 作 。 

很 多 人 也 不 是 天 生 写 稿子 写 得 那么 多 ， 都 是 练 出 来 的 ， 如 坚持 一 个 月 写 3~5 篇 ， 坚 持 半年 以 上 。 
再 加 上 每 天 阅读 的 互联 网 新 闻 ， 这 样 在 写 一 篇 文章 时 就 能 融入 自己 的 观点 。 写 文章 要 越 挫 越 勇 ， 现 在 
付出 得 越 多 ， 虽 然 暂 时 看 不 到 回报 ， 但 付出 到 一 定 程度 ， 就 一 定 会 得 到 回报 ， 就 像 网 站 权重 一 样 。 


14.6.2 ”软文 提交 技巧 
软文 推广 和 提交 网 址 的 相关 文章 同样 是 千篇一律 ， 其 实 方法 都 是 大 同 小 异 。 说 实话 ,我 并 没有 通 
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~ 避 贡 设计 与 网 站 建设 从 入 门 到 精通 
过 在 各 大 网 站 发 布 软文 获得 什么 流量 ， 唯 一 能 看 到 的 是 “ 卢 松 松 ”这 几 个 字 在 百度 和 Google 中 的 相 
关 网 页 在 逐渐 增多 而 已 。 不 过 我 相信 尽管 起 到 立竿见影 的 效果 ， 但 长 期 的 积累 ， 卢 松 松 这 3 个 字 会 在 
| 站 长 中 形成 一 定 的 印象 
后 中 | 1， 选 准 发 布 渠 道 
| 要 做 到 软文 内 容 与 发 布 的 网 站 内 容 一 致 ,因为 只 有 这 样 才 能 受到 更 多 的 关注 。 关 注 的 人 越 多 软文 

Note | 起 到 的 推广 作用 才 会 更 加 明显 ， 同 时 转载 的 几率 也 会 更 大 。 
| 例如 ， 站 长 、 网 站 技术 类 文章 就 可 以 发 布 到 中 国 站 长 站 、 站 长 网 、 建 站 中 国 等 网 站 上 面 。 一 般 我 
在 这 几 个 平台 发 布 完 文章 之 后 , 就 会 立刻 把 自己 的 文章 加 入 网 站 目录 , 如 乐 收 网 络 收藏 夹 、 新 浪 微 博 、 
feerbook、 奇 客 等 网 址 分 享 网 站 上 面 。 

2. 不 要 马上 把 文章 发 布 到 其 他 网 站 

一 般 我 们 写 的 文章 都 会 发 布 到 自己 的 网 站 上 ,一 定 要 等 到 文章 被 收录 以 后 再 开始 外 发 ,因为 引擎 
在 判断 文章 的 原创 归属 时 首先 根据 的 是 权重 。 一 个 网 站 权重 高 收录 的 快 ， 可 能 发 布 出 去 半 小 时 就 收录 
了 ,而 自己 网 站 上 的 文章 可 能 几 天 也 收录 不 了 。 那 么 搜索 引擎 就 会 认为 文章 源 是 其 他 网 站 上 面 的 ， 自 
己 网 站 上 就 成 为 转载 抄 歼 了。 所 以 如 果 文章 还 没有 被 收录 ， 请 不 要 把 文章 发 布 出 去 。 

3. 文章 标题 要 足够 吸引 人 的 眼球 

例如 ， 在 发 布 “网 站 推广 的 方法 和 手段 ”这 篇 文章 时 ， 把 标题 改 为 “博客 半年 排名 上 升 10000% 
的 推广 经 验 ”。 尽 管 很 夸张 ， 但 却 在 Admin5 中 有 上 千 的 点 击 率 。 同样 的 内 容 ， 换 做 两 个 不 同 的 标题 ， 
在 站 长 站 和 Admin5 中 ,文章 的 点 击 率 悬 殊 就 很 大 。 标 题 是 吸引 网 民 点 击 浏览 自己 文章 的 敲门砖 。 

4. 文章 的 内 容 一 定 要 有 特点 

文章 要 有 主题 ， 不 能 让 网 友 觉得 文章 不 知 所 云 。 内 容 要 有 价值 ， 网 友 看 完 认为 这 篇 文章 很 值得 阅 
读 和 学 习 ， 让 他 感受 到 你 的 观点 和 知识 。 另 外 在 文章 中 适当 地 加 入 图 片 或 者 权威 数据 说 明 ， 这 样 的 效 
果 更 直观 、 更 具有 说 服 力 。 

5， 放弃 首 页 ， 多 给 文章 页 增加 收藏 

在 建立 博客 初期 ， 我 一 般 在 网 址 分 享 站 提交 首页 ， 但 发 现 没什么 效果 ， 不 实用 。 而 且 稍微 大 一 点 
的 网 址 导航 站 不 会 收录 自己 的 博客 。 所 以 我 就 放弃 了 提交 网 站 首页 的 想法 , 大量 地 在 feerbook、 奇 客 、 
冬瓜 、 糖 果 、 火 免 、 雅 蛙 等 分 享 站 提交 内 容 页 ， 并 且 把 一 部 分 文章 的 标题 改 得 很 具 煽动 性 。 


14.6.3 软文 提交 网 站 资源 


火 免 《 咬 咕 网 ) 
http://huotu.com 

新 浪 微 博 
http://t.sina.com.cn 

回 “ 豆 办 
http://www.douban.com.。 
回 5G 
http://www.S5gme.com 
| 奇 客 

| http://www.diglog.com 
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feerbook 

http://feerbook.com 

奇 客 网 

http://www.hi-chic.com/ 

回 冬瓜 

http://www.dongua.com 

名” 雅 蛙 

http://www.yaawa.com 

乐 收 网 络 收藏 夹 

http://leshou.com 

好 谍 网 

http://www.haoei.com/ 

以 上 网 站 能 给 个 人 网 站 带 来 上 千 的 日 下, 但 软文 的 推广 是 需要 大 量 此 类 网 站 做 铺垫 的 , 如 果 感 兴 
趣 ， 可 以 在 Google 中 搜索 此 类 网 站 ， 并 在 每 个 网 站 中 发 布 出 去 ， 假 以 时 日 就 会 发 现 ， 尽 管 每 个 网 站 
能 带 来 的 流量 很 少 很 少 ， 但 是 坚持 下 去 就 会 有 效果 。 


14.6.4 软文 代 发 技巧 


普通 用 户 都 能 发 布 软文 的 地 方 就 是 网 站 论坛 ， 如 果 自 己 没 时 间 发 布 ， 最 关键 的 是 自己 没有 渠道 去 
发 布 ， 可 以 花 很 低 的 价格 去 猪八戒 任务 平台 找 人 群发 ， 让 别人 帮 代 发 ， 用 户 需要 提供 让 人 发 布 的 网 站 
和 论坛 。 但 这 些 任务 平台 上 的 个 人 很 难 发 布 到 新 闻 媒 体 网 站 。 

1.， 软文 发 布地 方 

找 人 代 发 ， 首 先 要 考虑 发 布 软文 的 位 置 。 很 多 网 站 ， 从 没 听 过 也 没有 见 过 ， 权 重 也 不 高 ， 根 本 没 
人 看 得 到 ， 这 样 虽然 是 发 布 了 ， 但 是 效果 却 不 好 。 

一 般 情 况 下 ， 如 果 一 篇 好 的 文章 一 旦 被 大 点 的 门户 新 闻 网 站 发 布 了 ， 其 他 网 站 会 互相 转载 发 布 ， 
这 种 传播 效果 可 想 而 知 ， 根 本 不 需要 去 一 个 个 地 发 布 ， 所 以 最 重要 的 是 要 看 文章 发 布 的 网 站 ， 而 不 只 
是 看 发 布 的 数量 。 

软文 街 (http:/www.ruanwen.la/) 包含 1000 多 家 媒体 网 站 资源 ， 包 括 搜狐 、 腾 讯 、 新 浪 、 人 民 网 
等 知名 媒体 网 站 ， 能 发 布 到 这 些 知 名 媒体 网 站 ， 效 果 就 非常 好 ， 如 图 14.14 所 示 。 





14.14 软文 街 


2. 软文 发 布 的 速度 及 稳定 性 
软文 发 布 成 功 ， 当 然 希望 最 快 被 搜索 引擎 收录 ， 不 然 发 了 也 没什么 用 ， 很 多 时 候 ， 公 司 要 进行 一 
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有 大 贡 设计 与 网 站 建设 从 入 门 到 精通 
个 活动 宣传 或 者 新 品 发 布 ,或 者 需要 发 布 一 个 公司 新 闻 . 但 是 , 迟 退 几 天 发 布 不 出 去 ， 新 闻 都 变 旧闻 ， 
活动 时 间 都 快 到 了 ， 还 没有 发 布 ， 这 样 对 推广 宣传 没有 什么 作用 。 因 此 ， 在 选择 软文 发 布 时 ,往往 要 
考虑 发 布 的 时 间 以 及 成 功 性 ， 确 保 能 够 及 时 发 布 成 功 。 

稳定 性 就 是 要 求 软文 发 布 后 ， 不 会 被 聘 除 ， 而 且 要 能 保证 得 到 搜索 引擎 的 收录 ， 这样 对 自己 的 网 


| 站 或 者 自己 的 品牌 推广 才能 发 挥 效果 ， 发 布 到 流量 大 的 网 站 是 为 了 让 更 多 人 看 到 。 


发 布 后 能 被 长 期 稳定 的 收录 就 是 为 了 增加 自身 网 站 的 权重 , 把 这 些 流 量 引 到 自己 的 网 站 上 或 者 让 
更 多 的 人 关注 到 自己 的 品牌 ， 所 以 在 选择 软文 发 布 时 ， 一 定 要 选择 正规 的 软文 发 布 公司 ， 速 度 和 稳定 


| 性 缺 一 不 可 。 


3.， 软文 发 布 的 可 持续 性 和 便捷 性 

可 持续 性 简单 地 说 就 是 ， 今 天 发 布 了 一 篇 ， 明 天 还 想 发 ， 要 能 够 及 时 快速 地 发 布 ， 不 需要 再 去 谈 
论 太 多 的 问题 ， 也 就 是 说 白 了 ， 自 助 式 发 布 ， 不 需要 再 去 找 人 ， 谈 价格 之 类 的 繁琐 事情 。 

软文 发 布 也 是 追求 长 久 合 作 的 ， 如 果 效 果 好 ， 大 家 也 不 愿意 频繁 地 更 换 平 台 来 发 布 ， 这 样 可 以 节 
省 时 间 和 成 本 。 

便捷 性 要 求 只 要 有 文章 就 可 以 自己 去 发 ， 拥 有 自己 的 会 员 操 作 中 心 ， 想 发 去 哪里 可 以 自己 选择 ， 
不 同 的 文章 发 在 不 同 的 地 方 自己 也 拥有 完全 的 自主 权 。 像 软文 街 平台 拥有 自己 的 会 员 中 心 , 在 后 台 发 
布 文章 也 很 简单 。 

在 软文 街 大 体 经 过 这 几 个 步骤 : 第 一 步 ， 注 册 账 号 ， 充 值 款项 ;第 二 步 ， 填 写 标题 、 内 容 ， 选 择 
发 布 媒体 ;第 三 步 ， 等 待 发 布 成 功 ， 显 示 回 链 。 

很 简单 的 三 步 操作 就 可 以 发 布 软文 了 ， 而 且 注 册 开 户 也 很 简单 ， 支 持 网 银 、 支 付 宝 、 财 付 通 等 在 
线 充值 。 

4. 软文 发 布 综合 服务 

综合 服务 就 是 除了 软文 代 发 ， 另 外 提供 的 服务 ,包括 软文 代 写 、 软 文 收录 保证 等 其 他 与 软文 相关 
的 服务 。 如 果 没 有 足够 的 时 间 去 写 软文 ， 或 者 对 软文 写作 不 是 很 精通 ， 这 些 就 很 重要 。 

这 时 候 可 以 把 软文 代 写 也 包 出 去 了 ， 另 外 去 找 很 麻烦 的 ， 很 多 代 写 的 又 不 代 发 ， 有 的 可 以 代 发 ， 


| 但 是 不 提供 代 写 。 所 以 就 要 选择 能 够 提供 完善 的 配套 服务 的 机 构 来 进行 软文 代 写 和 代 发 ， 当 初 我 选择 


软文 街 来 进行 软文 代 发 ， 其 实 最 主要 的 一 点 是 发 布 渠道 多 和 后 期 保障 完善 ， 因 为 软文 街 和 1000 多 家 
网 站 媒体 合作 , 一 篇 文章 可 以 发 布 到 千 余 家 网 站 上 , 成 功率 也 高 , 收录 也 不 错 , 还 能 上 百度 新 闻 展示 
对 品牌 推广 效果 相当 不 错 。 软 文 街 针 对 核心 企业 客户 还 推出 软文 策划 、 收 录 查 询 、 效 果 跟 踪 、 删 稿 补 
发 、 定 时 发 布 等 服务 。 

像 这 样 简单 方便 快捷 的 一 站 式 软文 代 写 、 代 发 ， 能 为 我 们 省 去 很 多 时 间 和 费用 ， 只 需要 简单 的 几 
步 就 能 实现 自助 发 稿 ， 不 用 花费 很 多 时 间 一 个 个 的 网 站 去 发 布 ， 时 间 、 人 力 、 成 本 费用 可 控 ， 效 果 可 
以 及 时 跟踪 ， 定 向 发 布 ， 精 准 展现 。 

当然 ,不止 是 软文 街 ,现在 很 多 个 人 和 公司 都 有 这 块 业务 ， 建 议 大 家 可 以 试 一 试 每 个 平台 ， 最 终 


| 选择 一 家 适合 自己 的 即 可 。 


147 微 推 广 


微 推广 就 是 利用 社交 工具 ， 如 微 信 或 微 博 等 ， 做 特定 营销 ， 初 期 很 多 人 都 是 通过 频繁 在 朋友 圈 发 
布 硬 广告 来 做 ， 也 有 一 部 分 人 领略 到 微 推广 的 本 质 ， 利 用 它 的 社交 属性 来 做 营销 : 先 交 友 ， 后 推广 ， 


。522 。 
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自然 先 打造 个 人 品牌 ， 树 立信 任 ， 树 立 圈子 影响 力 ， 产 品 自然 好 做 。 这 其 中 技巧 需要 掌握 ， 用 文字 、 
图 片 巧妙 地 展现 自己 和 产品 ， 将 广告 做 得 有 趣 ， 将 数量 发 布控 制 得 当 ， 将 群 聊 做 得 合理 ， 将 准 客户 能 
挖掘 到 手 。 了 解 自己 ， 了 解 产 品 ， 了 解 客户 ， 了 解 平台 属性 。 


14.7.1 微 博 推广 


现在 微 博 很 火 ， 做 网 站 推广 的 人 都 会 试探 性 地 在 新 浪 微 博 中 做 推广 。 下 面 介绍 如 何在 新 浪 微 博 推 | 


广 个 人 网 站 。 

【操作 步骤】 

第 1 步 ， 做 好 新 浪 微 博 推广 的 前 期 工作 。 

用 户 需要 注册 一 个 账号 进行 推广 ， 可 以 把 主题 、 头 像 、 名 字 设 置 成 和 网 站 一 致 。 做 好 这 些 基 本 工 
作 后 ， 新 浪 微 博 在 关联 博客 中 填写 个 人 网 站 的 网 址 ， 这 样 通过 RSS 抓 取 ， 你 的 博客 更 新 一 篇 博文 的 
话 ， 在 新 浪 微 博 中 就 会 自动 增加 一 条 微 博 。 

第 2 步 ， 只 有 关注 别人 ， 别 人 才能 成 为 你 的 粉丝 。 

新 浪 微 博 的 推广 手法 和 新 浪 博客 是 同一 种 营销 模式 , 那 就 是 利用 名 人 效应 可 你 在 这 里 不 是 名 人 ， 
没 人 知道 你 。 用 户 唯一 能 做 的 就 是 广泛 关注 与 个 人 兴趣 相关 的 人 。 只 要 别人 关注 你 了 ， 你 发 布 的 每 一 
条 消息 才能 在 别人 微 博 中 出 现 ， 尽 管 点 击 率 不 是 很 高 。 

第 3 步 ， 在 我 做 新 浪 微 博 的 初期 ， 通 过 新 浪 微 博导 入 的 人 P 流量 挺 多 ， 但 越 往 后 就 越 少 。 因 为 本 
人 对 新 浪 微 博 关 注 少 。 后 来 发 现 有 好 几 个 网 友 是 从 新 浪 微 博 来 的 ， 于 是 进一步 激发 了 我 对 新 浪 微 博 推 
广 的 兴趣 。 下 面 是 个 人 在 实践 中 总 结 的 几 点 比较 有 效 的 推广 方法 。 

方法 1: 在 新 浪 微 博 里 评论 。 

偶然 有 一 天 突然 发 现 从 新 浪 微 博 来 了 好 多 人 , 后 来 发 现 原来 我 在 微 博 里 帮 一 些 人 解答 过 关于 网 站 
技术 的 问题 , 我 觉得 它 比 问答 网 站 更 具 时 效 性 ， 尽 管 你 帮助 了 别人 没有 得 到 积分 但 他 们 会 把 你 和 你 
的 网 址 加 入 收藏 夹 、 记 在 心里 。 当 然 如 果 你 对 网 站 方面 技术 不 太 了 解 ， 可 以 聊 聊 其 他 话题 。 可 以 肯定 
的 是 ， 闲 聊 的 网 站 推广 效果 肯定 不 行 。 

方法 2: 巧 用 热门 话题 。 

众所周知 ,新 浪 微 博 的 热门 话题 这 个 功能 类 似 于 热门 标签 ,我们 要 做 的 就 是 不 断 地 发 表 包含 这 些 
标签 的 内 容 , 然 后 在 内 容 的 最 后 加 入 个 人 网 站 的 网 址 ， 这 样 新 浪 微 博 的 用 户 在 搜索 这 些 词 时 ， 就 会 看 
到 我 们 的 微 博 内 容 。 而 且 ， 这 些 热门 词汇 也 是 我 们 的 博客 做 热门 关键 词 的 一 个 风向 标 。 

方法 3: 在 新 浪 微 博 狂 友 乱 炸 。 

此 方法 是 我 广泛 用 的 厚 脸皮 推广 方法 ， 是 沿用 我 在 QQ 群 的 第 二 点 推广 方式 。 在 新 浪 微 博 狂 万 乱 
炸 ， 其 实 本 人 也 不 想 用 这 个 厚 脸皮 式 的 推广 方法 ， 但 由 于 工作 关系 ， 个 人 时 间 并 不 多 ， 这 方法 不 得 已 
才 用 的 。 

微 博客 的 网 站 有 很 多 ， 几 乎 每 个 微 博客 类 的 网 站 我 都 使 用 过 ,但 个 人 感觉 新 浪 微 博 是 做 网 站 推广 
效率 最 好 的 平台 。 原 因 如 下 : 

回 ”新浪 微 博 访问 速度 快 。 

回 “ 无 须 输 入 验证 码 。 

加 “不 弹出 新 窗口 ， 实 时 刷新 网 页 。 

回 ”更 具 时 效 性 。 


14.7.2 ”使 用 微 信 公 众 平台 
据 媒体 报道 微 信用 户 数 已 经 突破 6 亿 ， 微 信 已 经 成 为 重要 营销 渠道 ， 很 多 企业 都 开通 了 微 信 和 号， 
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但 是 99% 微 信号 都 没有 专人 负责 运营 。 为 了 帮助 更 多 人 可 以 理解 企业 微 信 公 众 平台 怎么 有 效 运营 , 下 
面 介绍 一 些 实战 经 验 。 
加 ”区 别 订阅 号 和 服务 号 
会 内 | 企业 订阅 号 可 以 每 天 发 一 条 信息 ， 服 务 号 只 能 一 个 月 发 一 条 信息 ， 对 于 一 般 小 企业 来 讲 ， 用 服务 
~ 号 一 般 不 现实 ， 因 为 一 个 月 才 发 一 次 信息 ， 客 户 可 能 早 就 忘记 了 ， 当 然 也 要 看 具体 需求 ， 因 为 服务 号 
Note | 提供 的 功能 比 订阅 号 更 强大 ， 如 服务 号 可 以 申请 自 定义 菜单 。 
| 回 “” 微 信 对 企业 的 帮助 
微 信 营 销 本 质 是 互动 ， 传 递 价值 ， 维 护 老 客户 ， 影 响 新 客户 ， 很 多 企业 把 微 信 当 成 宣传 工具 ， 每 
天 广告 准时 发 送 ， 这 样 微 信号 是 没有 生命 力 的 。 
回 “ 利 用 好 信息 中 的 “阅读 原文 ” 
这 个 很 容易 忽略 掉 细节 ， 大 家 都 知道 微 信 信息 中 没有 办 法 放 超 链接 ， 只 有 在 “阅读 原文 ”上 可 以 
放 超 链接 ， 通 过 “阅读 原文 ”可 以 给 企业 手机 网 站 增加 客户 ， 也 可 以 链接 以 前 发 送 的 微 信 信 息 。 
回 “” 微 信 公 众 平台 设置 关键 词 自动 回复 
把 每 次 发 送 的 文章 都 设 上 对 应 关键 词 ， 如 输入 “1000”， 查 阅 《企业 微 信 公众 平台 订阅 号 运营 十 
个 秘 决 》， 输 入 “my” 查 看 文章 目录 ， 除 了 刚才 日 常设 置 ， 还 可 以 在 “实时 消息 ”看 到 客户 的 提问 ， 
把 一 些 问题 整理 起 来 ， 通 过 关键 词 设置 ， 为 客户 推送 答案 ， 节 约 客服 沟通 时 间 。 
回 “” 微 信 二 次 开发 
想 通过 微 信 给 客户 提供 更 多 便利 功能 ， 只 能 通过 二 次 开发 来 实现 ， 如 客户 查询 产品 信息 ， 或 是 和 
客户 CRM 系统 对 应 ， 提 醒 客户 等 。 
建议 微 信 和 企业 手机 网 站 相 结合 ， 如 回复 关键 词 “ 公 司 介绍 ”， 在 接口 中 实现 把 手机 版 关于 公司 
介绍 发 送 到 微 信 当中 。 
加 ”每 次 推送 微 信 时 不 要 超过 3 条 图 文 消息 
如 果 推送 的 信息 过 多 ， 就 会 没有 重点 ， 如 果 重 点 要 告诉 客户 一 件 事 ， 建 议 只 发 一 条 信息 。 切 记 信 
息 中 图 片 不 能 过 多 ，3 张 以 内 比较 合适 ， 图 片 大 小 要 控制 在 50KB 以 下 ， 图 文 信息 打开 速度 影响 用 户 
阅读 率 。 
微 信 营销 关键 在 内 容 的 质量 。 高 质量 的 内 容 会 得 到 众多 人 的 分 享 ， 会 形成 病毒 营销 。 
加 ” 微 信 互 动 是 关键 
掉 粉 是 经 常会 有 的 事情 ,我 们 要 做 的 是 尽 可 能 满足 客户 需求 ， 如 通过 微 信 可 以 查询 产品 价格 ,可 
以 申报 产品 故障 ， 像 中 信和 银行 微 信 ， 每 次 消费 、 还 款 都 会 有 提醒 ， 如 果 条 件 允 许 ， 一 定 要 提供 专职 负 
责 微 信 客 服 。 
明确 每 一 次 沟通 、 互 动 、 推 送 的 对 象 是 谁 ， 读 者 对 这 个 人 越 了 解 ， 信 任 度 就 越 高 ， 包 括 他 的 公司 
职位 、 姓 名 、 联 系 方式 。 
回 “” 让 客户 主动 加 微 信 
| 要 想 在 很 短 时 间 里 获取 大 量 的 粉丝 ， 必 须 靠 媒体 。 如 公司 官方 网 站 、 微 博 _QQ 空间 、 个 人 名 片 、 
| 公司 宣传 手册 、 杂 志 等 ， 要 动用 一 切 渠道 来 宣传 ， 这 样 每 天 才能 获得 稳定 的 粉丝 增长 量 。 
不 要 忘记 员工 个 人 微 信 的 力量 ,如 果 一 个 员工 朋友 圈 中 有 100 个 客户 , 那么 100 个 员工 累积 起 来 
就 有 10000 个 客户 微 信 ， 员 工 参 与 分 享 企 业 微 信 是 成 功 推广 的 捷径 。 
加 ”模仿 是 学 习 微 信 运 营 最 快 的 一 招 
| 推荐 几 个 不 错 微 信 公共 账号 : 淘宝 鬼 脚 七 、 金 错 刀 、 澳 康 达 名 车 广场 ， 在 “添加 朋友 ”中 查找 公 
| 众 号 ， 就 可 以 找到 他 们 。 
| 关注 竞争 对 手 的 微 信 ， 如 果 关 注 了 50 个 竞争 对 手 的 微 信 , 就 会 有 50 个 账号 在 教 你 怎样 做 好 微 信 
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营销 。 用 户 要 做 的 就 是 优化 他 们 所 有 的 方法 。 记 住 : 竞争 对 手 是 最 好 的 老师 。 
回 “ 善 用 微 信 中 “数据 统计 ” 
很 多 运营 问题 都 可 以 通过 数据 分 析 了 解 和 到， 如 发 布 的 内 容 客户 喜欢 吗 ? 


通过 数据 统计 ， 可 以 清晰 地 了 解 到 粉丝 量 ， 每 天 新 关注 人 数 、 掉 粉 数量 通过 “用 户 属性 ”看 到 | 


订阅 用 户 性 别 、 省 份 ; 通过 “图 文 分 析 ” 了 解 每 次 信息 推送 情况 ， 如 送 达 人 数 ， 图 文 页 阅读 人 数 ， 原 
文 页 阅读 人 数 ， 分 享 转发 人 数 。 

加 “分 组 管理 客户 

群发 图 文 图 片 时 ， 可 以 针对 性 别 、 地 区 、 客 户 组 别 ， 如果 客户 有 会 员 等 级 之 分 ,可 以 按 等 级 分 组 ， 
因为 并 不 是 所 有 客户 品味 都 一 样 ， 如 关注 奔驰 的 客户 ， 喜 欢 内 容 可 能 和 奥迪 客户 不 一 样 。 

如 果 有 100 个 精准 粉丝 ， 用 户 可 以 提供 有 价值 的 内 容 ， 一 个 月 拥有 10000 个 粉丝 不 是 梦想 。 


14.7.3 挖掘 精准 微 信 用 户 


现在 的 行情 ， 如 果 想 要 得 到 一 个 精准 微 信 用 户 ,成 本 价 大 致 在 一 元 钱 左右 一 位 ， 可 想 而 知 精准 微 
信用 户 的 价值 是 多 么 大 。 对 于 没有 太 多 钱 投入 的 初级 用 户 来 说 ， 我 们 该 如 何 找到 这 些 目标 用 户 。 





很 多 用 户 使 用 漂流 瓶 、 摇 一 摇 、LBS 地 理 位 置 等 方式 进行 寻找 ， 效 果 不 是 很 好 ， 下 面 介绍 另 一 种 | 


有 效 方式 。 

很 多 微 信 用 户 把 自己 的 QQ 与 微 信 进行 绑 定 ,这样 方便 在 手机 上 输入 纯 数字 , 会 比 纯 英文 或 英文 
和 数字 混合 用 更 容易 操作 。 实 际 上 我 们 可 以 通过 这 个 细节 挖 到 精准 微 信用 户 。 

大 家 都 知道 做 微 信 营 销 ， 不 知道 对 方 账户 ， 一 切 都 变 得 无 从 下 手 ， 因 为 没有 他 们 的 微 信号 ， 就 没 
办 法 和 他 成 为 朋友 ， 不 能 成 为 朋友 ， 就 无 从 谈 起 微 信 营 销 。 

但 是 现在 微 信和 QQ 号 绑 定 了 ， 那 这 个 问题 就 很 好 地 解决 了 ， 下 面 讲解 怎么 通过 QQ 号 与 微 信 绑 
定 找 出 精准 用 户 。 

第 1 步 ， 找 到 自己 经 营 行业 里 的 大 牛 ， 如 服装 行业 ， 直 接 访问 他 的 QQ 空间 ， 如 果 是 行业 大 牛 
QQ 空间 一 般 会 开放 。 如 果 把 QQ 空间 设置 权限 ， 那 98% 判 断 错 了 ， 他 不 是 真正 的 大 牛 。 

第 2 步 , 直接 打开 大 牛 QQ 空间 的 日 志 列表 , 从 他 写 的 第 一 篇 日 志 开 始 浏览 , 直到 最 后 一 篇 日 志 ， 
关注 所 有 日 志 下 面 的 好 友 评论 ， 加 他 们 QQ 为 好 友 ， 如 图 14.15 所 示 。 
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图 14.15 加 为 QQ 好友 
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这 一 步 会 遇 到 的 问题 : 

回 ”加 好 友 ， 需 要 验证 。 如 果 问题 是 :如 我 叫 什么 名 字 ， 请 直接 放弃 。 

回 一 次 性 点 加 入 ， 不 能 在 10 分 钟 内 超过 20 个 左右 好 友 ， 如 果 超过 了 ， 腾 讯 会 要 求 输入 验 
全/ | 证 码 。 
~ ”| 回 输入 验证 码 后 ， 再 加 到 20 个 左右 好 友 ， 腾 讯 会 直接 拒绝 加 好 友 。 

Note | 第 3 步 ， 记 录 好 刚 加 用 户 的 QQ 号 ， 打 开 自己 的 微 信 ， 直 接 进入 “添加 朋友 ”界面 ， 输 入 加 为 好 

| 友 的 QQ， 直 接 申请 加 为 好 友 。 

这 步 会 遇 到 的 问题 

名 ”此 好 友 没有 开通 微 信 ， 则 先 加 他 为 好 友 ， 等 他 有 微 信 了 再 说 。 

回 ”此 QQ 号 没 绑 定 微 信号 ， 建 议 暂时 放弃 。 

名 “注意 微 信 加 好 友 频 繁 也 会 在 一 段 时 间 内 被 禁 ， 直 接 提示 “查找 失败 ”。 

第 4 步 ， 搜 索 行业 关键 词 群 ， 尽 可 能 多 地 申请 入 群 ， 如 图 14.16 所 示 。 
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图 14.16 查找 QQ 群 
第 5 步 ， 如 果 有 的 群 加 不 了 ， 但 开放 了 对 游客 进入 ， 就 可 以 按 逐 个 查看 QQ， 直 接 加 好 友 。 
当然 , 加 QQ 和 微 信 好 友 , 每 次 都 会 有 限制 , 但 这 并 不 影响 真正 想 做 事情 的 人 。 真正 想 成 功 的 人 ， 


唯一 能 做 的 就 是 遇 到 问题 ， 直 接 解决 掉 。 我 在 这 里 只 提供 一 个 思路 : 腾讯 可 以 禁 掉 我 们 批量 加 好 友 ， 
但 禁 不 掉 我 们 用 万 能 的 淘宝 。 


14.7.4 微 营销 技巧 


| 1. 个 人 品牌 培养 

| 既然 能 和 你 成 为 朋友 ,能 够 加 入 你 的 朋友 圈 ， 肯 定 是 认可 你 这 个 人 , 或 者 是 想 和 你 成 为 朋友 。 不管 

| 是 认识 的 ， 还 是 不 认识 的 。 所 以 要 别人 知道 你 是 怎么 的 一 个 人 ， 知 道 微 信 背 后 的 是 一 个 活生生 的 人 。 
做 营销 ， 首 先 要 把 自己 推销 出 去 。 所 以 你 的 微 信 不 仅 只 发 产品 的 宣传 内 容 ， 还 要 把 个 人 生活 、 生 

活 感悟 、 其 他 分 享 ， 让 人 家 知道 这 个 微 信 后 面 的 是 一 个 怎么 样 的 人 。 分 享 的 东西 必须 是 正面 的 、 积 极 

| 的 、 正 能 量 的 ， 塑 造 你 的 个 人 品牌 。 
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各 方 | 
2. 情感 培养 | 
大 家 知道 了 你 是 一 个 怎么 样 的 人 ,对 你 产生 了 好 感 ,这 个 适合 你 就 可 以 很 好 地 利用 人 家 对 你 的 好 | 
印象 ， 进 行 一 些 产品 的 推销 ， 要 慢 慢 地 ， 循 序 渐进 ， 不 要 一 天 发 很 多 产品 的 宣传 ， 这 样 很 容易 让 人 家 | 
反感 。 | 
3， 学 会 分 享 
当 朋友 购买 你 的 产品 之 后 ， 要 第 一 时 间 分 享 出 去 ， 让 人 家 看 到 原来 有 这 么 多 人 购买 ， 并 且 还 有 一 | 
个 不 错 的 购物 体验 ,购买 后 和 收 到 货 后 都 要 分 享 出 去 。 分 享 的 时 候 一 定 要 把 订单 信息 、 对 话 内 容 截图 | 
放 上 去 ， 显 得 更 真实 ， 这 是 一 个 刺激 其 他 朋友 购买 的 有 效 方式 。 如 某 个 朋友 帮 你 买 了 ， 你 分 享 了 , 而 | 
另 一 个 朋友 和 你 ， 还 有 这 个 购买 的 都 是 朋友 ， 他 看 到 后 ， 觉 得 应 该 要 支持 一 下 你 。 | 
4、， 互 动 策略 | 
在 朋友 圈 里 , 要 让 朋友 圈 好 友 知道 你 的 存在 , 如 好 友 发 了 一 些 不 错 的 内 容 或 者 信息 , 要 给 予 评论 ，| 
如 果 不 知道 评论 什么 至 少 也 要 点 一 个 赞 。 如 果 经 常 与 好 友 互动 ， 自 然 会 产生 好 感 ， 这 个 是 非常 重要 的 | 
一 个 行为 。 | 
如 果 总 是 没入 参加 互动 ， 会 显得 冷清 ， 这 时 可 以 装着 有 人 评论 ， 自 己 留 几 条 评论 。 例 如 ,就算 一 | 
条 回复 也 没有 ， 也 可 以 如 此 回复 : 感谢 大 家 这 么 热情 的 支持 ， 泪 流 满面 啊 ! 这 样 别 人 以 为 真 的 有 很 多 | 
回复 ， 看 见 会 觉得 很 热闹 。 | 
朋友 圈 发 布 的 文字 内 容 ， 多 留 问号 ， 互 动 自然 增加 。 没 事 的 时 候 ， 给 朋友 点 个 赞 。 点 赞 多 了 ,大 | 
| 
! 





家 就 熟悉 了 ， 互 动 起 来 会 很 自然 。 
5 营销 策略 | 
根据 不 同 的 朋友 进行 营销 。 一 般 是 比较 好 的 朋友 以 开玩笑 的 方式 进行 营销 ， 这 个 一 定 要 掌握 好 一 

个 度 ， 不 要 太 强求 ， 适 可 而 止 。 

做 广告 需要 技巧 ， 不 可 太 突 无 。 例 如 ,发 了 一 个 有 意思 的 产品 ， 希 望 让 大 家 知道 如 何 购买 ， 但 点 
赞 的 多 ， 一 个 问 购买 地 址 的 也 没有 ， 自 己 又 不 能 直接 说 ， 这 时 可 以 统一 回复 : 问 我 购买 方式 的 人 太 多 
了 ， 我 统一 告诉 大 家 啊 。 这 样 即 提醒 那些 人 购买 ， 又 不 显得 唐 突 。 

不 管 是 哪个 朋友 买 了 ， 买 了 多 少 ， 都 要 感谢 人 家 ， 并 且 要 当 着 全 世界 的 人 感谢 ， 人 家 支持 你 ， 也 
许 不 是 因为 你 的 产品 好 ， 而 是 认可 你 的 人 ， 所 以 要 知道 ， 他 的 这 次 购买 ， 我 们 是 欠 他 们 一 个 人 情 ， 记 
得 哪 天 你 要 偿还 。 一 个 懂得 感恩 的 人 ， 才 能 得 到 人 家 的 尊重 和 继续 的 帮助 。 

6. 账号 管理 

不 少 用 户 注册 了 很 多 号 ， 如 服务 号 、 企 业 号 、 个 人 号 ， 但 都 没有 做 好 。 如 果 是 中 等 规模 的 企业 ， 
做 一 个 服务 号 是 最 佳 选择 。 订 阅 号 的 难度 比 服务 号 要 大 ， 不 是 每 个 人 都 可 以 用 订阅 号 做 好 自 媒体 。 根 
据 自己 的 业务 和 自身 实力 来 选择 。 

朋友 圈 的 玩法 不 只 是 卖 货 ， 朋 友 圈 也 不 只 是 只 有 个 人 能 玩 ， 企 业 也 可 以 做 个 人 号 、 朋 友 圈 。 对 于 
高 客 单价 的 产品 ， 对 于 需要 信任 的 产品 ， 对 于 回头 率 高 的 产品 ， 其 实 都 可 以 做 个 人 号 。 很 多 时 候 ， 朋 
友 圈 的 影响 力 比 公 众 号 更 大 。 

宣传 账号 的 嗪 头 要 具体 ， 直 接 公布 微 信 号 没有 任何 意思 ， 就 算 曝光 再 高 ， 也 很 难 转化 ， 除 非 是 大 
明星 。 

公众 号 的 内 容 ， 避 免 内 容 太 单一 。 例 如， 电 商 类 的 账号 ， 如 果 每 天 都 是 电 商 文章 ， 这 个 账号 就 没 
喻 意思 了 。 企 业 类 的 账号 ， 每 天 都 和 企业 相关 ， 也 会 很 枯燥 。 有 一 个 主线 ， 然 后 增加 其 他 内 容 。 
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公众 号 的 维护 ,注意 塑造 小 编 的 形象 ， 让 他 有 鲜明 的 性 格 特点 。 小 编 偶尔 可 以 撤 个 娇 。 例如 :“ 昨 
天 的 活动 中 奖 率 设置 太 高 了 ， 公 司 要 开除 我 ， 老 板 说 除非 有 100 个 人 回复 支持 小 编 ……” 
如 果 使 用 个 人 号 ， 有 个 功能 一 定 要 用 好 : 分 组 功能 。 可 以 把 一 些 私密 的 朋友 和 客户 分 开 ， 可 以 解 
屿 内 | 决 多 账号 的 问题 ， 可 以 错开 高 频 互动 时 间 。 
用 QQ 号 绑 定 微 信 。 以 后 就 直接 推广 QQ 号 ， 当 某 个 微 信 满 了 ， 就 绑 定 下 一 个 微 信 。 这 样 可 以 统 
Note | 一 推广 。 重要 的 群 聊 要 保存 到 通讯 录 ， 和 避免 以 后 找 不 到 。 
| 添加 好 友 的 时 候 ， 注 意 写 验证 信息 ， 不 要 使 用 默认 的 。 如 果实 在 不 知道 该 写 什么 ， 就 说 朋友 推荐 
| 认识 的 。 
7.， 粉丝 管理 


对 于 刚 开 始 起 步 做 微 信 的 企业 ， 复 杂 的 数据 报表 意义 不 大 。 关 注 互 动 和 粉丝 数 ， 前 期 粉丝 数 更 重 
要 ， 没 有 粉丝 做 活动 的 性 价 比 太 低 。 想 办 法 把 老 客户 转化 成 为 微 信 好 友 ， 转 化 成 为 关注 粉丝 最 重要 。 

如 何 突破 人 数 限制 ? 有 个 简单 的 办 法 ， 每 个 号 增加 到 4000 人 左右 ， 然 后 开通 第 二 个 号 ， 复 制 头 
像 和 昵称 ， 然 后 同步 朋友 圈 内 容 。 这 样 可 以 形成 矩阵 。 每 次 发 朋友 圈 ， 可 以 多 个 号 一 起 同步 。 


8， 软 文 技巧 


微 信 文 章 的 标题 注意 前 13 个 字 。 这 13 个 字 会 直接 影响 文章 的 打开 率 。 尽 量 写 得 吸引 人 眼球 。 为 
| 什么 是 前 13 个 字 ? 因为 微 信 提醒 的 时 候 只 能 看 见 13 个 字 ， 部 分 手机 更 多 一 些 。 

写 好 标题 和 文摘 。 微 信 文 章 的 打开 率 决定 于 文章 标题 ， 其 次 是 文章 摘要 ， 再 其 次 是 首 图 。 其 中 标 
题 占 50%， 其 他 两 者 占 50%， 如 果 这 三 者 没有 配合 好 ， 文 章 内 容 再 好 ， 也 会 受 大 影响 。 

微 信 文章 的 标题 有 时 候 可 以 加 一 些 辅助 的 情感 说 明 。 例 如 ， 此 视频 被 4000 万 人 转发 ， 央 视 都 曝 
光 了 ! 但 这 种 方式 有 点 low， 不 建议 多 用 。 

单 图 文 文章 ， 一 定 要 好 好 写 摘要 ， 摘 要 的 好 坏 会 决定 文章 的 打开 率 。 最 鄙视 那 种 默认 摘要 的 那些 
文章 ， 太 浪费 资源 ， 太 不 负责 任 。 

单 图 文 文章 的 摘要 ， 有 几 种 写法 都 很 受 欢 迎 。 例 如 ， 选 择 文章 里 有 哲理 的 两 句 话 ， 引 用 文章 中 某 
个 很 有 冲击 力 的 观点 ， 用 疑问 句 来 引起 大 家 兴趣 ， 你 自己 的 夸张 的 判断 。 例 如 ， 看 懂 这 篇 文章 ， 你 烦 
| 恼 减 少 90%。 

文章 配 图 很 重要 。 文 章 太 长 要 有 多 张 图 ， 现 在 手机 流量 问题 已 经 不 是 问题 了 ， 不 要 担心 多 图 。 有 
个 诀窍 ， 如 果 不 知道 该 配 什 么 图 ， 可 以 直接 配 风 景 图 。 每 个 人 都 不 会 觉得 别扭 。 

9 转发 技巧 

朋友 圈 如 果 发 链接 ， 一 定 要 发 短 链接 。 太 长 的 链接 影响 美观 ， 让 人 没有 点 击 的 欲望 。 生 成 短 链接 
的 方法 就 是 ， 把 链接 放 到 腾讯 微 博 上 发 布 一 次 ,会 自动 生成 短 链接 ， 然 后 复制 过 来 。 当 然 ， 新浪 微 博 
或 者 短 链接 生成 网 站 的 也 可 以 。 

朋友 圈 转 发 文章 的 时 候 ， 要 增加 自己 的 评论 或 者 摘录 文章 中 的 观点 。 这 相当 于 给 文章 做 背书 ， 可 
以 让 朋友 更 加 信任 或 者 产生 好 奇 ， 会 增加 点 击 率 。 特 别 是 你 希望 很 多 人 看 这 篇 文章 的 时 候 。 例 如 ， 你 
转发 的 是 你 自己 的 文章 。 这 样 还 有 个 好 处 ， 就 是 别人 在 朋友 圈 转 发 你 的 文章 ， 可 以 直接 复制 你 的 文字 
描述 。 

微 信 文章 写 好 以 后 ， 要 想到 别人 转发 会 是 什么 效果 。 转 发 有 两 种 ， 一 种 是 朋友 圈 ， 还 有 一 种 是 微 
信和 群 。 在 微 信 群 内 转发 时 ， 会 显示 前 面 36 个 汉字 ， 默 认 是 文章 前 36 个 汉字 。 如 果 有 摘要 ， 会 自动 显 
示 摘 要 。 
| 分 篇 发 布 。 在 公众 号 中 ， 如 果 发 系列 原创 文章 ， 对 于 吸引 粉丝 有 很 好 的 效果 ， 也 会 增加 互动 。 看 
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过 的 粉丝 会 等 着 看 下 一 篇 ， 看 了 下 一 篇 的 粉丝 会 回 到 你 的 账号 中 看 前 几 篇 。 
朋友 圈 的 发 布 时 间 最 好 不 要 固定 ， 太 有 规律 就 不 够 生活 化 。 但 是 可 以 固定 区 间 ， 例 如 早上 8 点 一 
10 点 之 间 ， 发 的 内 容 也 不 能 太 有 规律 。 同 一 时 间 发 多 条 朋友 圈 会 给 人 感觉 很 不 好 。 | 
朋友 圈 可 以 先 写 文字 ， 再 配 图 片 ， 这 是 常规 做 法 也 可 以 先 发 图 片 ， 然 统一 回复 文字 ,这 种 做 | 依 内 
法 可 以 自动 提醒 很 多 人 看 。 | 一 一 








14.8 论坛 推广 


做 论坛 推广 很 容易 ， 但 是 发 帖 很 容易 被 删 ， 如 果 不 讲解 技巧 ， 论 坛 推广 的 效果 会 很 低 。 下 面 结合 
具体 示例 介绍 如 何 做 好 论坛 推广 。 


14.8.1 ” 精 选 论坛 


内 比较 大 的 论坛 包括 如 下 几 个 。 

百度 贴吧 

百度 贴吧 的 地 位 不 容 忽 视 ， 主 要 是 百度 贴吧 与 百度 搜索 引擎 关系 紧密 ， 它 具有 得 天 独 厚 的 优势 ， 
除了 自身 流量 大 的 优点 ， 还 有 就 是 收录 和 权重 方面 的 强大 优势 。 所 以 ， 通 过 百度 贴吧 做 SEO 是 最 合 
适 不 过 的 。 

加 ”天涯 社区 

天 涯 的 流量 相当 巨大 ， 同 时 也 是 炒作 最 好 的 平台 。 所 以 天 涯 当中 有 很 多 高 质量 的 炒作 大 帖 。 如 果 
在 天 涯 红 起 来 ， 其 实 很 简单 ， 只 要 用 心 ， 敢 炒 ， 只 要 你 的 帖子 存在 众人 攻击 的 漏洞 ， 只 要 你 的 帖子 剑 
指 当前 人 们 关注 的 热点 ， 那 么 ， 帖 子 绝对 会 火 。 

如 果 没 有 多 少 精力 的 时 候 ， 只 需要 占据 这 两 个 论坛 就 可 以 。 如 果 还 有 精力 ， 可 以 考虑 占据 最 火 的 
十 大 论坛 ， 如 西祠 胡同 、 猫 扑 等 ， 效 果 会 更 好 。 


14.8.2 ”设计 好 帖子 


选择 好 论坛 后 ， 下 面 介绍 如 何 发 帖 。 下 面 以 百度 贴吧 为 例 进行 说 明 。 

对 于 SEO， 很 多 用 户 将 它 复杂 化 了 ， 其 实 没有 那么 复杂 ， 做 SEO 需要 一 定 的 时 间 积累 ， 并 不 是 | 
几 个 小 时 或 是 几 天 就 会 有 迅猛 的 效果 。 

SEO 就 是 内 容 、 外 链 以 及 关键 词 。 就 是 这 么 简单 。 所 以 ， 大 家 不 要 过 分 关注 各 种 繁复 的 教程 ， 真 
心 没 有 用 。 

要 点 一 ， 选 好 关键 词 。 

选择 关键 词 一 般 存在 两 个 误区 。 

加 ”做 什么 领域 就 直接 选择 什么 领域 的 关键 词 。 

回 ”过 分 堆积 关键 词 象 。 

这 两 种 情况 都 会 导致 SEO 的 效果 不 好 。 前 者 是 因为 选择 的 关键 词 过 于 热门 ， 很 难 有 出 头 之 日 。 
后 者 就 是 因为 关键 词 过 于 堆积 ， 造 成 目的 太 过 明显 ， 容 易 造成 蜘蛛 不 抓 取 ， 甚 至 直接 屏 项 ， 这 样 连 收 | 
录 都 没有 ， 就 更 不 用 说 什么 排名 了 。 | 

选择 关键 词 ， 先 要 去 考察 一 下 ， 哪 些 词 还 有 机 会 。 关 键 词 有 很 多 ， 同 行 们 不 会 每 一 个 关键 词 都 会 } 
涉及 ， 所 以 一 定 有 空白 。 仔 细 找 找 总 是 有 的 。 这 里 建议 大 家 选择 长 尾 关 键 词 和 冷门 关键 词 。 | 
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| 大 家 在 做 关键 词 的 时 候 , 可 以 看 看 自己 所 选择 的 关键 词 是 否 存在 易 错字 或 是 很 容易 发 生 语 法 错误 
| 等 情况 ， 只 要 有 这 样 的 情况 存在 ,那么 就 可 以 将 错 就 错 ， 将 容易 发 生 错误 的 关键 词 作为 自己 的 主攻 声 
| 地， 一 方面 这 样 竞争 力 大 大 减少 ， 另 一 方面 又 有 固定 的 流量 进入 ， 这 样 ， 那 些 输 入 错字 来 搜索 的 朋友 
全 内 | 就 会 成 为 目标 。 
”一 | 例如 ， 很 多 用 户 非常 喜欢 看 湖南 卫视 的 《变形 计 》， 看 到 这 个 名 字 ， 大 家 就 一 定 要 有 敏锐 的 洞察 
Note | 力 ， 因 为 人 们 搜索 的 时 候 ， 很 容易 将 “变形 计 ” 搜 索 成 为 “变形 记 ”， 如 图 14.17 所 示 。 


热点 光盘 目 。 三 Fi 201407-10 





二 G7 天 最 FE30 天 各 590 天 过 丘 中 年 全 部 
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统计 “变形 记 ” 热 点 趋势 
14.17 比较 “变形 计 ” 和 “变形 记 ” 搜 索 趋势 


一 个 字 之 差 ， 效果 差 好 多 。 首 先 ，《 变 形 计 》 是 每 周一 晚上 更 新 ， 所 以 会 发 生 在 周二 的 时 候 搜索 
量 大 大 提高 的 情况 。 同 样 的 时 间 ， 但 是 一 个 字 之 差 ， 搜 索 量 相差 非常 多 。 但 是 ， 在 这 里 我 们 还 是 看 到 
了 很 大 的 商机 。 

回 ”本身 固定 的 强大 的 搜索 自然 流量 。 
| 加 ”竞争 度 大 大 减少 ， 如 果 在 这 里 创下 好 的 排名 ， 只 要 肯 下 工夫 并 不 难 ， 光 是 广告 费 就 能 够 节 
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省 很 多 。 

要 点 二 : 如 何 发 高 质量 帖子 + 留 链接 。 

贴吧 发 帖 一 般 会 有 两 个 难题 。 

加 ”帖子 太 水 ， 没 人 看 ， 很 容易 就 沉 了 ， 没 有 起 到 营销 的 作用 。 

加 ”帖子 引流 留 链接 ， 一 留 就 被 删 帖 。 

贴吧 做 SEO 的 好 处 很 多 ， 单 单 从 物质 上 来 讲 ， 我 们 不 用 去 做 网 站 ， 也 不 用 一 切 从 零 开始 做 流量 。 
但 是 ， 最 大 的 浆 端 就 是 总 有 一 种 被 人 牵制 的 感觉 ， 谁 都 车 不 起 ， 吧 主 车 不 起 ， 和 否则 删 帖 ， 百 度 更 车 不 
起 ， 和 否则 会 屏蔽 。 所 以 ， 如 果 想 要 在 贴吧 中 做 SEO， 将 帖子 做 到 首页 ， 就 必须 要 学 会 “退让 ”。 

首先 ， 帖 子 的 内 容 一 定 要 是 高 质量 的 软文 ， 中 间 穿 插 “ 不 痛 不 痒 ” 的 和 干货。 当然， 帖子 内 容 要 与 
自己 的 产品 以 及 贴吧 的 流量 契合 。 

其 次 ， 要 想 拥有 高 人 气 的 帖子 ， 就 必须 要 


台电 回复 





“小 号 推 大 号 ”了 。 买 一 批 百 度 贴吧 账号 ， 然 后 本 
推 发 帖 的 大 号 。 这 样 的 效果 在 于 能 够 很 快 地 让 。 “家 汪 
帖子 获得 人 气 ， 其 次 就 是 可 以 自然 而 然 地 带 出 池 eeuuss aaa 

链接 ， 这 样 的 链接 一 般 都 在 “楼 中 楼 ”中 ， 很 on 
难 被 发 现 ， 而 且 是 “小 号 ” 提问 ， 发 帖 大 号 回 。 。 国 …“…ttexswssess wen | 汪 
答 ， 不 算是 主动 推广 ， 因 此 吧 主 以 及 百度 者 是 。 加 [EEC 


去 淘宝 批量 购买 一 批 百 度 账号 ， 最 好 买 老 








号 ,价格 也 不 贵 ,一 元 10 个 左右 。 这 种 批量 的 > ss0rs2r ml 

百度 贴吧 老 号 ， 最 好 用 专门 的 顶 贴 机 来 使 用 ， ne ] 了 

不 过 现在 真正 的 顶 贴 机 非常 的 少 ， 价 格 上 也 都 pp rr 

上 千 了 ， 而且 使 用 上 都 是 有 期 限 的 ， 所 以 不 推 网 | 开 

荐 这 种 方法 。 Zhanlan_198 眉 求 材料 地 址 1 i 
也 可 以 发 动 朋友 、 同 学 等 熟人 ， 然 后 让 他 图 14.18 小 号 推 大 号 范例 


们 帮 顶 贴 以 及 回复 即 可 。 也 可 以 去 威 客站 点 ， 
如 猪八戒, 花 钱 发 任务 让 人 给 你 项 贴 和 回复 ,一般 花费 上 五 六 十 元 就 可 以 产生 一 个 大 热 的 帖子 。 当然 ， 
要 边 测试 边 看 效果 ， 然 后 继续 投入 ， 千 万 不 要 盲目 地 花 钱 ， 否 则 得 不 偿 失 。 

至 于 引流 的 链接 可 以 直接 是 链接 ， 如 微 信 、QQ 号 ， 甚 至 个 人 图 片 ， 也 可 以 加 入 二 维 码 。 但 是 注 
意 , 二 维 码 不 要 太 显眼 , 其 次 有 二 维 码 的 图 片 不 要 出 现在 首页 , 放 在 后 面 的 页 面 中 。 如 果 直 接 留 链接 ， 
可 以 使 用 网 站 间隔 法 。 


14.8.3 ”论坛 发 帖 技巧 


在 发 布 的 帖子 中 需要 加 入 一 些 干货 ， 也 就 是 一 些小 技巧 之 类 的 ， 用 自己 的 经 历来 说 ,然后 一 定 要 
记 住 ， 说 自己 用 这 些 技巧 后 的 变化 。 最 好 就 是 贴 出 一 些 图 片 来 佐证 。 图 片 可 以 直接 去 淘宝 找 。 
通过 技巧 的 讲解 ， 让 大 家 认为 你 是 真正 有 内 容 的 ， 那 么 就 会 相信 你 ， 会 愿意 继续 向 你 讨教 。 通 过 


图 片 也 好 ， 自 身 经 历 的 佐证 ， 这 样 是 对 人 们 进行 欲望 肯定 。 在 这 里 ， 一 定 要 注意 ， 加 入 压 张 营销 。 这 | 


个 帖子 没有 用 ， 非 常 可 惜 ， 如 果 用 了 ， 流 量 绝对 会 增加 10 倍 。 
大 的 论坛 ， 如 天 涯 , 流量 是 非常 大 的 , 一 个 帖子 一 旦 发 布 , 很 容易 就 沉 了 。 所 以 需要 有 人 帮 顶 帖 
多 回复 ， 这 样 发 布 的 帖子 自然 排 在 前 面 。 只 有 帖子 排 在 前 面 ， 才 有 机 会 吸引 更 多 精准 的 流量 。 
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为 了 避免 帖子 下 沉 ， 可 以 使 用 小 号 推 大 号 的 方法 ， 让 帖子 更 快 地 拥有 人 气 ， 人 都 有 从 众 心理 的 。 
如 果 大 家 对 于 这 个 帖子 都 肯定 ， 回 复 都 积极 ， 肯 定 是 一 个 好 帖子 ， 无 形 中 加 入 了 很 多 影响 分 。 当 有 越 
来 越 多 真实 的 流量 加 入 帖子 后 ， 就 可 以 不 再 去 用 小 号 推 了 ， 因 为 真实 的 流量 已 经 会 为 你 宣传 了 。 
全” 在 威 客 网 中 ， 关 于 论坛 发 帖 的 任务 都 是 比较 热门 的 。 如果 花 钱 去 发 帖子 不 如 去 让 别人 攻 顶 帖 ， 因 
一】 为 做 1000 个 水 贴 不 如 做 一 个 精品 帖子 。 
Note | 加 ”水 帖子 没有 说 服 力 ， 即 使 引 了 流量 ， 转 化 率 也 不 高 。 
| 名 ”精品 帖子 其 实 就 是 活活 的 SE0， 因 为 永久 都 存在 ， 它 会 永远 地 帮 你 获取 精准 的 流量 。 
如 何 用 小 号 推 大 号 ? 
让 小 号 帮 你 回复 帖子 。 给 他 们 每 次 回复 的 内 容 和 时 间 ， 如 回复 10 次 1 元 钱 。 简 单 易 行 ， 操 作 任 
务 的 愿意 ， 用 不 到 五 十 元 钱 就 可 以 快速 地 拥有 一 个 精品 帖子 。 
让 小 号 提问 你 的 联系 方式 ， 自 己 回答 。 回 答 联系 方式 的 时 候 ， 不 一 定 非 要 回答 自己 的 QQ 或 是 微 
信 ， 小 心 会 被 删 帖 ， 可 以 回答 X x x 的 空间 ， 这 样 他 们 百度 一 下 ， 也 会 找到 。 只 要 确保 这 样 的 搜索 ， 
| 排名 是 第 一 即 可 。 或 是 直接 回复 ， 看 我 的 天 涯 博客 。 
| 因为 天 涯 旗下 有 博客 。 所 以 直接 告诉 他 们 ， 点 击 我 的 这 ， 进 入 的 就 是 你 的 博客 。 博 客 中 包含 联系 
| 方式 就 行 了 。 
| 


14.9 QQ 群 推广 


利用 QQ 群 来 推广 网 站 其 实 已 经 有 很 多 方法 和 技巧 , 下 面 列举 一 些 本 人 认为 推广 效果 比较 明显 的 
方式 。 而 这 些 QQ 群 推广 方式 都 是 个 人 经 历 过 ， 且 效果 良好 ， 这 里 说 到 的 不 仅仅 是 QQ 群 ， 也 涉及 一 
些 其 他 和 QQ 有 关 的 网 络 推广 方式 。 

回 ”发言 要 一 针 见 血 

选择 加 入 一 些 与 个 人 网 站 相关 的 QQ 群 ， 一 定 要 是 活跃 的 QQ 群 。 当 大 家 都 在 一 起 讨论 一 个 话题 
时， 讨论 得 不 可 开交 ， 你 可 以 猛然 说 一 句 一 针 见 血 的 话 ， 让 大 家 觉得 你 说 的 很 不 错 ， 然 后 马上 停止 发 
| 言 ， 不 再 继续 参与 他 们 的 争论 。 隔 三 差 五 来 一 次 评论 。 这 样 一 来 会 有 一 部 分 人 感觉 你 很 牛 ， 都 会 对 你 
| 的 神秘 产生 好 奇 ， 会 查看 你 的 资料 ， 进 而 进入 你 的 网 站 。 
| 优点。 不 耽误 时 间 ， 能 产生 比较 患 实 的 网 站 用 户 。 

缺点 ， 会 受到 不 可 思议 的 语言 攻击 ， 考 验 忍 受 力 。 

回 “到 处 发 小 广告 

狂 加 QQ 群 ， 加 入 之 后 ， 就 直接 发 布 广告 和 群 邮件 ， 发 广告 后 立马 站 人 。 

优点 ， 不 用 绞 尽 脑 汗 推广， 匡 增加 见效 快 ， 锻 炼 厚 脸 皮 。 

缺点 :被 跑 几 率 99%， 影 响 人 品 和 口碑 。 

回 ”QQ 好 友 印象 

QQ2009 开始 有 好 友 印象 这 个 功能 ， 因 为 是 刚 出 来 的 功能 ， 没 有 先例 ， 所 以 最 开始 本 人 是 找 了 几 
个 好 友 试 试 效果 。 我 在 对 他 的 印象 中 贴 的 是 “mysite.com”， 但 发 现 没 效果 ， 因 为 域名 太 长 ， 别 人 记 
不 住 。 于 是 我 就 贴 上 了 我 的 博客 “ 某 某 网 站 ”。 过 了 半 个 月 之 后 ， 我 的 好 友 就 给 我 反馈 说 ， 你 什么 时 
| 候 改 名 字 叫 什么 网 站 了 ? 因为 都 是 对 好 友 做 的 实验 ， 所 以 他 们 都 不 会 删除 这 段 评价 。 多 给 女性 的 好 友 
中 做 实验 ， 因 为 女性 QQ 号 的 资料 浏览 率 远大 于 男性 QQ 号 。 
| 优点 一劳永逸 ， 增 加 网 站 的 曝光 率 。 
| 缺点 :效果 不 明显 。 
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| 
回 “在 QQ 群 邮件 中 发 布 有 用 资源 | 
我 有 3 个 “我 是 设计 师 ”QQ 群 ， 对 我 来 说 是 很 稳定 ， 人 气 也 是 比较 旺 的 群 。 所 以 一 般 都 会 不 定 | 
期 地 发 布 一 些 关于 网 站 制作 的 软件 教程 、 资 源 等 。 尤 其 是 网 站 资源 ， 我 都 发 布 在 群 邮件 中 ， 一 般 会 在 | 
压缩 包 中 加 入 自己 的 广告 。 这 样 ， 即 使 有 隐 性 广告 ， 网 友 们 不 但 不 会 骂 你 ， 而 且 还 会 感谢 你 。 所 以 你 | 
发 布 的 东西 一 定 要 对 群 友 有 用 才 行 。 | 
优点 : 利己 利 人 ， 产 生 忠实 的 访客 。 
缺点 ， 做 好 人 不 难 ， 难 的 是 做 一 辈子 好 人 。 
加 ”修改 网 名 
在 QQ 群 中 如 果 写 本 人 名 称 ， 别 人 只 会 知道 这 是 一 个 名 称 。 如 果 写 mysite.com， 域 名 太 长 ， 没 人 
记得 住 。 最 后 我 写 的 是 网 站 名 称 ， 这 样 大 家 都 会 知道 我 有 一 个 网 站 。 而 且 我 是 QQ 会 员 ， 所 以 在 QQ 
群 里 排名 都 是 靠 前 的 。 在 群 里 存在 的 时 间 长 了 ,自然 就 会 有 人 搜索 我 的 网 站 。 搜 索 网 站 名 称 的 虽然 不 | 
多 ， 只 有 2~10 个 ， 但 每 天 都 很 稳定 。 | 
优点 : 增加 网 站 曝光 率 和 你 名 字 的 搜索 量 。 | 
缺点 ， 想 让 别人 认可 你 很 难 ， 需 要 长 期 进驻 某 个 群 。 | 
回 “聊天 | 
如 果 喜 欢 在 群 里 聊天 ， 那 就 在 群 里 聊天 要 时 不 时 地 在 口中 说 出 你 的 网 站 。 每 次 都 说 ， 说 的 多 了 ， 
别人 自然 就 有 印象 了 。 如 果 你 的 用 户 群 是 100 人 ,那么 你 只 需要 服务 好 其 中 的 20 人 就 够 了 , 这 20 人 | 
就 会 自然 地 在 与 其 他 人 聊天 时 说 出 你 的 网 站 。 
优点 ， 网 站 的 目标 人 群 非常 明确 。 
缺点 ， 天 天 聊 ， 可 能 重心 转移 到 QQ 群 上 而 不 是 网 站 上 了 。 





14.10 名 片 推广 


IT 从 业者 会 经 常 参加 一 些 IT 聚会 ， 如 拿 福 能 博 主 聚 会 、 参 观 Google、 网 易 的 五 道口 沙龙 ， 而 每 
次 这 种 聚会 ， 都 能 收 到 一 大 堆 名 片 。 

一 张 小 小 的 名 片 ， 确 实 不 起 眼 ， 但 名 片 的 宣传 效果 比 它 费用 大 十 几 倍 的 宣传 单 相 比 ， 其 优点 有 过 
之 而 无 不 及 。 对 我 来 说 ， 凡 是 被 我 收 到 的 名 片 ， 都 会 潜意识 地 看 看 他 的 网 站 ， 实 际 上 每 个 参 会 者 都 是 
如 此 。 

一 盒 名 片 有 100 张 ， 按 北京 的 价格 来 说 ，20 多 块 钱 就 能 印 一 盒 ， 好 点 的 50 块 钱 ， 一 般 两 盒 起 印 ， 
也 就 是 200 张 ， 成 本 不 到 50 块 钱 。 最 重要 的 是 ， 大 家 都 有 收集 名 片 的 习惯 ， 不 会 随意 丢弃 名 片 。 如 果 
做 200 张 A4 纸 大 小 的 宣传 单 ， 最 少 也 要 200 元 以 上 ， 而 且 会 发 现 身 后 的 垃圾 桶 全 是 个 人 散发 的 传单 。 


14.10.1 地 区 网 站 适合 做 名 片 推广 


很 多 做 互联 网 的 朋友 都 喜欢 参加 各 种 各 样 的 聚会 活动 , 刚 开始 要 互相 介绍 一 番 ， 有 了 名 片 就 方便 
多 了 。 此 外 ， 由 于 名 片 可 以 设置 很 多 头衔 ， 如 主席 、CEO、 首 席 、 创 始 人 、 部 长 等 职务 ， 如 果 有 一 张 
印 有 头衔 的 网 站 名 片 ， 和 同行 交流 起 来 就 会 更 有 自信 。 所 以 我 们 看 到 站 长 大 会 上 大 多 数 人 都 是 什么 总 
头 之 类 的 。 

名 片 推广 方式 很 强大 , 我 觉得 名 片 推 广 的 方式 非常 适合 地 区 类 网 站 做 推广 ,因为 大 家 都 在 一 个 地 
方 ， 一 看 名 片 都 来 自 同一 个 网 站 的 话 ， 办 起 事 来 方便 多 了 。 
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14.10.2 ”制作 网 络 名 片 


， 如 果 说 上 面 介绍 低 成 本 花 钱 印 制 名 片 的 方法 还 不 给 力 的 话 ， 下 面 介绍 两 种 免费 制作 网 络 名 片 的 方法 。 
冉 加 “在线 制作 网 络 名 片 
这 种 方法 早 就 有 了 ， 每 次 在 QQ 中 出 现 陌生 人 对 话 时 ， 总 会 先 发 -长 囊 的 名 片 介绍 ， 有 的 是 纯粹 
3， 是 利用 在 线 名 片 生成 工具 制作 的 。 这 种 方法 很 简单 ， 在 百度 搜索 一 下 “在 线 名 片 制作 ”， 
| 就 能 找到 许多 提供 免费 制作 网 络 名 片 的 网 站 。 如 图 14.19 所 示 是 一 款 网 络 名 片 。 
回 “制作 二 维 码 名 片 
这 是 一 种 新 兴 的 方式 ， 利 用 智能 手机 安装 的 识别 软件 ， 在 拍摄 二 维 码 后 ， 就 能 得 到 相关 信息 。 我 
们 看 到 很 多 商品 后 面 都 有 - 段 二 维 码 ， 通 过 手机 就 可 以 验证 商品 的 信息 真 伪 。 
同样 ， 我 们 也 可 以 利用 二 维 码 的 方式 为 自己 制作 “二 维 码 名 片 ”。 在 百度 搜索 下 “二 维 码 名 片 
| 制作 ”也 能 找到 免费 制作 二 维 码 名 片 的 网 站 ， 如 图 14.20 所 示 就 是 利用 mayacode 在 线 制作 的 二 维 码 
名 片 。 


陈 经 理 市 场 经 理 


魔 舟 (福州 ) 网 络 科技 有 限 公司 

Add: 福建 省 福州 市 台 江 区 五 一 中 路 132 号 万 
都 交流 罗 1410 

Tel:0591-87880881 Mobi:18649775806 

E-mail:chenfy@mzzo.net 


张东健 国 


中 瑞 食品 有 限 呐 任 公司 
人 公司 地 直 : 三 州 币 珠海 区 责 洲 路 多 权 大 而 
oe 电话 :; ( 86) 20-6023 0023 6023 0023 
传真 ( 86) 20-60230023 
容 服 电话 : 400-8523-283 


图 14.19 网 络 名 片 图 14.20 二 维 码 名 片 





14.11 论坛 推广 


有 些 人 为 了 能 实现 网 站 在 短期 内 人 气 疾 升 ， 就 到 各 个 论坛 注册 大 量 ID， 花 了 一 两 天 就 把 广告 贴 
| 贴 满 了 所 有 网 站 ， 隔 几 天 回去 一 看 ， 被 删 的 一 干 二 净 ， 这 是 非常 业余 的 论坛 推广 手法 。 

正确 做 法 : 论坛 发 帖 前 要 有 个 心理 准备 ， 决 定 花 个 半年 时 间 把 这 件 事情 做 好 ， 每 天 在 同一 个 论坛 
不 要 发 过 多 帖子 ， 最 少 每 个 星期 回来 看 一 次 ， 第 二 次 发 帖 最 好 不 要 再 发 与 之 前 相同 的 话题 ， 也 可 以 不 
时 去 顶 一 下 别 的 帖子 ,争取 每 个 马甲 都 具有 一 定 威望 值 , 这 样 版 主 就 不 会 轻易 删除 你 ID 下 的 帖子 
了 。 记 住 ， 欲 速 则 不 达 。 

【操作 步骤】 

第 1 步 ， 通 过 搜索 引擎 或 导航 站 收录 相关 论坛 ， 以 中 小 论坛 为 主 ， 如 收集 SEO 方面 的 ， 搜 索 网 
站 推广 论坛 之 类 的 关键 词 ， 收 集 几 十 个 即 可 。 还 可 以 通过 在 文档 站 搜索 “ 带 外 链 的 X X 论 坛 TOP 榜 ” 
一 类 词 。 

第 2 步 ， 花 几 天 时 间 ， 把 收集 到 的 每 一 个 论坛 都 注册 至 少 一 个 ID, DD 命名 最 好 与 论坛 主题 相关 ， 
注册 好 后 别 急 着 发 帖 ， 先 晾 着 ， 然 后 换个 IP 或 第 二 天 再 注册 另 一 个 马甲 ， 如 此 反复 ， 主 要 看 打算 注 
| 册 多 少 个 马甲 ， 注 册 论 坛 时 很 可 能 会 舍弃 30% 的 论坛 列表 。 
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第 3 步 ， 再 花费 一 星期 时 间 ， 用 心 编写 几 十 个 要 推广 的 宣传 内 容 ， 用 记事 本 、Word 保存 好 。 

第 4 步 ， 每 天 到 这 些 论坛 发 帖 ， 根 据 不 同 论坛 状况 ， 在 编写 的 宣传 语 中 有 选择 性 地 进行 发 帖 ， 并 
记录 好 帖子 的 网 址 , 方便 下 次 进入 ,这 期 间 很 可 能 还 会 再 舍弃 20% 的 论坛 列表 。 因 为 有 些 论坛 发 帖 繁 | 
琐 、 审 核 过 慢 等 原因 。 | 
亡 提示 : 用 马甲 战术 的 话 ， 主 要 是 重新 拨号 ， 换 IP， 再 重新 登录 ， 要 不 两 个 ID 的 人 P 相同 ， 版 主 | 

就 知道 是 广告 了 ,最 方便 的 方法 是 用 在 线 代理 的 方法 来 登录 马甲 ,到 网 上 搜 下 “在 线 代理 ” 
即 可 。 | 

第 5 步 ， 隔 三 差 五 点 开 已 记录 的 这 些 帖 子 的 网 址 ， 如 果 已 经 沉 底 ， 则 要 用 马甲 去 顶 。 | 

第 6 步 : 如 此 坚持 半年 ， 一 般 会 初 见 成 效 ， 如 果 没有 效果 则 要 反思 或 放弃 此 种 方法 进行 推广 。 | 
这 提示: 论坛 发 帖 最 忌讳 的 就 是 新 ID 发 广告 ， 因 为 很 多 站 长 都 希望 快速 见效 的 心理 ， 刚 注册 好 的 | 

ID， 还 没 几 分 钟 就 发 广告 上 去 ， 这 样 肯 定 会 被 删除 。 越 想 尽快 达到 宣传 效果 ， 越 是 没 效 | 
果 ， 帖 子 都 被 删 光 了 ， 还 谈 什么 效果 ? 

且 一 旦 在 论坛 发 布 的 广告 信息 被 百度 收录 , 而 后 被 版 主 删除 , 蜂 蛛 再 来 的 时 候 发 现 此 帖 已 
不 在 ， 如 此 反复 ， 很 容易 把 你 的 网 站 降 权 。 





14.12 ”使 用 收藏 夫 做 推广 


收藏 夹 不 仅 可 以 用 来 收藏 个 人 经 常 访问 的 网 站 , 还 能 作为 自己 的 知识 库 分 享 和 整理 。 同 时 还 可 以 
利用 收藏 夹 来 提高 自己 的 推广 效率 。 
随 着 各 大 浏览 器 都 有 书签 同步 功能 ， 这 大 大 提高 了 我 们 的 工作 效率 , 原来 可 能 推广 一 个 博客 需要 
花 几 十 分 钟 收集 网 站 ， 收 集 的 过 程 中 可 能 又 看 新 闻 去 了 ， 严 重 影响 了 推广 的 效率 。 后 来 我 把 常 去 的 、 
可 以 推广 的 网 站 加 入 收藏 夹 ， 发 现 推广 效率 大 大 增加 。 
在 推广 书签 中 可 以 分 几 类 ， 因 为 我 的 博客 主要 是 和 站 长 相关 的 ， 所 以 把 分 类 分 得 很 细 。 例如， 微 
博 这 一 栏 ， 收 藏 了 常 去 的 几 大 微 博 ， 而 作为 网 络 推广 专员 的 一 些 人 ， 他 们 也 会 选择 这 些 地 方 。 
回 ”项 客 类 网 站 : 是 常用 的 推广 网 址 ， 基 本 上 每 发 一 篇 博文 就 会 在 项 客 类 网 站 上 提交 链接 ， 因 
为 这 类 网 站 会 直接 给 你 带 来 流量 ， 而 且 比较 稳定 。 这 个 文件 夹 包 含 DIGG、 奇 客 、 抽 慑 和 项 | 
客 。 因 为 顶 客 类 网 站 在 中 国 太 少 ， 关 闭 的 太 多 ， 所 以 能 收集 到 的 网 站 只 有 这 些 。 
回 ” 微 博 : 微 博 也 是 常用 的 推广 网 址 ， 但 由 于 微 博 新 闻 性 强 、 信 息 量 大 ， 发 布 的 信息 很 快 就 会 
被 淹没 掉 ， 但 有 部 分 微 博 是 可 以 增加 外 链 的 ， 如 腾讯 微 博 。 
回 ”软文 发 布 : 顾名思义 , 这 里 面 的 网 站 都 是 收集 了 可 以 投稿 的 网 站 , 如 Chinaz、Admin5、z123、 
im286 等 站 长 类 网 站 ， 这 个 收藏 夹 里 也 只 有 几 个 网 站 ， 因 为 一 旦 文章 投递 成 功 ， 其 他 站 长 类 
网 站 都 会 互相 转载 。 
回 ”论坛 : 就 是 常 去 的 论坛 网 址 了 ， 当 然 还 是 我 常 去 的 一 些 论坛 ， 如 28 推 、zblog、wp、 落 伍 者 ， 
论坛 的 推广 方法 可 以 参考 其 他 小 节 专题 介绍 。 
什么 样 的 栏目 收集 什么 样 的 网 址 ， 当 然 最 重要 的 是 需要 用 户 细心 、 长 期 的 去 收集 。 同 时 ， 在 执行 | 
一 项 推广 任务 时 ,还 可 以 巧 用 收藏 夹 来 分 析 推 广 效果 。 例 如 ， 论 坛 发 帖 ， 我 们 可 以 把 这 个 帖子 加 入 收 
藏 来， 过 段 时 间 再 来 看 看 是 否 被 删 、 回 帖 量 、 点 击 率 等 ， 这 样 就 能 大 致 地 分 析出 这 篇 帖子 是 否 推广 成 
功 。 同时， 还 可 以 隔 三 差 五 地 到 这 个 帖子 里 ， 给 自己 项 顶 帖 。 
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| 座 提示 : 利用 收藏 天 推广 也 要 做 好 精准 推广 ， 不 能 什么 网 址 都 收藏 ， 当 初 我 还 在 收藏 天 中 加 了 个 人 

| 喜欢 的 博客 ， 不 过 随 着 时 间 的 推移 ， 博客 这 个 文件 来 中 竟然 有 300 多 个 网 址 ， 于 是 就 设计 

| 了 一 个 博客 大 全 网 站 ， 在 首页 位 置 中 收藏 个 人 常 去 的 一 些 网 址 ， 这 样 就 不 用 每 次 都 点 收 
藏 天 。 


EE 14.13 博客 群 推广 


| 博客 群 是 博客 推广 的 一 种 方式 , 就 是 用 户 在 各 大 门户 网 站 批量 建造 博客 , 各 个 博客 之 间 相 互 友情 
| 链接 ， 最 终 回 到 自己 网 站 。 一 般 著 名 的 博客 网 站 ， 如 月 光 博 客 、 牟 长 青 、 可 能 吧 等 ， 都 会 在 其 他 BSP 
| 《博客 服务 提供 商 ) 开 有 分 支 博客 ， 每 天 发 的 文章 ， 会 转载 到 自己 的 BSP 博客 上 。 
1. 博客 群 的 优势 
它 可 以 为 用 户 带 来 实 实在 在 的 流量 ， 每 个 博客 、 每 篇 文章 都 是 自己 的 一 个 外 链接 ， 这 样 可 以 迅速 
提高 网 站 的 PR 以 及 排名 ， 还 可 以 提高 网 站 的 口碑 。 
对 于 职业 SEO 来 说 ， 博 客 群 还 是 非常 有 效果 的 。 
2. 常用 BSP 博客 网 站 
新 浪 、 搜 狐 、 网 易 、QQ、 百 度 、 雅 虎 、 博 客 网 、 中 国 博客 、Google、 和 讯 、 优 博 、donews、 中 
翼 、 中 华 网 、 中 人 金 在 线 、 天 涯 海 角 社 区 、 博客 大 巴 、 焉 酷 网 、 猫扑、 博思 、 yo 第 2 步 , Csdn、MSN space、 
| 聚 友 博 客 、19 楼 、 第 51 步 、yoho、TOM 博客 、CCTYV 博客 、 强 国 博客 、 大 学 博客 、 西 陆 空间 、 大 河 
| 博客 等 。 
3.， 如何 选择 合适 的 BSP 
下 面 比较 主要 BSP 优势 ， 以 便 有 选择 性 地 使 用 。 
和 讯 网 收录 是 最 快 的 ， 且 是 大 家 公认 的 Google 最 喜欢 的 博客 ， 一 般 发 文 5 分 钟 之 内 Google 
就 能 收录 。 
新 浪 和 天 涯 更 新 上 有 优势 ， 一 般 几 分 钟 就 能 收录 了 。 新 浪 博客 的 收录 快 但 权重 低 于 百度 
空间 。 
回 百度 空间 在 百度 的 权重 高 ， 文 章 必 然 会 被 百度 搜索 引擎 有 效 抓 取 ， 而 且 排 名 也 会 优先 ， 就 
是 收录 稍 慢 。 
加 ”中 人 金 在 线 的 博客 在 Google 新 闻 搜 索 中 有 很 好 的 表现 ,基本 上 前 一 天 的 文章 ,第 二 天 在 Google 
新 闻 搜索 中 就 能 找到 。 
搜狐 博客 的 情感 、 女 性 、 健 康 、 财 经 、 娱 乐 、 八 卦 类 博文 比较 强 ， 且 博客 与 圈子 的 互助 
推广 。 


容 提示 : 博客 群 建 多 了 也 不 好 ， 自 己 更 新 维护 起 来 麻烦 不 说 , 而 且 容易 让 搜索 引擎 认为 用 户 网 站 重 
复 率 高 。BSP 有 很 多 , 基本 所 有 大 中 型 网 站 都 提供 博客 服务 , 根据 自己 网 站 主题 选择 合适 
的 几 个 BSP 即 可 。 一 般 本 人 用 的 就 两 个 : 新 浪 博客 和 5G。 
4. 如 何 更 新 维护 群 建 博 客 
| 批量 注册 博客 不 是 很 难 ， 难 就 难 在 如 何 长 期 坚持 更 新 和 维护 这 些 BSP 博客 。 
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首先 ， 使 用 火狐 、 遂 游 之 类 的 浏览 器 ， 单 独 建立 一 个 收藏 严 ， 把 已 经 群 建 好 确定 要 使 用 的 博客 ， 
统统 放 入 这 个 收藏 夹 。 
然后 登录 一 次 ， 选 择 记 住 账号 密码 即 可 。 这 样 ， 以 后 更 新 群 建 博客 ， 批 量 打开 即 可 。 


5. 使 用 博客 群 建 软件 


搜索 博客 群 建 ， 百 度 上 有 好 多 推广 和 软件 ， 这些 软件 能 自动 模拟 蜘蛛 抓 取 这 些 博 客 地 址 网 站 并 且 
自动 注册 ， 但 是 所 有 软件 都 有 个 问题 : 注册 率 太 低 了 ， 即 使 注册 成 功 了 ， 但 发 送 率 更 低 ， 我 发 现 能 群 | 


发 成 功 的 大 部 分 是 一 些 垃圾 博客 。 

最 大 的 问题 ， 群 发 就 代表 只 能 先 写 好 一 篇 或 者 几 篇 文章 去 群发 ， 这 样 千篇一律 的 东西 大 量 地 出 现 
搜索 引擎 会 收录 ? 

这 其 实 是 群 建 博客 最 大 的 弊端 ， 无 法 遏制 重复 的 问题 ， 导 致 搜索 引擎 很 容易 判断 出 来 ， 不 给 予 
收录 


软文 基本 都 是 质量 差 的 ， 而 且 Google 已 经 考虑 这 些 博客 带 的 链接 了 。 
所 以 ， 建 议 普通 站 长 不 要 购买 甚至 下 载 什么 破解 版 的 群发 软件 ， 它 不 能 给 你 的 网 站 增加 外 链 、 
权重 。 





其 次 ， 使 用 博客 群发 软件 ， 即 使 发 送 成 功 ， 但 过 几 天 去 访问 ， 博 主 都 会 删除 这 些 博文 ， 能 留 住 的 | 


搞 博客 群 建 是 个 体力 活 ， 建 议 不 要 注册 太 多 博客 , 不然 以 后 维护 起 来 会 很 累 。 用 心经 营 好 几 个 群 | 


建 博客 即 可 。 博 客 群 建 好 后 ， 可 以 手动 提交 网 址 。 
14.14 美文 站 推广 


很 多 用 户 在 做 英文 产品 站 , 或 者 外 贸 B2B 导航 等 类 型 站 。 英 文 广告 平均 每 卫 单价 收益 是 0.15 美 
元 ， 而 中 文 广告 的 单价 只 有 0.01~0.03 美元 之 间 ， 在 国内 的 广告 单价 是 国外 的 115， 所 以 国外 的 流量 
是 个 宝 ， 一 旦 把 外 贸 站 做 出 来 ， 收 益 是 相当 可 观 的 。 

除了 早期 就 做 外 贸 的 公司 外 , 现在 很 多 的 中 小 型 工厂 自己 也 开始 涉及 外 销 业务 , 随 之 而 来 的 B2B 
交易 网 站 越 来 越 多 ， 对 于 平台 的 选择 则 成 了 外 贸 企 业 一 个 很 头疼 的 问题 。 

加 ”全 世界 已 经 有 上 千 个 贸易 平台 ， 很 难 辨别 适合 自己 的 平台 。 

回 各自 独立 的 贸易 平台 发 展 各 自 的 买 家 群体 ， 造 成 了 买 家 资源 的 分 散 。 

加 ”各 个 贸易 平台 要 求 不 同 的 数据 语言 及 格式 ， 传 统 企业 无 所 适 从 。 

回 ”任何 一 个 贸易 网 站 都 只 能 服务 于 一 部 分 买 家 和 供应 商 ， 任 何 一 个 买 家 也 不 会 局 限于 某 一 个 

贸易 网 站 进行 采购 。 


对 于 这 样 的 现状 , 很 多 初学 者 也 想 在 英文 网 站 中 分 一 杯 姜 ,于 是 很 多 站 长 开始 大 量 做 英文 产品 站 | 
和 英文 目录 站 ， 但 是 对 于 众多 起 点 高 的 同行 站 点 和 大 量 的 B2B 平台 ， 现 在 的 英文 产品 站 和 英文 目录 | 


站 就 很 难 超越 。 但 也 有 聪明 人 不 做 产品 站 和 目录 站 ， 而 做 起 了 英文 导航 站 。 这 样 既 省 去 了 更 新 内 容 、 
版 权 的 麻烦 ， 也 不 需要 懂 多 么 高 深 的 英文 ， 重 要 的 是 网 站 内 容 可 以 细 分 到 某 一 类 产品 。 下 面 介绍 一 下 
英文 站 的 建设 与 推广 方法 。 

1.， 选择 空间 
内 的 空间 ， 无 论 是 双 线 还 是 三 线 ， 因 为 只 是 国内 的 运营 商 ， 对 国外 提速 完全 没有 帮助 ， 要 选择 
一 些 有 国外 加 速 支持 的 空间 ， 但 由 于 国内 的 带宽 出 口 量 太 少 ， 在 国外 访问 是 很 慢 的 。 

现在 最 流行 的 要 算 美 国 空间 ， 国 外 访问 速度 很 快 ， 国 内 速度 还 是 比较 好 。 对 于 以 做 英文 为 主 的 站 
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| 长 ， 买 个 国外 空间 很 有 必要 ， 或 者 服务 器 在 香港 的 也 比较 好 。 
| 2， 网 站 设计 
! 
天、 英文 网 站 的 设计 要 符合 外 国人 的 习惯 , 如 果 摘 不 清楚 怎么 做 ,可 以 多 参考 些 国外 的 网 站 案例 模仿 
轿 - | 着 做 。 具 体 方法 和 步骤 就 不 再 展开 。 


Note | 3. 网 站 推广 
| 想 要 通过 外 贸 站 来 获得 安全 稳定 的 收入 , 就 必须 要 获取 国外 的 真实 流量 , 对 于 大 部 分 人 来 说 难度 
| 有 点 大 。 下 面 给 大 家 一 个 推广 思路 ， 希 望 用 户 能 举一反三 。 
加 ” 花 钱 竞价 排名 
应 该 说 竞价 推广 是 最 直接 、 最 有 效 的 方式 了 ， 据 统计 80% 的 人 通过 搜索 找 货源 ， 如 通过 
Directindustry、Google、Yahoo、Bing、 阿 里 巴巴 等 。 
免费 的 SEO 优化 推广 
找到 要 做 的 关键 词 ， 如 “B2B 外 贸 站 英文) ”， 然 后 逐一 点 开 前 几 位 的 网 站 ， 分 析 他 们 的 网 站 
结构 ， 并 模仿 之 。 
然后 再 建立 一 些 英文 博客 ， 最 好 在 国外 ， 如 Yahoo! BLOG， 把 国内 的 相关 文章 翻译 成 英文 ， 关 
键 词 加 入 网 站 链接 ， 努 力 把 文章 发 布 到 国外 的 论坛 、 相 关 贸 易 网 站 上 。 
争取 和 国外 某 些 同类 型 网 站 做 友情 链接 ， 争 取 加 入 网 页 目录 ， 如 dmoz。 这 么 做 的 目的 是 增加 自 
身 网 站 权重 。 
最 后 ， 不 断 添加 B2B 网 站 及 网 站 介绍 ， 翻 译 的 是 否 准确 不 是 问题 ， 因 为 搜索 引擎 看 不 懂 语 法 ， 
再 用 同样 的 方法 ， 不 断 地 到 不 同 网 站 开通 新 博客 ， 不 断 地 翻译 文章 ， 不 断 地 申请 友情 链接 。 
这 是 一 个 获取 国外 真实 IP 的 办 法 ， 但 也 是 最 有 效果 的 方法 。 随 着 网 站 权重 和 流量 不 断 增加 ， 流 
量 将 成 正比 增长 ， 当 然 收 入 也 会 跟着 增长 。 
繁琐 而 简单 的 推广 方法 更 容易 推广 ， 不 过 因为 做 的 人 很 少 ， 所 以 只 要 克服 困难 、 勇 于 实践 ， 做 英 
文 网 站 就 一 定 能 出 成 效 。 


14.15 淘宝 推广 


随 着 互联 网 的 发 展 、 电 子 商 务 的 火爆 ， 越 来 越 多 的 企业 和 个 人 投入 到 互联 网 创业 的 大 潮 中 ， 而 通 
过 淘宝 创业 ， 成 为 了 众多 投资 和 创业 者 的 首选 。 但 是 创业 是 艰难 的 ， 成 功 是 要 付出 代价 的 。 淘 宝 确实 
让 一 部 分 人 尝 到 了 “淘宝 ”的 甜头 ， 但 是 更 多 人 体会 到 的 却 是 辛酸 。 据 有 关 资 料 显示 ， 在 淘宝 中 有 
77% 的 卖家 倒 下 了 ， 仅 23% 的 卖家 活 了 下 来 。 下 面 介绍 如 何在 淘宝 内 做 免费 和 付费 推广 。 

1. 淘宝 内 免费 推广 方式 

加 ”提高 淘宝 搜索 的 排名 

橱窗 推荐 的 宝贝 ， 会 显示 在 搜索 结果 中 ， 也 就 是 排 在 更 前 面 一 点 ， 而 买 家 找 东 西 主要 就 是 依靠 搜 
索 ， 所 以 橱窗 位 一 直 以 来 都 是 珍贵 的 “资源 ”。 

橱窗 推荐 位 数 不 是 固定 数额 的 ， 而 是 根据 宝贝 数 、 开 店 时 间 、 信 用 度 〈 卖 家 信用 度 + 买 家 信用 度 
的 一 半 ) 及 交易 额 而 定 的 。 在 【我 的 淘宝 】|【 出 售 中 的 宝贝 】 中 设置 。 在 通常 情况 下 ， 按 照 下 架 时 
间 先 后 进行 排列 。 就 是 说 越 是 快要 下 架 的 商品 ， 排 得 会 相对 靠 前 。 所 以 在 做 橱窗 推荐 时 ， 就 要 推荐 快 
要 下 架 的 商品 。 但 是 当 橱 窗 推荐 的 商品 到 了 下 架 时 间 时 ， 商 品 就 会 自动 重新 上 架 。 这 时 下 架 时 间 又 为 
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6 天 23 小 时 或 13 天 23 小 时 。 

如 果 用 户 没有 及 时 更 换 橱窗 推荐 , 所 推荐 的 商品 就 不 是 要 快 下 架 的 状况 。 如 果 没有 及 时 更 换 橱窗 
推荐 ， 所 推荐 的 商品 就 不 是 快要 下 架 的 状态 。 所 以 橱窗 推荐 要 不 停 地 去 关注 、 去 更 换 不 同 的 产品 ， 只 
有 这 样 才能 有 更 多 客户 来 发 现 你 的 商品 。 通 常 建议 一 天 一 更 换 。 

淘宝 高 级 搜索 页 搜索 的 结果 和 首页 搜索 的 结果 有 很 大 差别 , 搜索 不 再 以 时 间 为 排名 依据 , 默认 显 
示 的 是 “人 气 宝 贝 ”， 主 要 是 由 浏览 量 、 销 售 量 、 卖 家 等 级 等 几 个 因素 决定 的 。 

加 ” 淘 社 区 





淘 社区 里 聚集 了 千 千 万 万 的 卖家 和 买 家 , 这 些 人 基本 上 都 是 淘宝 的 忠实 粉丝 和 网 购 用 户 ,所 以 千 | 





万 不 要 忽略 淘 社区 的 威力 。 特 别 是 信誉 度 为 0 的 卖家 ， 非 常 适合 在 淘 社区 “ 混 ”。 
就 是 通过 淘 社 区 ， 用 自己 的 个 人 魅力 来 赢得 潜在 消费 者 的 认可 ， 属 于 以 情感 人 。 例如， 笔者 的 朋 
友 以 前 推广 一 个 新 店 时 , 由 于 没有 推广 经 费 , 人 手 也 不 足 , 所 以 选择 的 主要 推广 方法 就 是 淘 社 区 推广 。 
当时 他 的 做 法 比较 简单 ， 每 天 只 做 一 件 事 : 转载 热门 的 娱乐 新 闻 。 由 于 内 容 选择 的 比较 好 ， 发 的 帖子 
经 常 被 加 精 甚至 是 推荐 。 记 得 第 一 次 被 加 精 后 ， 店 铺 从 原来 的 1、2 单 ， 直 接 增 到 一 天 5 单 以 上 ， 效 
果 非 常 明显 。 
另外 ， 淘 宝 “ 十 大 网 络 创 业 先 锋 ” 宋 琳 阿 姨 在 推广 过 程 中 也 曾 用 过 此 方法 ， 不 过 当时 她 主要 写 的 
是 自己 在 淘宝 的 创业 经 历 ， 效 果 也 非常 好 。 
对 于 优质 内 容 ， 淘 宝 社区 会 在 首页 和 右 下 角 弹 窗 进行 推荐 ,一 旦 被 推荐 ， 不 但 会 使 店铺 的 曝光 率 
大 大 提升 ， 也 会 增加 销售 。 
回 ” 淘 江湖 
淘 江 湖 其 实 就 是 淘宝 推出 的 SNS 平台 ,在 SNS 网 站 中 排名 第 三 ， 分 享 宝贝 是 SNS 营销 的 制胜 
法 宝 。 
回 “” 店铺 收藏 
在 淘宝 中 有 店铺 收藏 的 功能 ， 我 们 应 该 尽 可 能 地 吸引 买 家 来 收藏 我 们 的 店铺 。 优 点 
> ” 买 家 能 够 及 时 接收 到 我 们 店铺 的 信息 ， 增 加 回头 率 。 
> ”店铺 的 收藏 量 提高 了 ， 会 增加 在 用 户 心 中 的 信誉 度 。 
> ”收获 多 了 ， 会 增加 排名 。 
增加 收藏 的 方法 主要 有 3 种 。 
> ”与 用 户 交 流 时 ， 主 动 邀 请 他 们 收藏 。 
> ”装修 店铺 时 ， 在 醒目 位 置 放置 收藏 按钮 ， 并 鼓励 用 户 收藏 。 
> 与 其 他 网 店 相互 收藏 。 
回 “ 聚 划算 
淘宝 推出 了 自己 的 团购 平台 : 聚 划算 。 不 过 与 其 他 团购 平台 不 同 的 是 ， 淘 宝 官方 不 提供 产品 ， 聚 
划算 里 的 产品 都 是 来 自 淘宝 卖家 ， 且 聚 划算 每 天 推出 的 新 品 不 只 一 款 ， 而 是 多 款 。 它 相当 于 一 个 淘宝 
店 团购 的 聚合 平台 ， 是 为 淘宝 卖家 服务 的 。 这 个 平台 的 推广 和 促销 效果 非常 好 。 
如 果 用 户 的 网 店 信誉 度 达到 1 钻 以 上 ， 可 在 【我 的 淘宝 】|【 活 动 报名 】 中 报名 参加 聚 划算 。 
加 ”活动 推广 
对 淘宝 店 来 说 ,活动 是 最 重要 也 是 最 有 效 的 促销 方式 之 一 ， 所 以 一 定 要 重视 并 大 力 执行 。 最 好 能 


做 到 每 周 都 有 新 活动 。 一 般 常见 的 活动 形式 有 满 就 送 、 买 就 送 、 拱 配套 餐 、 限 时 打折 、 限 时 抢购 、 店 | 


铺 VIP 会 员 折扣 、 红 包 积 分 、 店 铺 优惠 券 、 节 假日 促销 活动 等 。 
加 与 其 他 店铺 交换 友情 链接 
交换 友情 链接 是 最 初级 的 推广 方式 ， 还 是 有 一 定 效果 的 。 
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| 2. 淘宝 内 付费 推广 方式 
| 很 多 人 担心 淘宝 竞价 的 非 理性 ， 其 实 大 可 不 必 。 只 有 懂得 花 钱 ， 才 更 懂得 如 何 挣 钱 。 当 然 ， 刚 开 
。 | 始 尝试 时 ， 要 理性 投入 ， 不 要 盲目 推广 。 先 由 浅 入 深 地 慢 慢 尝试 ， 逐 渐 深入 。 
全 | | 在 众多 付费 推广 方式 中 ， 淘 宝 内 部 的 付费 推广 效果 最 佳 ， 因 为 淘宝 平台 聚集 了 大 量 的 网 购 用 户 ， 
| 是 最 精准 的 平台 。 淘 宝 的 付费 推广 方式 主要 有 以 下 几 种 。 
Tote Oo sa 
| “淘宝 直通 车 相当 于 搜索 引擎 的 竞价 排名 ,通过 付费 的 方式 ,可 以 在 淘宝 的 搜索 结果 页 中 获得 更 好 
的 展示 机 会 。 同 搜索 引擎 竞价 排名 一 样 ， 卖 家 可 以 针对 每 个 竞价 词 自由 定价 ， 并 且 可 以 看 到 排名 位 置 
并 按照 实际 被 点 击 次 数 付费 。 每 个 关键 词 最 低 出 价 0.05 元 ， 最 高 出 价 100 元 , 每 次 加 价 最 低 为 0.01 元 。 
在 操作 上 ， 与 竞价 差不多 ， 关 键 词 选 择 最 为 重要 ， 这 条 可 以 结合 竞价 排名 中 的 选 词 技巧 ， 主 要 就 
是 找到 潜在 用 户 最 可 能 搜索 到 的 词 。 
回 ”超级 卖 霸 
超级 卖 霸 是 淘宝 重 拳 推出 的 宝贝 展示 集中 营 ， 搜集 了 全 网 最 热卖 的 宝贝 , 将 其 展示 在 全 网 客流 量 
最 大 的 位 置 。 由 于 其 拥有 超大 的 活动 流量 ， 完 美的 主题 策划 ， 且 投入 费用 优惠 、 效 果 数 据 可 以 实时 监 
控 等 优势 ， 效 果 非 常 显著 。 
具体 参与 办 法 是 登录 【我 的 淘宝 】|【 我 是 卖家 】|【 我 要 推广 】， 然 后 点 击 超级 卖 霸 活 动 进行 
报名 。 
回 ”钻石 展位 
钻石 展位 就 是 指 淘宝 内 部 页 面 的 广告 , 主要 也 是 通过 竞价 方式 , 让 用 户 广告 展示 在 淘宝 首页 或 其 
他 页 面 中 。 它 是 按 CPM 展示) 计 费 的 。 
回 ” 淘 代码 
由 浙江 报 业 集团 与 阿里 巴巴 合资 成 立 的 《淘宝 天 下 》 杂 志 创刊 。 从 第 14 期 开始 ，《 淘 宝 天 下 》 
杂志 上 开始 出 现 由 几 个 字母 加 上 一 串 数字 组 成 的 代码 ，《 淘 宝 天 下 》 称 之 为 “ 淘 代 码 ”。 每 一 串 “ 淘 
代码 ”都 指向 淘宝 网 上 的 某 一 款 产品 。 当 用 户 在 淘宝 上 输入 这 串 数字 来 搜索 这 款 商品 时 ， 登 载 这 串 代 
码 的 《淘宝 天 下 》 将 会 从 购买 代码 的 商户 处 获得 单 击 广告 费 ， 如 果 交 易 完成 ， 他 们 又 能 获得 一 笔 销售 
分 成 。 
从 线 上 转载 纸 媒 的 推广 方式 适合 于 一 些 大 型 的 企业 或 品牌 对 于 一 般 小 卖家 来 说 ， 费 用 较 高 ， 但 
效果 很 明显 。 
加 ”阿里 妈妈 淘宝 联盟 
阿里 妈妈 旗下 的 淘宝 客 ， 相 当 站 长 都 不 陌生 ， 可 以 说 这 是 淘宝 店 中 性 价 比 最 高 的 付费 推广 方式 ， 
而 且 也 没有 风险 。 因 为 它 是 按 效果 付费 ， 只 有 成 功 产生 销售 后 ， 卖 家 才 会 支付 佣金 。 而 这 个 佣金 由 志 
家 自主 设 定 。 做 淘宝 客 推广 ， 主 要 需要 注意 以 下 几 个 事项 
> ”适宜 的 佣金 比例 。 如 果 佣金 少 了 ， 则 愿意 帮 推 广 的 人 就 少 ， 所 以 在 能 力 接受 范围 内 
尽 可 能 地 提高 佣金 比例 。 只 有 高 的 佣金 比例 ， 对 淘宝 客 才 有 吸引 力 。 只 有 在 众多 商品 
中 脱颖而出 ， 首 先 吸引 淘宝 客 的 目光 ， 才 能 带 来 好 的 销量 。 千 万 不 要 将 埋 少 赚 的 那 点 
利润 ， 眼 光 要 放 长 远 。 
> ”选择 优质 的 产品 进行 推广 。 淘 宝 客 们 也 不 是 傻子 ， 劣 质 产品 、 灌 销 品 他 们 肯定 不 会 去 
推广 的 。 即 使 他 们 推广 了 ， 买 家 也 不 会 感 兴趣 。 只 有 热 销 产品 才能 带 给 淘宝 客 和 买 家 
| 信心 。 
| > ”多 推 应 季 品 。 很 多 产品 都 有 季节 性 的 ， 要 根据 季节 的 不 同和 市 场 的 需求 ， 及 时 调整 推 
| 广 思路 和 产品 设置 。 
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> ”设置 有 吸引 力 的 介绍 。 一 定 要 在 介绍 中 突出 产品 的 特色 和 卖点 ， 如 卓越 的 功能 、 超 值 
的 赠品 、 低 廉 的 促销 价格 等 。 因 为 淘宝 客 在 选择 产品 时 ， 会 选择 有 卖点 的 产品 进行 推 
广 。 还 有 用 户 的 卖点 突出 ， 才 能 吸引 淘宝 客 的 目光 。 而 且 不 把 卖点 说 清楚 ， 淘 宝 客 即 | 
使 帮 你 ， 也 不 知道 如 何 去 打 动 消费 者 。 

> 。 主要 挖掘 淘宝 客 。 如 果 发 现 了 优秀 的 淘宝 客 推手 ， 一 定 不 要 放 过 ， 可 以 主动 邀请 他 帮 | 
你 推广 产品 。 另 外 ， 身 边 的 朋友 、 每 一 个 光顾 过 的 客人 ， 都 可 能 是 潜在 的 优秀 淘宝 客 。 
特别 是 那些 买 过 产品 的 顾客 ， 因 为 他 们 有 过 真实 体验 ， 让 他 们 去 现身说法 ， 经 常会 取 | 
得 意 想不到 的 效果 。 





14.16 通过 数据 分 析 做 精准 推广 


对 于 一 个 网 站 站 长 来 说 ， 应 该 熟悉 各 种 网 站 统计 工具 ， 如 51la、CNZZ、Google Analytics 等 ， 掌 
握 网 站 每 天 耳 、PV、 来 路 、 关 键 词 等 信息 变动 。 下 面 通过 例子 介绍 如 何 做 数据 分 析 。 | 

1. 通过 数据 分 析 做 精准 网 站 推广 

我 们 通过 申通 快递 网 站 数据 进行 说 明 ， 如 图 14.21 所 示 。 

从 图 14.21 可 以 看 到 申通 快递 的 流量 非常 之 大 ， 每 天 有 几 十 万 访问 量 ， 来 源 最 多 依次 为 淘宝 、 直 
接 输 入 网 址 、 京 东 等 , 那么 可 以 得 出 结论 , 申通 是 和 淘宝 有 合作 , 其 中 在 淘宝 物流 查询 中 , 淘宝 、paipai、 
京东 是 引用 了 申通 的 网 站 数据 。 

通过 逆向 思维 ， 假 如 用 户 同 时 注册 了 10 个 微 博 账号 ， 那 么 尝试 用 发 带 链接 的 文字 ， 通 过 一 段 时 
间 的 数据 观察 ， 发 现 如 果 有 两 个 微 博 的 来 路 最 多 ， 那 以 后 就 主攻 这 两 个 微 博 ， 这 样 避免 微 博 太 多 ， 其 
他 的 微 博 则 可 以 用 数据 同步 工具 同步 过 去 。 

对 于 一 些 digg 网 站 ， 一 旦 推荐 到 首页 ， 在 来 路 中 能 排 到 第 二 甚至 第 一 的 位 置 ， 流 量 能 够 很 快 提 
升 ， 查 看 哪 篇 文章 被 推荐 了 ， 以 后 就 在 这 类 digg 网 站 中 发 表 同 类 文章 。 

2. 通过 数据 分 析 做 精准 网 站 设计 

每 个 统计 工具 下 面 都 有 个 访问 者 信息 ， 包 含 着 访客 的 浏览 深度 、 操 作 系 统 、 用 的 什么 浏览 器 、 屏 
幕 是 多 大 的 ， 如 图 14.22 所 示 。 

















通过 以 上 数据 分 析 得 出 ， 访 客 依然 有 70% 为 正 内 核 ，IE6 用 户 仍然 占据 41% 的 比例 。 因 此 ， 在 
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[ 列 | 细 | 史 ] ww. hao123. com [60] seo 5630 3. 允 ee i | 
[ 列 | 甸 | 史 ] www. sto. en [60] seo 1820 1.1% Chrome 6.0.472. 59, Saferi 534.3 上 ! 
[ 列 | 甸 | 史 ] Son Se. com [G0] sso 。 1095 0.7% NSIE 6 0, MAXTHON 2.0 125 0.6% ! 
[ 列 关 | 史 ] ww sa 1023 0.6% WSIE 7.0, TeneentTreveler 4.0 M0 O07% | 
品 搂 | 史 ] ww T23 0.4% ‘I 6.0, 08 0.6% ! 
[ 列 | 雏 | 史 ] ww sogou com [60] seo T15 0.4% se 区 | 
组 | 史 ] www_ kiees, en [60] seo 618 0.4% | 
El Maxthon 3 0.Safuri 533.9 To Os% | 
图 14.21 申通 快递 网 站 流量 来 源 14.22 访客 所 用 浏览 器 统计 | 

| 

人 
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网 站 设计 时 ， 最 好 在 下 6 环境 下 制作 ， 正 7、IE8、 火 狐 为 测试 环境 。 通 过 数据 分 析 ， 应 该 清楚 认识 到 
网 页 是 为 客户 设计 的 ， 而 不 是 为 自己 或 者 技术 标准 设计 的 ， 这 时 如 果 用 户 放弃 对 IE6 的 支持 ， 那 么 对 
于 流量 的 影响 将 不 堪 设 想 。 

访客 的 屏幕 大 小 、 所 在 地 点 、 接 入 商都 是 很 有 用 的 数据 ， 知 道 那个 运营 商 访客 最 多 ， 就 能 清楚 是 


| 把 博客 主线 路 放 入 电信 还 是 联通 线路 ， 甚 至 是 把 网 站 放 在 用 户 最 多 的 城市 。 


3. 通过 数据 分 析 做 SEO 优化 
例如 ， 如 果 网 站 的 某 一 篇 文章 获得 了 很 好 排名 ， 并 且 带 来 不 少 流 量 ， 但 随 着 时 间 推移 ， 排 名 慢 慢 
掉 下 去 了 ， 这 时 可 以 看 看 流量 统计 中 的 关键 词 搜索 量 ， 看 看 哪些 流量 是 通过 这 篇 文章 来 的 。 为 了 稳固 
这 个 排名 ， 应 该 有 周期 性 的 ， 适 当 给 这 篇 文章 增加 些 外 链 。 
容 提示 : 网 上 免费 统计 工具 比较 多 ， 大 家 在 用 的 一 定 就 是 自己 要 用 的 。 例 如 ， 在 网 站 中 放 入 51la 
和 Google Analytics 两 个 统计 工具 ，51la 的 数据 统计 很 宽泛 ， 什 么 都 包含 ， 但 不 精准 ， 而 
Google Analytics 分 析 数据 的 参数 能 力 很 强 。 


14.17 网 站 SEO 优化 


SEO 是 一 项 长 期 而 枯燥 的 工作 ， 有 时 甚至 需要 几 个 月 才能 看 到 效果 ， 必 须 坚 持 做 下 去 : 耐心 + 细 
心 = 合 格 的 SEO。 
影响 SEO 效果 的 因素 很 多 ， 把 已 知 的 因素 克服 挤 ， 解 决 掉 就 够 了 ， 千 万 不 要 为 了 SEO 而 SEO， 


| SEO 是 技术 ， 更 是 艺术 ， 让 搜索 引擎 觉察 不 出 网 站 经 过 SEO， 才 是 最 强 、 最 好 的 ， 别 让 搜索 引擎 找 


到 SEO 的 毛病 。 自 然 SEO 才 是 SEO 的 最 高 境界 ， 看 似 很 难 却 很 简单 。 具 体 要 点 和 步骤 如 下 : 

第 1 步 ， 准 备 个 好 域名 。 

回 ”尽量 在 5 位 数 以 内 ， 方 便 用 户 识别 记忆 。 

回 ”尽量 用 项 级 的 域名 ， 有 利于 搜索 排名 。 

回 ”做 中 文 站 最 好 用 拼音 注册 ， 符 合 中 国人 的 拼写 习惯 。 

回 ”域名 的 安全 性 ， 最 好 选择 有 些 权威 的 注册 商 。 

回 ”好 域名 或 者 说 主 域名 最 好 注册 3 年 以 上 ， 因 为 百度 在 扒 正规 站 的 时 候 ， 会 看 这 些 资料 。 

第 2 步 ， 网 站 空间 很 重要 。 

加 ”打开 速度 慢 ， 会 失去 50% 以 上 的 流量 。 

回 不 要 挂 弹 窗 ， 弹 窗 代码 越 强 ，PV 越 低 。 

回 “” 别 让 搜索 引擎 感觉 网 站 很 慢 ， 它 没有 时 间 等 待 ， 对 用 户 体验 也 同样 重要 。 

回 ”空间 选择 规律 是 : 2000IP 下 虚拟 主机 、10000IP 下 VPS 主机 、 上 万 了 P 使 用 服务 器 。 

第 3 步 ， 网 站 程序 并 发 布 少 而 精 的 网 站 内 容 。 

回 “不 求 程序 功能 强大 ， 但 求 程序 速度 快 。 不 要 用 采集 功能 ， 发 布 大 量 垃圾 信息 ， 要 手工 发 布 
与 网 站 主题 密切 相关 的 精 选 内 容 。 

回 ”内容 要 少 而 精 ， 并 做 底 调 优化 。 

回 ”优化 的 基本 出 发 点 是 不 被 引擎 封 站 ， 优 化 的 目的 是 增加 引擎 有 效 收 录 量 。 经 过 认真 做 好 以 
上 要 点 ， 网 站 就 会 有 珍贵 的 初期 流量 。 

第 4 步 ， 网 站 美工 也 一 定 要 符合 自己 网 站 的 类 型 ， 现 在 网 站 模板 到 处 都 是 。 
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第 5 步 ， 刷 流量 ， 提 高 alexa 排名 : 要 想 获 得 更 大 的 流量 ， 就 需要 网 站 本 身 要 有 流量 。 引 擎 喜欢 | 


流量 大 、 排 名 高 的 网 站 。 新 站 引擎 收录 量 少 得 可 怜 ， 我 们 就 可 以 采用 刷 流量 的 办 法 。 操 作 要 点 。 
刷 出 的 流量 要 稳定 。 


建议 刷 到 alexa 排名 20 万 左右 为 止 ， 坚 决 不 能 刷 出 排名 10W 以 内 。 以 免 被 alexa 封闭 。 据 | 


观察 ，alexa 不 关心 20 万 以 外 的 网 站 ， 就 算 刷 站 ， 它 也 不 会 惩罚 。 所 以 刷 到 20 万 左右 是 比 
较 安 全 的 。 

第 6 步 ， 不 要 频繁 改版 ， 搜 索引 擎 会 认为 网 站 不 可 靠 。 

第 7 步 ， 坚 持 更 新 内 容 。 

有 了 内 容 、 有 了 排名 ， 引 擎 自然 经 常会 光顾 你 的 网 站 。 排 名 接近 10 万 的 时 候 ， 仅 百度 收录 页 面 

数 应 该 能 达到 2~3 万 。 建 议 每 天 更 新 至 少 10 篇 ， 最 多 不 超过 800 篇 的 内 容 。 这 时 会 发 现 ， 每 隔 几 天 ， 
流量 就 翻 翻 。 
最 好 发 原创 内 容 。 
如 果 是 采集 的 ， 也 不 要 直接 发 布 ， 一 定 要 做 一 些 改动 后 再 发 布 。 例 如 ， 修 改 标题 、 重 新 排 
版 ， 把 长 标题 改 成 简洁 的 标题 等 。 引 擎 喜欢 原创 ， 这 样 做 的 目的 ， 就 是 让 引擎 认为 你 的 内 
容 是 原创 。 不 要 是 100% 克 隆 。 这 也 是 保证 不 被 引擎 封闭 的 重要 保证 。 
第 8 步 ， 添 加 网 页 标题 〈title) 。 一 是 简单 ， 二 是 简洁 (在 20 字 内 ) 。 
第 9 步 ， 添 加 描述 性 meta 标签 。 
要 合理 添加 meta 标签 ， 很 多 搜索 引擎 是 依据 它 来 排名 的 。 
百度 比较 偏重 于 keywords 标签 ， 切 记 不 可 多 ， 关 键 的 三 五 就 好 了 。 切 记 不 要 重复 关键 字 。 
而 Google 比较 偏重 于 description 标签 ， 描 述 要 符合 网 站 的 内 容 ， 最 好 在 20 字 以 内 。 
第 10 步 ， 在 网 页 粗 体 文字 〈 一 般 为 文章 标题 ) 中 也 填 上 关键 词 。 
第 11 步 ， 确 保 在 网 页 正文 第 一 段 中 就 出 现 关键 词 。 
第 12 步 ， 导 航 设 计 要 易于 搜索 引擎 搜索 。 可 以 用 热门 关键 字 作 栏 目 。 
第 13 步 ， 网 站 导航 : 网 站 导航 要 易于 使 用 。 要 确保 新 访问 者 能 够 通过 网 站 导航 简单 、 方 便 、 快 
速 地 找到 他 所 要 的 内 容 。 

第 14 步 ， 标 题 : 正确 使 用 栏目 标题 ， 也 可 产生 意 想不到 的 效果 。hl 标签 是 很 重要 的 ， 尽 量 用 一 
些 网 站 关键 词 。 

第 15 步 ， 搜 索 框 : 如 果 没 有 一 个 搜索 框 ， 建 议 最 好 加 一 个 ， 导 航 有 时 是 不 够 用 的 。 加 一 个 搜索 
框 可 能 要 很 久 ， 但 如 果 在 网 站 上 加 入 Google 搜索 框 这 种 第 三 方 搜索 框 却 是 很 快 的 。 

第 16 步 ， 不 要 引导 : 把 网 站 上 所 有 的 “点 击 这 里 ”都 改 掉 ， 访 问 者 不 会 通过 点 击 “ 点 击 这 里 ” 
来 了 解 里 面 的 内 容 ， 最 好 用 “下 载 站 长 ”或 “每 个 月 的 文章 归档 ”等 代替 “点 击 这 里 ”。 

第 17 步 ，Title & Alt Attributes: 如 果 还 没有 使 用 它 ， 最 好 使 用 ， 并 把 它 加 入 导航 页 等 一 切 页 面 。 
即 title 和 alt 说 明 ， 用 于 图 片 和 链接 。 

第 18 步 ， 网 站 的 通用 性 。 

如 果 网 站 上 有 一 些 不 好 的 代码 ， 例 如 ， 设 置 浏 览 器 窗口 大 小 、 在 新 的 窗口 打开 新 的 页 面 等 ， 这 可 
E 会 使 访问 者 感到 反感 ， 最 好 去 掉 。 检 查 网 站 在 不 同 的 浏览 器 下 的 显示 是 否 正常 。 

第 19 步 ， 不 用 大 量 的 图 片 组 成 首页 。 





回 ”任何 一 个 搜索 引擎 都 喜欢 结构 明显 ， 而 不 喜欢 把 页 面 做 成 一 张 皮 ， 让 搜索 引擎 分 不 清 重 点 | 


所 在 。 
考虑 到 网 络 速度 因素 ， 不 是 每 个 访客 的 网 络 都 很 快 。 
第 20 步 ， 不 要 把 首页 做 成 Flash。 
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真正 的 搜索 引擎 对 图 片 的 识别 能 力 很 差 ， 首 页 做 成 Flash， 不 仅 不 利于 搜索 引擎 排名 ， 而 且 还 减 
慢 了 进入 主页 的 速度 ， 在 一 定 程度 上 为 客户 尽快 找到 网 站 设置 了 障碍 。 
第 21 步 ， 不 要 把 导航 做 成 图 片 链接 。 
国内 | 因为 搜索 引擎 是 一 个 很 大 的 数据 库 ， 而 不 是 一 个 图 片 库 , 搜索 引擎 首页 搜索 引擎 到 的 是 网 站 的 标 
| 题 ， 接着 才 通过 网 站 的 导航 系统 搜索 网 站 其 他 内 页 ， 所 以 如 果 网 站 导航 是 文字 连接 ， 搜 索引 擎 就 很 容 
pte | 易 搜索 到 其 他 页 面 ， 如 果 是 图 片 链接 则 不 能 达到 这 个 效果 。 
| 第 22 步 ， 隐 私信 息 : 在 页 面 底部 加 上 声明 ， 对 客户 信息 、 网 友信 息 给 予 隐私 保护 ， 显 示 网 站 比 
| 较 正规 ， 尽 管 你 的 网 站 是 一 个 个 人 小 站 ， 但 是 加 上 这 条 不 妨碍 Google 看 重 你 。 
第 23 步 ， 主 体 信息 完备 :如 关于 我 们 ， 内 容 尽量 详细 ， 有 利于 网 站 对 于 搜索 引擎 的 可 信 度 。 
第 24 步 ， 网 站 及 时 备案 : 获得 ICP 的 备案 许可 ,搜索 引擎 会 针对 当地 的 法 律 法 规 进行 计算 设计 。 
第 25 步 ， 联 系 方式 信息 : 详细、 完整 的 联系 方式 ， 搜 索引 擎 也 可 以 看 到 网 站 的 联系 方式 。 
第 26 步 ， 版 权 信息 : 最 好 写 上 ，Google 比较 重视 有 版 权 信息 的 网 站 。 
| 第 27 步 ,robots.txt 设置 关于 robots-tst 文件 的 设置 也 需要 注意 ， 有 些 死 目录 就 别 让 搜索 搜 出 来 
| 了 ， 这 样 会 导致 出 现 死 连接 。 
| 第 28 步 ， 标题， 在 各 个 页 面 检查 相关 但 不 相同 的 标题 tag) ， 检 查 它们 是 不 是 简短 并 能 够 表达 
| 文章 的 内 容 。 
第 29 步 ， 外 部 链接 ， 每 一 个 内 容 页 面 都 应 该 链接 一 两 个 该 关键 字 的 有 名 大 站 ， 要 注意 的 是 链接 
的 方式 ， 要 先 写 出 关键 字 ， 再 将 这 个 关键 字 直 接 链接 到 该 站 台 。 
第 30 步 ， 内 部 链接 ， 网 站 里 面 可 能 有 很 多 内 容 ， 确 定 同类 内 容 互 相 链接 ， 而 不 同类 内 容 千 万 不 
要 互相 链接 。 例 如 ， 讲 食品 的 页 面 请 链接 到 讲 水 果 的 页 面 。 
同类 内 容 的 内 部 链接 可 以 让 Google 的 pagerank 在 网 页 里 互相 传递 ,如果 只 对 个 别 网 页 作 最 佳 化 ， 
有 可 能 会 发 生 的 情况 是 ， 网 站 里 只 有 少数 几 个 页 面 的 排名 可 以 往 前 ， 但 是 若是 做 好 内 部 链接 的 话 ， 可 
以 让 每 个 网 页 的 排名 都 靠 前 。 
第 31 步 ， 加 强 关键 词 ， 加 强 一 些 关 键 词 和 短语 ， 加 上 一 些 特别 的 标签 ， 如 加 粗 字体 和 斜体 ， 不 
过 这 也 不 能 使 用 得 过 于 频繁 。 
第 32 步 ， 关 键 字 放置 位 置 。 
关键 字 密 度 以 及 关键 字 放置 位 置 ， 拿 出 自己 的 关键 字 , 在 下 列 6 个 地 方 各 使 用 一 次 。 标题 、meta 
标签 、 网 址 里 面 、 粗 体 关键 字 、 斜体 关键 字 、 页 面 上 半 部 (网 页 内 容 比较 前 面 的 地 方 ,建议 用 个 标题 ) ， 
具体 描述 如 下 。 
标题 标记 : < title> 文 本 < /title> 
meta 标记 : < meta name="description" c> 


加 


< meta name="keywords" c> 

大 标题 标记 : < hl> 文 本 < /h1> 等 

链接 标记 : <a hre 全 [url=http://www.uusem.comy/index.php]jhttp://www.uusem.comyindex.php 
[Ar]> 文 本 

网 页 正文 < body> 文 本 < /body> 

alt 标记 : < img src="1.gif' border=0 alt=" 关 键 字 "> 

注释 标记 : < !-- 文 本 --> 

输入 标记 : < input type="hidden" name="hidden" value=" 关 键 字 "> 

网 址 :http://www. 关 键 字 .com/ 关 键 字 .htm 


加 加 加 加 


加 回回 四 加 
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交 提示 不 要 过 度 优化 ， 搜 索引 掌 会 认为 作 奠 。 小 则 降 权 ， 严 重 者 封 站 . 
第 33 步 ， 确 认 网 站 的 每 一 页 都 可 以 被 搜索 引擎 索引 进去 ， 网 站 里 的 链接 要 做 好 。 另 外 ， 在 网 站 


还 没有 完善 时 ， 不 要 让 网 站 上 线 ， 如 果 随 便 让 自己 的 建设 中 的 网 站 进入 搜索 引擎 ， 并 且 被 打 了 低 分 之 | 


后 ， 要 让 分 数 上 升 就 不 是 那么 容易 了 。 
14.18 超越 SEO 竞争 对 手 


在 SEO 搜索 引擎 优化 中 ， 对 竞争 对 手 网 站 的 分 析 ， 是 每 一 个 SEO 工作 者 应 该 熟知 的 内 容 。 在 一 
个 行业 中 ， 是 不 是 总 感觉 几 个 网 站 排名 都 是 那么 好 ， 我 们 怎么 做 都 觉得 无 法 超越 。 当 自己 在 做 网 站 的 
过 程 中 ， 是 否 对 竞争 对 手 的 网 站 进行 分 析 ， 如 何 有 效 把 握 竞争 对 手 的 优化 手法 呢 ? 


14.18.1 选择 恰当 的 竞争 对 手 


做 SEO 第 一 点 就 是 要 找到 竞争 对 手 ， 如 果 连 谁 是 自己 真正 的 竞争 对 手 都 不 知道 的 话 ， 那 怎么 能 
做 到 知己 知 彼 呢 ? 

选择 竞争 对 手 是 有 技巧 的 ， 不 是 盲目 选择 ， 当 然 不 同类 型 的 网 站 ， 对 手 的 选择 也 略 有 侧重 。 

侧重 技术 的 个 人 站 点 

选择 那些 比 自己 排名 高 出 很 多 的 网 站 并 不 合适 。 选 择 好 竞争 对 手 的 时 候 ， 首 先 要 观察 一 下 竞争 对 
手 的 网 页 PR 值 ， 再 用 雅虎 查 下 对 手 网 站 的 反 向 链接 数量 ， 看 看 是 否 外 链 数量 很 多 ， 且 PR 很 高 ， 干 
万 不 要 选择 这 样 的 竞争 对 手 。 由 于 外 链 资源 比较 强 ， 不 做 SEO， 不 做 内 容 ， 随 便 写 几 个 字 的 文章 或 者 
转载 文章 都 比 其 他 网 站 排名 靠 前 。 外 链 在 SEO 中 的 作用 是 比较 明显 的 ， 至 少 目前 搜索 引擎 很 重视 一 
个 网 站 的 外 链 。 

选择 的 竞争 对 手 太 强 ， 只 会 让 自己 对 SEO 技术 失去 信心 ， 对 SEO 效果 产生 迷茫 ， 选 择 合适 的 竞 
争 对 手 不 但 可 以 帮助 自己 更 快 地 了 解 网 站 的 不 足 之 处 ， 还 可 以 逐步 提升 网 站 的 竞争 力 。 

懂得 分 析 网 站 是 否 有 SEO 技术 成 分 ， 但 不 一 定 可 以 让 自己 稳 超 竞争 对 手 ， 至 少 可 以 清楚 看 到 自 
己 网 站 哪些 地 方 优化 的 不 足 ， 做 的 不 够 ， 把 自己 网 站 已 知 的 不 足 做 好 ， 加 上 外 链 ， 加 上 内 容 的 资源 的 
整合 ， 相 信 网 站 做 任何 一 个 关键 词 ， 网 站 排名 都 不 会 很 低 ， 搜 索引 擎 给 网 站 的 权重 高 了 ， 做 什么 关键 
词 都 易如反掌 ， 要 是 搜索 引擎 看 不 起 网 站 ， 那 再 怎么 SEO 都 是 白费 时 间 。 

侧重 营销 的 商业 站 点 

确定 一 个 竞争 对 手 ， 相 信 在 大 多 数 的 行业 中 ， 都 是 非常 容易 的 事 儿 。 然 而 ， 在 其 他 情况 下 ， 确 定 
竞争 对 手 就 不 是 那么 容易 。 竞 争 对 手 可 能 是 自己 的 主要 关键 词 排名 的 网 站 ,或 者 是 直接 长 尾 关 键 词 的 
竞争 对 手 的 网 站 ， 因 此 竞争 对 手 可 能 是 一 个 很 长 的 名 单 。 很 明显 我 们 不 能 监视 所 有 的 人 。 

在 百度 中 执行 搜索 ， 检 索 自 己 的 目标 关键 词 ， 在 弹出 的 搜索 结果 中 显示 的 网 站 /公司 的 名 单 。 我 
们 可 以 认为 这 些 是 自己 的 主要 竞争 对 手 。 


14.18.2 ”竞争 对 手 分 析 步 又 


【操作 步骤 】 
第 1 步 ， 网 站 初步 分 析 。 
当 确 定 了 一 个 竞争 对 手 之 后 ,第 一 步 要 做 的 就 是 进入 他 的 网 站 ， 并 对 网 站 进行 简单 的 分 析 ， 看 一 
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万 
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ge 下 设计 和 与 网 站 过 向 从 入 门 到 将 通 
看 网 站 是 否 是 一 个 专业 的 设计 网 站 ， 或 是 直接 用 CMS 模板 设计 的 网 站 。 

再 看 网 站 是 否 有 大 量 的 内 容 , 以 及 其 网 站 的 内 容 质 量 如 何 , 网 站 是 否 是 使 用 了 况 态 或 动态 的 URL， 
这 些 是 基本 的 现场 检查 。 

简单 的 分 析 之 后 ， 竞 争 对 手 网 站 就 可 以 传递 出 很 多 有 价值 的 东西 ， 将 这 些 内 容 进行 记录 。 然 后 再 


| 进入 其 他 竞争 对 手 的 网 站 ， 对 他 也 进行 同样 的 分 析 ， 得 出 结论 ， 并 根据 他 们 的 网 站 简单 分 析 ， 来 看 一 


看 自己 的 网 站 。 

完成 这 些 简单 分 析 之 后 ， 就 应 该 对 竞争 对 手 进行 全 面 分 析 了 。 

第 2 步 ， 分 析 竞 争 对 手 使 用 的 关键 词 。 

关键 词 的 排名 表现 ， 是 SEO 能 够 成 功 的 最 重要 的 决定 性 因素 。 那 么 用 户 就 应 该 去 分 析 竞 争 对 手 
正在 使 用 哪些 正确 的 关键 词 ， 并 且 这 些 关 键 词 在 搜索 引擎 中 都 有 很 好 的 排名 。 

然后 ， 对 竞争 对 手 网 站 的 关键 词 进 行 分 析 ， 看 关键 词 在 做 排名 优化 时 ， 是 否 会 存在 一 定 的 难度 。 
对 于 关键 词 进 行 分 析 ， 看 百度 首页 中 ， 这些 网 站 关键 词 的 竞争 ， 以 及 单个 关键 词 是 否 可 以 在 短期 内 优 
化 到 首页 ， 如 果 自 己 来 做 这 个 关键 词 ， 会 怎么 做 ， 又 怎么 能 在 几 个 月 内 将 这 些 关键 词 排 到 百度 首页 。 

当 感 觉 这 个 关键 词 对 于 个 人 网 站 比较 重要 , 那么 就 要 对 这 个 关键 词 在 竞争 对 手 网 站 中 如 何 布局 进 
行 更 直接 的 分 析 。 再 看 对 手 网 站 中 的 长 尾 关 键 词 是 如 何 进行 布局 的 ， 比 较 自己 与 竞争 对 手 的 区 别 在 什 
么 地 方 。 

容 提示 : 用 户 可 以 使 用 网 站 关键 词 建议 工具 来 检查 哪些 关键 词 应 该 为 自己 的 网 站 做 的 很 好 ， 在 做 检 
查 时 ， 可 能 会 发 现 自 己 跳 过 了 很 多 有 用 的 关键 词 ， 并 开始 优化 自己 的 网 站 。 
还 应 该 检查 竞争 对 手 的 关键 词 的 密度 .此 外 ,不 要 忘 了 检查 关键 词 的 位 置 ， 如 标题 、 标 签 、 
图 像 标签 、 链 接 等 。 不 同 的 关键 词 ， 不 同 的 长 尾 ， 都 要 进行 不 同 的 分 析 和 检测 。 根 据 对 手 
内 容 来 确定 自己 的 关键 词 应 该 如 何 去 布 局 。 

第 3 步 ， 检 查 竞争 对 手 的 反 向 链接 。 

良好 的 搜索 引擎 优化 排名 , 反 向 链接 起 着 决定 性 作用 。 这 就 是 为 什么 需要 彻底 检查 竞争 对 手 的 反 
向 链接 。 看 他 们 的 数量 和 来 源 、 锚 文本 等 ， 你 会 得 到 竞争 对 手 正在 做 这 方面 的 线索 。 

很 多 时 候 ， 可 能 会 得 到 一 些 反 向 链接 的 思路 ， 也 就 是 说 ， 如 果 看 到 竞争 对 手 有 流行 的 网 站 的 反 向 
链接 ， 而 自己 却 不 知道 ， 如 果 你 可 以 从 他 们 那里 获得 反 向 链接 ， 那 么 可 以 与 网 站 管理 员 进行 联系 ,看 
他 们 是 如 何 做 到 的 。 

对 于 竞争 对 手 网 站 的 反 向 锚 文本 链 和 反 向 链接 分 析 ， 我 们 可 以 使 用 百度 外 链 工 具 进行 检测 和 查 


| 找 ， 并 根据 竞争 对 手 发 布 的 外 链 ， 来 完成 自己 网 站 的 外 链 建设 。 


将 外 部 链接 的 这 部 分 做 得 比 竞争 对 手 更 好 ， 然 后 再 从 内 容 出 发 ， 让 自己 的 网 站 更 加 的 利于 用 户 。 

第 4 步 ， 检 查 其 他 SEO 因素 。 

关键 词 和 反 向 链接 是 很 重要 的 ， 但 并 不 能 代表 一 切 。 为 了 彻底 了 解 竞争 对 手 如 何 排名 ， 还 需要 检 
查 他 的 网 页 排名 在 谷歌 和 其 他 引擎 中 的 表现 ， 如 雅虎 、Bing、 搜 狗 、 搜 搜 等 。 应 该 看 看 竞争 对 手 的 网 
站 与 搜索 引擎 索引 的 网 页 数量 ， 从 不 同 的 角度 对 其 网 站 进行 分 析 。 

第 5 步 ， 评 估 竞 争 对 手 在 社会 化 媒体 中 的 存在 。 

社会 化 媒体 往往 会 带动 大 量 的 流量 到 一 个 网 站 。 这 就 是 为 什么 不 能 跳 过 竞争 对 手 的 原因 。 如 何在 
社会 化 中 留 下 自己 的 网 站 内 容 或 是 链接 呢 ? 

这 对 于 一 些 新 的 网 站 来 说 比较 难 ， 但 只 要 肯 努 力 ， 相 信和 是 可 以 做 到 的 。 社 会 书签 网 站 是 一 个 社会 
化 媒体 的 类 型 ， 用 户 可 以 去 研究 。 在 一 些 重大 的 社会 书签 网 站 看 看 ， 看 看 竞争 对 手 受 欢迎 程度 如 何 。 
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第 14 章 网 站 推广 和 SEO 





第 6 步 ， 分 析 竞 争 对 手 正 在 使 用 的 PPC 广告， 如 谷歌 的 Adwords PPC、 百 度 推 广 、 搜 狗 推广 等 。 

使 用 好 谷歌 的 Adwords (谷歌 的 竞争 分 析 工 具 ) 。 它 可 以 比较 PPC 以 及 竞争 对 手 的 活动 。 分 析 
竞争 对 手 的 不 同 流量 来 源 ， 看 他 的 网 站 在 其 他 的 网 站 或 是 媒体 是 否 有 广告 。 如 果 有 ， 就 可 以 很 好 地 确 
定 超越 方法 ， 或 是 追赶 方法 。 

第 7 步 ， 分 析 竞 争 对 手 的 变化 ， 以 及 内 部 链接 的 建设 。 

第 8 步 ， 研 究 对 手 的 SEO 手法 ， 根 据 他 们 的 手法 来 完善 自己 网 站 的 优化 手法 。 

第 9 步 ， 去 竞争 对 手 网 站 进行 用 户 体验 度 检测 。 


14.18.3 ”竞争 对 手 策略 分 析 


SEO 竞争 对 手 策略 分 析 一 般 可 以 由 如 下 几 个 环节 来 展开 。 

1，whois 信息 

简单 来 说 , whois 就 是 一 个 用 来 查询 域名 是 否 已 经 被 注册 , 以 及 注册 域名 的 详细 信息 的 数据 库 (如 
域名 所 有 人 、 域 名 注册 商 、 域 名 注册 日 期 和 过 期 日 期 等 ) 。 通 过 whois 来 实现 对 域名 信息 的 查询 。 判 
断 对 手 网 站 域名 注册 时 间 以 及 相关 的 域名 的 历史 。 





一 般 来 说 ， 一 个 老 的 域名 ， 一 次 注册 几 年 的 网 站 在 搜索 引擎 中 会 有 一 个 相对 较 高 的 权重 。 具 体 查 | 


询 地 址 : http://whois.chinaz.com/。 

2. PageRank 

虽然 PR 对 网 站 排名 的 作用 在 减 小 ，PR 已 经 不 重要 ， 虽 然 现在 通过 301、URL 转发 等 手段 可 以 
劫持 网 站 的 PR 值 ， 以 获得 较 高 的 PR 值 ， 网 页 级 别 高 有 时 也 同样 不 能 说 明 网 页 与 关键 词 相关 ， 甚 至 
有 时 并 不 代表 你 的 网 页 有 多 重要 。 

不 过 对 于 SEO 来 说 ， 网 页 PR 还 是 很 重要 的 ， 最 起 码 它 定义 了 一 个 标准 的 衡量 指标 ， 某 种 意义 上 
它 起 着 门槛 的 作用 。 也 就 是 说 这 是 个 硬性 指标 ， 有 总 比 没有 好 ，PR 虽然 不 是 万 能 的 ， 但 是 没 PR 万 
万 不 能 ， 所 以 PR 还 是 要 作为 一 个 参考 标准 的 。PR 查询 地 址 :http://pr.chinaz.com/。 


3， 搜 索引 擎 收录 


查询 竞争 对 手 网 站 在 搜索 引擎 中 的 收录 页 面 ,以 及 自己 网 站 定位 相关 的 关键 词 排名 情况 ， 以 及 具 
体 网 站 的 更 新 频率 ， 包 括 网 页 更 新 时 间 ， 网 站 内 容 文章 是 否 保持 更 新 。 

记 住 如 果 竞争 对 手 比较 勤快 ， 那 么 就 很 可 怕 ， 为 此 必须 要 比 对 手 再 勤快 20%， 才 有 可 能 超越 他 ， 
所 以 分 析 网 站 的 收录 问题 尤为 重要 。 


4 竞争 对 手 网 站 的 内 链 和 外 链 


在 搜索 引擎 排名 算法 机 制 中 ,链接 可 以 比喻 为 投票 。 外 部 链接 就 是 网 站 之 间 的 互相 投票 ， 而 内 部 | 
链接 则 代表 了 网 站 内 的 各 页 面 互相 投票 。 外 部 链接 可 以 提高 网 站 权威 、 排 名 靠 前 ， 而 内 部 链接 主要 是 | 


看 网 站 的 内 部 链接 的 结构 是 否 合理 ， 内 部 链接 优化 ， 就 是 在 用 户 友 好 的 基础 上 ， 不 断 在 页 面 内 添加 文 
字 链 接 。 

一 个 好 的 网 站 应 该 是 网 站 的 权重 四 通 八 达 的 传递 , 这 样 页 面 之 间 的 内 部 链接 互相 投票 、 互 相传 弟 
权威 度 。 外 链 主要 看 数量 和 质量 是 否 优 质 , 再 加 上 适当 地 导出 链接 即 可 。 因此, 用户 在 做 友情 链接 时 ， 
可 以 顺 着 友情 网 站 去 找 友情 链接 ， 这 样 能 够 减少 工作 时 间 ， 也 更 有 效率 一 点 。 

5. 网 站 分 析 

分 析 对 手 的 网 站 的 整体 结构 框架 ， 页 面 设计 是 否 符合 用 户 体验 ， 目 录 的 深浅 ,网 站 各 栏目 内 容 相 
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砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


关 性 ， 图 片 有 无 加 alt 标签 ， 代 码 是 否 精简 ， 栏 目 结构 是 否 清晰 ， 网 站 URL 是 否 静态 化 处 理 。 还 有 网 
站 的 域名 是 否 易于 品牌 识别 ， 空 间 是 否 稳定 ， 打 开 速 度 快 与 否 等 网 站 基础 原因 。 


容 提示 : 关于 URL 静态 化 是 目前 搜索 引擎 对 HTML 页 面 抓 取 速 度 较 之 ASP 或 PHP 等 其 他 动态 页 


到 | 面 快 。 


“Xote 国生 攻 


| 查看 竞争 对 手 的 文章 是 否 原创 , 基本 就 是 复制 文章 的 标题 去 百度 查看 是 否 抄袭 。 网 站 文章 内 容 原 
| 创 性 在 各 大 搜索 引擎 中 对 排名 的 影响 越 来 越 重 要 。 

7. keywords、 title、description 

首先 查看 关键 词 布 局 ， 如 果 一 个 网 站 的 关键 词 布 局 比较 好 ， 在 排名 上 具有 很 大 的 优势 ， 关 键 词 布 
局 包括 keywords 在 各 个 页 面 的 分 布 、keywords 出 现 频 率 、keywords 竞争 难 易 度 等 因素 。 

分 析 对 手 的 标题 是 否 具 有 竞争 优势 ， 标题 和 描述 写法 至 少 要 组 织 得 有 意义 , 顺带 融 进 一 到 两 个 主 
要 关键 词 为 佳 。 至 于 罗列 的 关键 词 有 罗列 的 好 处 ， 单 一 的 关键 词 有 单一 的 好 处 。 

8 用户 体验 

用 户 体验 就 是 让 多 数 访问 网 站 的 群体 在 最 短 的 时 间 内 找到 他 们 想 要 的 东西 ， 并 接受 它 。 具 体 包括 
以 下 4 点 。 

品牌 (branding) 。 

易 用 性 〈usability) 。 

功能 性 (functionality) 。 

内 容 (content) 。 

最 直接 的 做 法 就 是 简单 地 查看 竞争 对 手 网 站 是 否 有 产品 搜索 、 站 内 搜索 、 在 线 客服 、 留 言 系 统 、 
资质 荣誉 证 书 、 权 威 认证 。 网 络 使 所 有 东西 商品 化 ， 要 赢得 客户 关键 不 是 产品 ， 而 是 用 户 体验 ， 而 用 
户 体验 从 用 户 进 入 网 站 开始 ， 就 要 布局 好 ， 给 访客 以 信任 权威 的 感觉 。 这 些 都 是 最 基本 的 企业 SEO 
用 户 体验 的 要 求 。 

9， 网 站 的 口碑 

通过 与 客户 详 谈 ， 或 者 通过 百度 检索 ， 初 步 了 解 一 下 竞争 对 手 在 业界 的 口碑 ， 基 本 实力 ， 网 络 营 
销 的 力度 。 

10， 制 订 SEO 实施 计划 

结合 以 上 调研 的 结果 ， 制 订 出 一 份 针 对 竞争 对 手 的 SEO 优化 项 目 计划 ， 并 在 最 短 的 时 间 内 付 诸 
实行 。 当 然 计 划 是 死 的 ， 要 随时 保持 机 动 性 、 灵 活性 。 由 于 竞争 对 手 也 可 能 会 随时 根据 市 场 调整 SEO 
策略 ， 所 以 要 保持 对 竞争 对 手 网 站 各 方面 的 实时 监察 。 


14.18.4 ”竞争 对 手 页 面 分 析 
分 析 竞争 对 手 的 网 站 包括 很 多 方面 的 内 容 ， 本 节 重 点 介绍 如 何 分 析 竞 争 对 手 首页 源 代码 。 


【操作 步骤 】 
| 第 1 步 ， 打开 对 手 网 站 首页 在 浏览 器 中 直接 右 击 浏览 的 网 页 ， 选 择 查看 原 代码 文件 ， 然 后 按照 
| 由 上 到 下 的 顺序 观察 首页 代码 。 


| 第 2 步 ， 观 察 整个 网 页 中 是 否 含有 HIl 标签 ， 这 是 一 个 字体 标签 ， 互 后 面 跟 的 数值 越 小 ， 表 示 的 
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好 
字体 越 大， 说 明 该 关键 词 越 重要 ， 一 般 用 HI 标签 的 关键 词 都 是 整个 网 站 核心 的 关键 词 。 注 意 一 下 ， 
页 面 中 是 否 用 HI 标签 去 描述 某 关 键 词 。 

第 3 步 ， 分 析 网 页 标题 title、keywords、description 标签 里 是 否 包含 关 键 词 ， 一 般 越 靠 前 的 那个 
词 越 重 要 ， 越 有 可 能 是 他 想 要 突出 的 关键 词 ， 也 有 可 能 是 一 句 短语 。 

具体 包含 了 哪个 关键 词 ， 用 户 可 以 通过 网 站 主题 内 容 去 分 析 ， 试 着 猜 一 下 该 网 站 的 关键 词 ， 一 般 
很 明显 就 能 看 出 来 ， 不 会 太 多 修饰 或 隐藏 。 








万 
) 





第 4 步 ， 再 往 下 看 ， 网 页 内 容 中 是 否 出 现 字体 标签 ， 如 加 粗 (B，》、 和 斜体 (I) 等 标签 ， 一 般 在 这 | 
些 标签 之 间 的 词 不 是 关键 词 ， 就 是 长 尾 关键 词 ， 如 何 区 分 可 以 根据 网 站 标题 适当 分 析 、 理 解 。 一 般 这 | 


些 标签 在 首页 出 现 的 几率 不 会 太 高 ， 甚 至 没有 。 
第 5 步 ， 注 意 一 下 网 页 内 容 中 是 否 含有 图 片 ， 一 般 图 片 都 会 用 注释 alt 属性 ， 观 察 是 否 含有 与 网 
站 标题 ， 或 主题 相近 的 关键 词 或 长 尾 关键 词 ， 适 当 分 析 。 


容 提示 : 图 片 加 上 有 效 的 alt 注释 ， 对 SEO 是 不 错 的 做 法 ， 有 效 并 非 去 堆砌 关键 词 或 长 尾 关键 词 ， 
如 果 堆 砌 关键 词 ， 后 果 会 很 严重 。 


第 6 步 ， 看 一 下 首页 脚注 区 域 ， 如 网 站 备案 、 网 站 统计 条 等 ， 一 般 会 在 该 位 置 做 几 个 文字 链接 ， 
看 一 下 文字 链接 注释 标签 是 不 是 含有 关键 词 或 长 尾 关 键 词 ,仔细 找 一 定 会 发 现 什么 , 很 可 能 在 一 个 不 
起 眼 的 小 角落 。 

第 7 步 , 综合 观察 以 上 几 点 , 一 定 可 以 发 现 竞争 对 手 的 不 足 之 处 ， 对 手 没 有 优化 到 的 地 方 我 们 可 
以 去 做 ， 做 到 的 地 方 我 们 要 比 他 做 得 更 好 。 


14.19 长 尾 关 健 词 优化 


长 尾 关 键 词 是 指 网 站 上 非 目标 关键 词 , 但 也 可 以 带 来 搜索 流量 的 关键 词 。 长 尾 关 键 词 是 长 尾 理论 | 


在 关键 词 研究 上 的 延伸 。 长 尾 关 键 词 特征 : 词 比较 长 ， 往 往 是 两 三 个 单词 组 成 ， 甚 至 是 长 短语 ， 存 在 
于 内 容 页 面 ， 除 了 内 容 页 的 标题 ， 还 存在 于 内 容 中 ， 搜 索 量 非 常 少 ， 并 且 不 稳定 。 

长 尾 关 键 词 带 来 的 客户 ， 转 化 为 网 站 产品 客户 的 概率 比 目 标 关键 词 低 很 多 。 但 是 ， 如 果 存 在 大 量 
长 尾 关 键 词 的 网 站 ， 其 带 来 的 总 流量 是 非常 大 的 。 例 如 ， 目 标 关键 词 是 “服装 ”， 其 长 尾 关键 词 可 以 
是 “男士 服装 ”“ 冬 装 ”“ 户 外 运动 装 ” 等 。 

长 尾 关 键 词 基本 属性 : 可 延伸 性 ， 针 对 性 强 ， 范 围 广 。 

长 尾 具 有 两 个 特点 : 细 和 长 。 细 , 说 明 长 尾 是 份额 很 少 的 市 场 , 在 以 前 这 是 不 被 重视 的 市 场 ; 长 ， 
说 明 这 些 市 场 虽 小 , 但 数量 众多 。 众 多 的 微小 市 场 累积 起 来 就 会 占据 市 场 中 可 观 的 份额 ,这 就 是 长 尾 
的 思想 。 


14.19.1 ”如何 寻找 长 尾 关 健 词 


下 面 介绍 如 何 准确 找到 相关 长 尾 词 。 

利用 百度 相关 

在 百度 搜索 列表 底部 会 显示 相关 搜索 关键 词 ， 如 图 14.23 所 示 。 相 关 搜 索 的 长 尾 词 搜索 量 一 般 比 
较 大 ， 但 优化 的 难度 也 就 比较 难 。 
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vote | 14.23 ”相关 搜索 


回 ”利用 百度 竞价 账号 

| 通过 百度 竞价 账号 能 够 看 到 相关 关键 词 信息 , 这 是 非常 实用 的 工具 。 百度 竞价 账号 不 是 单单 用 来 

| 竞价 的 ， 还 是 一 个 关 健 词 分 析 工 具 。 但 一 般 人 是 无 法 使 用 的 ， 需 要 开通 账号 ， 费 用 比较 高 ， 一 般 需 要 

| 元 。 

| 长 尾 词 查询 工具 

| 利用 长 尾 词 专用 查询 工具 ， 也 可 以 获取 相关 长 尾 词 的 分 布 列 表 ， 如 图 14.24 所 示 。 当 然 ， 该 工具 
信息 一 般 更 新 速度 慢 ， 时 效 性 和 参考 价值 没有 百度 竞价 账号 显示 的 信息 准确 。 






回 结果 须 包 人 关键 滞后 用 过 流 保 站 查询 态 | 问 入 碍 光伏 帮 
输入 关键 词 每 行 一 词 吉海 [| [Et 


坟 查询 关 志 正在 查询 中 - 

















保存 路 径 [C \Documents snd SettingsWdr|| 浏览 














| 联想 词 列表 | | 过 渗 词 列表 | 洁 全 列表 
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口 ab 复制 全 部 闷 到 开 贴 板 “| 清 全 列表 


长 尾 词 : 212 条 图 
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14.24 长 尾 词 查询 工具 


爱 站 网 关键 词 挖掘 

| 爱 站 是 广大 站 长 喜欢 用 的 工具 ， 爱 站 关键 词 挖掘 与 百度 竞价 账号 的 功能 非常 相似 ， 甚 至 比 百度 竞 
| 价 的 还 多 了 个 搜索 量 ， 参 考 功能 更 强大 、 更 好 用 。 不 过 有 一 点 比 不 了 百度 竞价 账号 ， 爱 站 只 能 分 析 有 
| 搜索 指数 的 关 健 词 。 至 于 其 他 站 长 工具 的 关 健 词 ， 与 爱 站 网 提供 的 功能 差不多 ， 这 里 就 不 再 介绍 。 

| 


14.19.2 ”如 何 优化 长 尾 关 健 词 


| 站 外 长 尾 关 健 词 优化 
| 用户 可 以 利用 B2B、 分 类 信息 论坛 ,或 者 利用 发 文章 或 图 片 的 第 三 方 网 站 ， 有 钱 的 用 户 喜欢 使 用 
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< 
新 闻 门 户 发 文章 带 长 尾 词 ， 没 钱 的 可 以 自己 用 B2B、 论 坛 等 发 布 。 
一 般 来 说 ， 灰 色 行 业 永 远 是 技术 先驱 者 的 乐园 ， 做 SEOer 或 者 网 站 营销 都 应 该 长 期 关注 和 研究 
这 些 行业 ， 会 得 到 非常 多 的 最 新 优化 手法 。 
回 ”站 内 长 尾 关 健 词 优化 
例如 ， 一 个 关于 酒 桌 的 网 站 ， 经 过 一 周 打 理 后 ， 长 尾 词 从 原来 的 30 多 个 上 涨 到 现在 66 个 ， 增 涨 
一 倍 多 ， 如 图 14.25 所 示 。 


序号 关键 宁 指数 排名 收录 量 。 网 页 标题 


| 1 酒 提 上 的 开场 白 3 7 1760000 酒 复 上 的 开场 白 讨 来 说 语 活 ?_ 酒 复 交 化 礼仪 如 识 





酒泉 文化 194 9 1450000 酒 复 6log 一 中 国人 酒 鼠 上 的 殊 点 这 
酒 文 化 知识 193 9 ”2250000 酒 文化 | 酒 朱文 化 礼仪 如 识 _ 酒 梨 Blog 


2 
3 
4 酒 文 化 和 门 5 9 ”28100 。 泗 文 化 | 河 点 文化 礼仪 知识 _ 酒 翰 5log 

5 ”和 贪心 板 祝 酒 词 126 ”16 。 230000 和 领导 吃饭 祝酒 词 | 汪 点 上 的 客 套话 _ 酒 梨 文 化 礼仪 如 识 
6 

7 

8 

9 





请 领导 吃饭 祝酒 词 50 。 18 。 233000 ”和 领导 吃饭 祝酒 词 | 酒 扣 上 的 容 套话 _ 酒 上 文 化 礼仪 知识 











酒 昌 礼 仪 202 ”22 ”1380000 酒 各 Dl0e 一 中 国人 酒 各 上 的 琐 点 事 
| 酒 梨 上 的 笑话 1 ”22 1750000 潭 复 上 的 几 个 笑话 _ 酒 重文 化 礼仪 知识 
| 三 八 妇女 节 祝 泗 词 1 22 296000 三 入 妇 净 节 视 测 词 和 三 八 节 祝 词 - 漠 所 文化 礼仪 各 识 
| 10 酒 场 客 春 话 8 25 ”40100 。 -关注 酒 床上 的 礼仪 蜗 远 、 教 你 如 何况 客 套话 笑 笑 加 何 驯 | 
| 4 WH 225 ”26 ”1060000 劝 酒 词 | 酒 语 文化 礼仪 SiR_ 酒 不 Blog | 


| 12 洒 二 上 的 礼 人 。 292 27 。 1390000 漂 所 p10 一 中 国人 漂 所 上 的 于 点 事 
[3 孝王 词 541 ”30 ”1260000 文人 在 酒 此 上 的 客 套话 和 孝 泗 词 _ 酒 点 文化 礼仪 知识 





图 14.25 ”站 内 长 尾 关 健 词 优化 


仔细 观察 可 以 发 现 长 尾 词 对 应 着 标题 ， 所 以 在 整理 文章 、 优 化 长 尾 词 时 应 该 首先 优化 标题 ， 然 后 
再 把 文章 内 容 排版 好 。 一 个 网 站 想 要 做 大 量 的 长 尾 关 健 词 ， 就 应 有 大 量 的 内 容 来 支持 。 因 此 ， 对 于 站 
长 或 SEOer 来 说 ， 做 网 站 的 重点 应 该 花 在 建立 长 尾 词 和 文章 内 容 上 面 ， 而 不 是 发 外 链 。 


14.20 网 站 内 链 优化 策略 


网 站 优化 包括 两 种 : 站 外 优化 和 站 内 优化 ， 两 种 优化 对 于 网 站 的 排名 都 起 着 至 关 重 要 的 作用 。 站 
外 优化 主要 是 以 外 链 为 主 ， 用 户 可 以 去 各 大 论坛 、 网 站 投稿 获得 ,没有 太 多 的 技巧 性 。 但 内 链 就 不 同 
了 ， 它 在 任何 一 个 网 站 的 排名 中 都 有 着 非常 大 的 影响 力 ， 所 以 合理 地 规划 自己 网 站 的 内 链 网 络 ， 能 够 
让 自己 的 网 站 内 部 优化 效果 最 大 化 。 下 面具 体 介绍 如 何 去 做 好 内 链 工作 。 

1.， 勿 将 所 有 内 链 都 指向 主页 

对 于 很 多 新 手 站 长 而 言 ， 这 样 的 错误 并 不 少见 ， 也 是 网 站 内 部 优化 中 最 常见 的 问题 。 他 们 将 网 站 
的 所 有 内 链 统 统 指向 主页 ， 这样 做 的 目的 是 : 想 通 过 让 星 蛛 爬行 的 方式 快速 地 去 提升 主页 的 权重 。 所 
以 无 论 是 栏目 页 、 内 容 页 ， 只 要 能 添加 关键 词 的 ， 就 统统 指向 首页 。 

这 样 的 做 法 非但 对 网 站 排名 权重 有 帮助 ， 还 会 使 网 站 被 降 权 。 由 于 将 所 有 的 关键 词 都 指向 首页 ， 
当 蜘 蛛 每 朴 行 一 个 内 链 时 进入 的 都 是 一 个 页 面 ， 而 关键 词 不 同 ， 蜘 蛛 就 会 认为 这 是 一 种 欺骗 ， 欺 骗 的 
后 果 无 疑 就 是 网 站 遭 殉 ， 所 以 站 长 一 定 要 避免 这 样 的 低级 错误 。 


"551 





ns 


2. 内 链 适 可 而 止 、 非 多 多 益 善 


| 
| 很 多 站 长 都 喜欢 在 内 容 中 添加 很 多 的 锚 文本 内 链 进去 。 例 如 ， 美 文 类 站 点 有 很 多 的 分 类 栏目 ， 如 
| 情感 、 爱 情 、 伤 感 、 唯 美 、 故 事 等 ， 当 网 站 内 容 中 同时 出 现 这 些 关键 词 时 ， 站 长 们 会 选择 统统 进行 链 
食 拷 | 接 到 相关 的 栏目 。 以 为 这 样 又 不 是 链接 到 同一 个 页 面 ， 蜘 蛛 肯定 不 会 认为 是 欺骗 行为 ， 而 且 还 能 够 游 
| 览 ， 且 分 给 这 些 栏目 一 些 权重 。 
pte | 但 结果 并 非 如 愿 。 因 为 在 很 时 之前， 百度 站 长 平台 已 经 明确 表示 : 这 样 的 手法 属于 堆积 关键 词 作 
| 弊 ， 即 便 侥幸 能 够 在 短期 内 获得 不 错 的 权重 ， 但 终 将 会 被 搜索 引擎 处 罚 。 


3. 保证 所 链接 的 页 面具 有 相关 性 


当 我 们 添加 一 个 内 链 时 ， 首 先 要 考虑 的 是 : 所 链接 到 的 页 面 和 本 文 有 着 怎样 的 联系 ,是 否 具有 相 
关 性 ? 

如 果 你 是 访客 的 话 ， 看 完 本 文 之 后 ， 在 推荐 这 条 内 容 时 ， 你 会 点 击 查看 吗 ? 这 点 很 重要 。 并 不 是 
说 想 链接 就 去 链接 ， 完 全 没有 顾 号 用 户 体验 和 蜂 蛛 的 感受 ， 那么 这 样 做 的 内 链 没有 任何 意义 。 一 次 两 
次 没关系 ， 时 间 久 了 ， 网 站 内 链 网 络 就 会 变 得 一 团 糟 ， 蜂 蛛 在 仆 行 时 会 出 现 很 多 困惑 ， 自 然而 然 地 会 
影响 网 站 的 权重 评分 。 


4. 关键 词 锚 文 本 的 合理 分 配 


对 于 任何 网 站 而 言 ,除了 网 站 主题 的 关键 词 之 外 ,往往 还 会 给 网 站 栏目 、 内 容 增 加 一 些 长 尾 关键 
词 。 如 果 这 些 长 尾 关键 词 也 能 有 不 错 排名 的 话 ， 我 们 就 需要 让 星 蛛 知道 这 些 长 尾 关键 词 的 存在 ， 并 且 
能 够 让 蜂 蛛 通过 页 面 多 多 地 去 给 予 长 尾 关 键 词 页 面 一 些 权重 。 

这 时 就 需要 去 做 好 内 链 的 分 配 工 作 。 例 如 ， 在 求 答 网 http://www.qiudaw.com/ 中 ， 多 数 文章 尾部 
都 添加 一 些 相关 长 尾 关键 词 页 面 推荐 选项 , 这样 不 但 可 以 让 蜂 蛛 很 好 地 去 爬行 和 抓 取 ， 而 且 也 非常 利 
于 用 户 体验 。 

站 在 用 户 的 角度 ， 如 果 你 想 要 找 一 些 励志 的 故事 ， 当 打开 网 站 的 一 个 页 面 时 ， 阅 读 了 一 下 ， 感 觉 
内 容 不 错 ， 看 完 之 后 发 现下 面 还 有 一 些 相关 的 其 他 励志 故事 ， 那 么 这 个 时 候 可 能 会 去 点 击 相关 链接 。 

网 站 内 链 对 于 一 个 网 站 有 着 非常 重要 的 作用 ， 可 以 这 样 说 ， 它 左右 了 网 站 多 数 关键 词 的 排名 ， 也 
| 赋予 了 网 站 一 个 强大 的 “血脉 网 络 ”， 所 以 用 户 如 果 想 要 个 人 网 站 有 一 个 好 的 发 展 ， 那 么 就 要 注重 网 
站 内 链 工 作 , 做 一 个 合理 的 内 链 分 配 计划 , 并 且 去 加 强 网 站 自身 的 内 容 质 量 和 内 链 的 质量 。 只 有 这 样 ， 
你 的 网 站 才能 够 发 挥 内 部 优化 的 最 大 效果 。 
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安装 PHP 服务 器 


( 呀 视频 讲解 : 80 分 钟 ) 


在 本 地 系统 中 安装 PHP 服务 器 ， 需 要 安装 的 组 件 包括 以 下 方面 

WI Apache 服务 器 模块 ( 或 者 JIS 服务 器 模块 ) 

WI PHP 程序 执行 模块 

站 MYSQL 数据 库 服务 器 模块 

WI PHP 开发 工具 

MH MySQL 数据 库 管理 工具 

最 后 两 项 工具 安装 属于 可 选 操作 。 对 于 初学 者 来 说 ，ApachetPHPHMYSQL ( 或 者 
IIS+PHP+HMYSQL ) 环境 搭建 门槛 比较 高 ， 也 可 以 使 用 一 键 安装 工具 包 在 本 地 创建 PHP 本 地 服 
务 器 ， 等 初步 可 握 PHP 开发 之 后 ,再 逐步 使 用 手动 配置 环境 。 本 书 主 要 以 Windows 系统 为 基础 
进行 介绍 ， 不 涉及 UNIX 和 Linux 系统 配置 。 


【 学 习 重 点 】 

MH 安装 PHP 工具 包 
吓 安装 PHP 服务 器 
MH 安装 MySQL 数据 库 
MH 配置 Apache 服务 器 
让 配置 PHP 

由 配置 MySQL 数据 库 


~ 到 更 页 设计 与 网 站 过 役 从 入 门 到 将 通 

| 

| 15.1 安装 Apachet+PHP+MySQL 工具 包 

| 配置 PHP 运行 环境 的 最 简单 方法 就 是 使 用 工具 包 。 工 具 包 将 Apache、PHP、MySQL 等 服务 器 软 
件 或 工具 安装 、 配 置 完 成 之 后 进行 打包 处 理 ， 功 能 类 似 系统 克隆 盘 。 开 发 人 员 只 需要 将 这 些 工 具 包 解 

| 压 到 本 地 即 可 使 用 ， 无 须 安装 和 配置 ， 非 常 方便 。 

| 目前 网 上 有 很 多 种 PHP 环境 配置 工具 包 ， 如 XAMPP、Wamp Server、Vertrigo Server、PHPNow、 

| PHPStudy、AppServ、EasyPHP 等 。 

上 


| AppServ 和 EasyPHP 都 是 Apache+PHP+MySQL 开发 环境 ， 适 合 初学 者 选用 ， 而 XAMPP 等 其 他 
| 几 个 工具 相对 复杂 些 ， 适 合 有 一 定 基础 的 读者 使 用 。 


从 提示 : 在 安装 工具 包 之 前 ， 建 议 读者 不 要 同时 安装 Apache、PHP 和 MySQL 服务 工具 ， 如 果 已 经 安 
装 ， 则 应 该 先 拆 印 它们 ， 再 开始 安装 。 安 装 过 程 很 简单 ， 只 需要 将 程序 解压 到 或 者 安装 到 指 
定 目录 即 可 使 用 。 下 面 以 AppServ 工具 包 为 例 介绍 如 何在 Windows 中 快速 搭建 PHP 环境 。 


【操作 步骤 】 
| 第 1 步 ， 访 问 AppServ 官方 网 站 下 载 AppServ 工具 包 (http://www.appservnetwork.com/)。 这 里 下 
| 载 的 是 AppServ 8.4.0 版 本 ， 包 括 如 下 版 本 软件 。 
| Apache 2.4.20。 
PHP 5.6.22。 
PHP 7.0.7 
MySQL 5.7.13。 
| phpMyAdmin 4.6.2。 
| 第 2 步 ， 双 击 下 载 到 本 地 的 appserv-win32-8.4.0.exe 文件 ， 打 开 如 图 15.1 所 示 的 AppServ 启动 界面 。 
第 3 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.2 所 示 的 AppServ 安装 协议 界面 。 








办 多 办 多 





Lcense Agreement 
Welcome to the AppServ 8.4.0 Peace review the hcance terme before inetaling AppServ 8.4.0 
Setup Wizard 


This wisard wil guide you through the instalation of AppServ Press Page Down to see the rest of the agreerent 
40. 





GNU LESSER GENERAL PUBLIC LICENSE 
Itis reommended that you dose al other applcations Verson 2.1, February 1999 
before starting Setup, This wil make it possible to update 

without having to reboot your opptht Go) 001 000 ree Soft Komater he 


of Polenee doament, Ri hangng ta rol 
[pms is the frst released verson of the Lesser GPL 1t also counts 


verson 2, hence 


YEOMPUTER-— 























15.1 启动 AppServ 图 15.2 接受 安装 协议 
| 第 4 步 ， 单 击 IAgree 按钮 打开 如 图 15.3 所 示 的 对 话 框 ， 在 该 对 话 框 中 设置 安装 路 径 ， 默 认 路 
| 径 为 CAppServ，AppServ 安装 完毕 ，Apache、PHP 和 MySQL 都 将 以 子 目录 的 形式 存储 在 该 目录 下 。 
| 第 5 步 , 单 击 Next 按钮 , 打开 如 图 15.4 所 示 的 对 话 框 在 该 对 话 框 中 选择 要 安装 的 程序 和 组 件 ， 
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默认 为 全 部 选中 状态 。 | 


Choose Install Location 
choose the foderin which to install AppServ 8.4.0. 


Saiect the components you want toinstal dear the components 
You donot wanttoinstal 


install .4.C in the folowing folder, To install in a different folder, dick 
select another folder. Cick Next to continue, 






































图 15.3 选择 安装 路 径 图 15.4 选择 安装 的 组 件 | 


第 6 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.5 所 示 的 对 话 框 ， 在 该 对 话 框 中 设置 Apache 服务 的 端口 
号 ， 以 及 计算 机 的 名 称 和 用 户 邮箱 。 其 中 服务 器 端口 号 设置 非常 重要 ， 只 有 正常 设置 端口 号 ， 才 能 够 
正常 启动 服务 器 配置 ， 默 认为 80。 如 果 80 被 IS 或 者 其 他 网 络 程序 占用 (如 迅雷 、QQ 等 )， 则 需要 
修改 相应 的 端口 号 ， 或 者 停 用 相 冲 突 的 网 络 程序 。 

第 7 步 , 单 击 Next 按钮 , 打开 如 图 15.6 所 示 的 对 话 框 , 在 该 对 话 框 中 设置 MySQL 数据 库 的 root 
用 户 登 录 密码 和 数据 库 字 符 集 。 这 里 设置 字符 集 为 中 文 简体 ， 这 样 就 可 以 在 MySQL 数据 库 中 采用 中 
文 简体 字符 集 读 写 数据 。 注意， 所 设置 的 数据 库 登 录 密码 一 定 要 记 牢 ， 因 为 在 应 用 程序 开发 中 ， 只 有 
使 用 该 密码 才能 够 访问 数据 库 ， 这 里 设置 密码 为 “11111111”， 在 后 面 程序 开发 中 ， 统 一 使 用 “11111111” 
为 数据 库 访问 密码 。 





Apache HTTP Server fomation NS MySOL Server Configuration 
Please enter 's information. Conf the M， Server instance, 
Your servers nformaton. MuSQL gure the MySQL 

Server Name (e/g. www,appservnetwork com) 
Administrator's Emal Address (e.g, admn@example.com) 


Piease enter Root password for MySQL Server. 












































图 15.5 设置 端口 号 图 15.6 设置 数据 库 登 录 密码 


第 8 步 ， 单 击 Install 按钮 ， 打 开 如 图 15.7 所 示 的 对 话 框 ， 显 示 安 装 进度 ， 开 始 安装 工具 包 中 选 
中 的 程序 。 

第 9 步 ， 安 装 完毕 ， 显 示 如 图 15.8 所 示 的 对 话 框 ， 按 默认 设置 ， 单 击 Finish 按钮 完成 安装 。 

第 10 步 ， 安 装 完毕 ， 在 C:\AppServ 目录 下 可 以 看 到 5 个 子 文件 夹 ， 它 们 分 别 对 应 Apache 2.4、 
php 5、php 7、MySQL 和 www， 如 图 15.9 所 示 。 读者 可 以 把 所 有 测试 网 页 文件 存储 到 C:\AppSerwwww 
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Completing the AppServ 8.4.0 Setup 
Wizard 





AppSery 8.4.0 has been installed on your computer, 
Chck Finish to dose this wizard, 














start Apache 


回 startMysQL 























图 15.7 显示 安装 进度 图 15.8 完成 安装 


第 11 步 , 在 浏览 器 地 址 栏 中 输入 http:/Wlocalhost/ 或 者 http://127.0.01/, 如 果 能 够 打开 并 显示 如 图 15.10 
所 示 的 页 面 内 容 ， 则 说 明 安 装 AppServ 工具 包 成 功 。 


min 





> 1 用 eC) » AppServ VE ‘mAppSev 
人 ” 圳 隐 
上 Apacdhe24 
上 MrsQL 
Bphps 
Bh php7 


Bm 

@ Urinstal-Appserva ad.ere 
om 

Official Site : http://www.AppServ.org 

Hosting by : http://www.AppServHosting.com 

chenge Lanoveoe :3 


ory wor to bud Weboerve, Databave Server with Appserv 7) 





图 15.9 查看 安装 目录 15.10 测试 AppServ 


15.2 安装 PHP 相关 软件 


| 本 节 主 要 介绍 在 Windows 7 下 安装 配置 PHP+Apache 服务 器 环境 。 在 Windows 7 下 进行 PHP 环 
| 境 搭建 ， 首 先 需要 下 载 PHP 代码 包 和 Apache 与 MySQL 的 安装 软件 包 。 安 装 之 后 ， 就 可 以 根据 需要 
| 进行 配置 。 


15.2.1 安装 Apache 


| Apache 是 世界 使 用 排名 第 一 的 Web 服务 器 ， 可 以 运行 在 几乎 所 有 的 计算 机 平台 上 ， 一 些 大 型 商 
| 业 网 站 都 通过 Apache 发 布 站 点 。 作 为 自由 软件 ， 并 完全 对 用 户 进 行 开放 。Apache 的 特点 是 简单 、 
| 速度 快 、 性 能 稳定 ， 并 可 做 代理 服务 器 来 使 用 。 相 比 IIS 来 说 ，Apache 与 PHP 的 兼容 性 更 好 ， 执 
| 行 代码 的 效率 更 高 ， 运 行 起 来 也 更 加 稳定 。 下 面 将 演示 在 Windows 下 通过 安装 包 自动 安装 Apache 
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服务 器 。 
【操作 步骤 】 
第 1 步 ,下载 Apache 服务 器 软件 .访问 http://httpd.apache.org/download 页 面 , 在 该 页 面 下 载 Stable 
Release-Latest Version 或 者 Legacy Release-2.2 Branch。 其 中 ，Stable Release-Latest Version 表示 最 新 稳 
定 版 ，Legacy Release-2.2 Branch 表示 传统 2.2 版 本 。 


窑 提示 : 上 述 下 载 的 是 源 代码 安装 包 ， 需要 用 户 在 本 地 系统 中 手动 配置 安装 ， 建 议 初 学 者 在 百度 软 
件 下 载 Apache HTTP Server 最 新 官方 版 ， 可 以 直接 单 击 安装 ， 免 去 手动 配置 的 麻烦 ， 在 
该 页 面 下 载 httpd-2.2.25-win32-x86-no_ssl.msi。 
第 2 步 ,双击 下 载 到 本 地 的 httpd-2.2.25-win32-x86-no_ssl.msi 文件 ,打开 如 图 15.11 所 示 的 Apache 
HTTP Server 2.2 启动 界面 。 
第 3 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.12 所 示 的 安装 协议 界面 ， 选 中 第 一 个 选项 ， 表 示 同 意 安 
装 协议 。 


‘Welcome to the Installation Wizard for Shs 
Apache HTTP Server 2.2.25 Please read the folowng lcense agreement carefuly. 


The Instalation Wizard wil install Apache HTTP Server 2.2.25 Apache License ~ 
on your computer. To continue, dick Next. Version 2.0, January 2004 


http:www.apache.orglicenses/ 





ITERMS AND CONDITIONS FOR USE, REPRODUCTION, ANC DISTRIBUTION 


1. Definitions. 


WARNING: This program is protected by copyright law and “License” shall mean the terms and conditions for use, repioduction, and 


‘nternatonal weates distribution as defined by Sections 1 through 9 of this document 


图 Iaceept the terms n the icense agreement 
OLdo not accept the terms in the icense agreement 


Instalshied 








图 15.11 启动 Apache HTTP Server 2.2 15.12 接受 安装 协议 
第 4 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.13 所 示 的 对 话 框 ， 查 看 帮助 信息 。 
第 5 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.14 所 示 的 对 话 框 ， 在 服务 器 信息 设置 窗口 中 填写 站 点 的 
域名 、 服 务 器 名 称 以 及 管理 员 电 子 邮 箱 地 址 等 信息 。 


| x 





Read This First 
Read ths Before Running Apache on Windows. Please enter your server's informaton. 
Network Doman (e.g somenet.com) 


es 


[ahatisip 

[The Apacie HTTP Server is a powerful and flexible HTTPIL1compliantweb server. Server Name (e.g. ww.somenet.com): 

Originally designed as a replacement for the NCSA HTTP Serer thas grown be ecahost 

Ithe most 90pular web senvar on the Intemet. As a project of the Apache Sofware 

Foundation, the dovelopers im to collaboralivoly dovelop and maintoin a robuzt Mr ob ots Ena Moss (ey, webnamte Gomerel ui) 





Apache HTTP Sever 











commeraahgrade standards-based server with freely avallable source code Eee 


Li 下 
Details ofthe latest versior can be found onthe Apache HTTF server project pzge 
under: 

httpuhtpd apache orol 


nstal Apache HTTP Server 2.2 programs and shorteuts for: 


®) for Al Users, onPort 80, as a Service 一 Recommended 
DO ily fer the Cumentliser on Port MNAn, when started Manually. 


Instalshield Tnstalshiald 
































图 15.13 查看 帮助 信息 图 15.14 设置 服务 器 信息 
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第 6 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.15 所 示 的 对 话 框 ， 在 这 里 选择 安装 类 型 ， 一 般 保持 默认 
的 Typical 典型 模式 即 可 。 
第 7 步 , 单 击 Next 按钮 , 打开 如 图 15.16 所 示 的 对 话 框 , 在 这 里 设置 安装 目录 , 默认 为 C:\Program 
全 站 | Files\Apache Software Foundation\Apache2.2\。 读 者 可 以 单 击 右边 的 Change 按钮 修改 此 路 径 。 


可 四 可 


Setup Type Destination Folder 
Choose the setup type that best suits your needs. Chck Change toinstal to a different folder 


Please select a setup type. | 全 Instal Apache HTTP Server 22to the folder: 
十 C:\Program Fies kx86JWpacdhe Software FoundationWpadhe2.2， | Change,.. 














Typical 
如 Typical program features wil be nstalled. (Headers and Librares 
for compling modules wil not be instaled.) 


Ocustom 
Choose which program features you want nstaled and where they 
wil be instaled, Recommended for advanced users. 

















| 图 15.15 选择 安装 类 型 图 15.16 设置 安装 路 径 


第 8 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.17 所 示 的 对 话 框 ， 在 这 里 可 以 准备 安装 。 
第 9 步 ， 单 击 Install 按钮 ， 开 始 安装 ， 会 显示 如 图 15.18 所 示 的 安装 进度 对 话 框 。 


Ready to Install the Program Instaling Apache HTTP Server 2.2.25 
The wizardis ready to begn installation. The program features you selected are being instaled. 
Click Iinstall to begin the installation. Please wait whie the Instalation Wizard installs Apache HTTP Server 
2.2.25. Th may take several minutes. 
1f you want to review or change any of your instalation settings, cick Back. Cick Cancel to 
edt the wizard, 


Status: 
Updating component registraton 
ms 


























15.17 准备 安装 15.18 ”显示 安装 进度 


第 10 步 ， 单 击 Finish 按钮 ， 完 成 安装 ， 如 图 15.19 所 示 。 

第 11 步 ， 与 此 同时 ， 在 桌面 右 下 角 的 任务 栏 内 会 看 见 一 个 小 叶子 图 标 ， 这 个 就 是 Apache 启动 项 ， 
如 图 15.20 所 示 。 

第 12 步 , 打开 正 浏览 器 ， 然 后 在 地 址 栏 中 输入 http:Wlocalhost/ 或 者 http://127.0.01/， 如 果 能 够 打 
开 并 显示 如 图 15.21 所 示 的 页 面 内 容 ， 则 说 明 Apache 安装 成 功 。 
| 如 果 没有 显示 Apache 默认 页 面 ， 则 说 明 没 有 安装 成 功 ， 读 者 需要 查看 本 地 系统 中 是 否 安装 了 其 
| 他 网 页 服务 器 (如 IIS 等 )， 或 者 查看 80 端口 是 否 被 占用 。 
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图 15.19 完成 安装 图 15.20 ”Apache 服务 启动 项 


和 Da 





€ |* [CNET ET 
It works! 





图 15.21 显示 正常 安装 Apache 服务 器 
15.2.2 配置 Apache 


完成 Apache 安装 之 后 ， 还 需要 设置 Apache 配置 文件 (httpd.conf)。 在 默认 情况 下 ， 该 文件 存放 在 
C:\Program Files\Apache Software Foundation\Apache2.2\conf\ 目 录 下 , 读者 可 以 在 资源 管理 器 中 直接 打 
开 和 编辑 ， 如 图 15.22 所 示 。 





Er Re 





网 
让 This is the main Apache HTTP server configuration File. [+ contains the 
| confi gurstion directives that give the server its instructions. 

See <IRL:http://hrtpd. apsche. org/docs/2.2> for derailed infornaricn 


| Sor a decuccion of each configuration directive. 


本 
Ne what they do, They re bese only we hints or evinders. If you are noure 
+ the online docs. Tou have been wamed. 
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| 在 httpd.conf 中 可 以 看 到 Documentroot 处 注 明 的 是 “C:/Program Files/Apache Software Foundation/ 
| Apache2.2/htdocs”。 这 说 明 在 默认 情况 下 Apache 的 发 布 目录 为 C:/Program Files/Apache Software 
| Foundation/Apache2.2/htdocs， 只 要 将 网 站 文件 存储 到 这 个 路 径 中 即 可 发 布 ， 当 然 也 可 以 通过 修改 这 个 
| 路 径 来 实现 修改 发 布 目录 路 径 的 目的 ， 如 图 15.23 所 示 。 


Note | ee 


HN rds tive torn li tat tts Bernt Un to ltrttay tel 
speci! 





DoupenRoot: The dizectary out of which you will serve 
8 docurents, By defaulr, all requests sron hls dlrectory, but 
eyrbolie iinke md alisces may be uct 10 other locaticns. 


ion: 
ALlon ne 
Drder deny, 本 1ow 
Deny from all 


图 15.23 设置 网 站 发 布 路 径 


如 果 要 启动 、 关 闭 Apache 服务 , 则 只 需要 右 击 任务 栏 中 的 Apache 图 标 ， 从 弹出 的 快捷 菜单 中 选 
择 Open Apache Monitor 命令 ， 如 图 15.24 所 示 。 在 打开 的 Apache Service Monitor 对 话 框 中 ， 可 以 单 
击 Stop 按钮 停止 Apache 服务 ， 或 者 单 击 Start 按钮 开启 Apache 服务 ， 如 图 15.25 所 示 。 











14:19 
”2016/7/19 Apache/2.2.25 (Win32) 


15.24 打开 Apache 服务 监控 器 15.25 ”停止 或 者 开启 Apache 服务 
15.2.3 安装 PHP 











在 默认 情况 下 ，Apache 是 不 直接 支持 浏览 PHP 页 面 文件 的 ， 还 需要 下 载 和 安装 PHP。 

【操作 步骤 】 

第 1 步 ， 访 问 http://windows.php.net/download/ 页 面 ， 下 载 PHP。PHP 代码 包 有 两 个 流行 版 本 : 

| PHP5 和 PHP7。PHP 7 相对 于 上 一 个 系列 的 PHP 5 版本， 可 以 说 是 一 个 大 规模 的 革新 ， 尤 其 是 在 性 
| 能 方面 实现 跨越 式 的 大 幅 提升 。 但 对 于 初学 者 来 说 ， 建 议 从 PHP 5 版 本 开始 学 习 基础 知识 ， 以 降低 学 


| 习 难 度 。 
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窟 提示: 在 PHP 官网 上 下 载 PHP 安装 包 ， 都 有 VC9、VC11 或 VC14 的 标识 : 


VC9 表示 该 版 本 PHP 是 用 Visual Studio 2008 编译 的 ，Apache HTTP Server 2.2 支持 VC9 | 


版 本 ; 而 VC11 是 用 Visual Studio 2012 编译 、VC14 是 用 Visual Studio 2014 编译 ，Apache 
HTTP Server 2.4 支持 VC11 及 其 以 上 版 本 。 依 此 类 推 ， 这 意味 着 如 果 下 载 VC9 版 本 ， 就 
需要 先 安装 Visual C++ Redistributable for Visual Studio 2008 SP1， 如 果 下 载 的 是 VC11 版 
本 ， 就 需要 先 安装 Visual C++ Redistributable for Visual Studio 2012。 
搭建 PHP 还 要 看 操作 系统 的 版 本 ， 如 果 操作 系统 是 32 位 ， 就 选择 带 “x86” 的 版 本 ， 如 
果 是 64 位 的 ， 就 选择 带 “x64” 的 版 本 。 
另外 , None Thread Safe 表示 非 线程 安全 , 在 执行 时 不 进行 线程 (thread ) 安全 检查 ; Thread 
Safe 就 是 线程 安全 ， 执 行 时 会 进行 线程 (thread ) 安全 检查 ， 以 防止 有 新 要 求 就 启动 新 线 
程 ， 浪 费 系统 资源 。 

第 2 步 ， 双 击 下 载 到 本 地 的 php-5.3.9-Win32-VC9-x86.msi (http://windows.php.net/downloads/releases/ 

archives/) 文件 ， 打 开 如 图 15.26 所 示 的 启动 界面 。 
第 3 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.27 所 示 的 安装 协议 界面 ， 选 中 选项 同意 安装 协议 。 


End-User License Agreement 
Welcome to the PHP 5.3.9 Setup Wizard Please read the folowng hcense agreement carefuly 





The Setup Wizard wl instal PHP 5.3.9 on your computer 
ek ext to contnue or anesl to eat the Se Wad 

cn yal teny eve The PHP License, version 3.01 
TS Capysighe (c) 1999 ~ 2010 The PAP Group. Ml 于 gt 


IRedistribution and use in source and binary forms, 
lwith or without 
odification, is permitted provided that the 


[Laccept the terms in the License Agreement 





15.26 启动 PHP 5.3 安装 程序 15.27 ”接受 安装 协议 
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第 4 步 , 单 击 Next 按钮 , 打开 如 图 15.28 所 示 的 对 话 框 , 在 这 里 设置 安装 目录 , 默认 为 C:\Program | 





Files\PHP\。 读 者 也 可 以 单 击 Browse 按钮 修改 此 路 径 。 
第 5 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.29 所 示 的 对 话 框 ， 在 这 里 设置 服务 器 类 型 ， 在 15.2.1 节 
中 曾经 安装 了 Apache HTTP Server 2.2， 故 这 里 选中 Apache 2.2.x Module 单 选 按钮 。 


第 6 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.30 所 示 的 对 话 框 ， 在 这 里 设置 Apache 服务 器 的 配置 文件 | 


路 径 ， 在 15.2.2 节 中 曾经 介绍 过 Apache 服务 器 的 配置 文件 路 径 为 C:\Program Files(x86)Apache Software 
Foundation\Apache?2.2\conf\。 

第 7 步 ， 单 击 Next 按钮 打开 如 图 15.31 所 示 的 对 话 框 ， 在 这 里 设置 要 安装 的 Apache 服务 器 组 
件 ， 这 里 不 妨 选择 安装 全 部 组 件 。 

第 8 步 ， 单 击 Next 按钮 打开 如 图 15.32 所 示 的 对 话 框 ， 在 这 里 可 以 准备 安装 。 

第 9 步 ， 单 击 Install 按钮 ， 开 始 安装 ， 会 显示 如 图 15.33 所 示 的 安装 进度 对 话 框 。 

第 10 步 ， 单 击 Finish 按钮 ， 完 成 安装 。 
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Web Server Setup 
Salect the Web Server you wish to setup. 


Chck Next to install to the defauit folder or cick Browse to choose another. 








Install PHP 5.3.9 to: 


| 
| 
| Destination Folder 
| 
| 





[C: program Fies (86) PHP\ 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 

















































图 15.29 设置 服务 器 类 型 


Apache Configuration Directory Choose Items to Install 
Browse to select the directory contanng the Apache Configuration Files (c... Select the way you want features to be nstaled. 


a Ok the cons n the ee below to change the way features wl be instaled 


= 
@- 坦 -|E 


Wl be installed on local hard drive 

















图 15.31 选择 安装 组 件 


Cick Instal to begn the ratalabon Ock Back to revew or change any of your rape 
installaton settngs. Chck Cancel to et the waard 


Status: 





























15.32 ”准备 安装 图 15.33 显示 安装 进度 


在 实际 开发 中 建议 读者 使 用 压缩 包 进行 安装 ， 这 种 方式 可 能 需要 复杂 的 PHP 初始 配置 ， 但 是 它 
更 适合 开发 。 
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【操作 步骤 】 
第 1 步 ， 访 问 PHP 官方 网 站 (http://www.php.net/downloads.php)， 下 载 PHP 5.6 的 win 安装 包 ， 
如 果 要 下 载 其 他 版 本 的 PHP， 可 以 访问 http://windows.php.net/downloads/releases/archives/。 | 
第 2 步 ， 下 载 完 毕 ， 解 压 ZIP 文件 到 任意 目录 即 可 ， 如 D:\php， 解压 到 该 目录 后 ， 就 一 定 要 记 住 | 
该 路 径 ， 并 不 能 够 随意 改动 路 径 ， 因 为 后 面 的 环境 参数 都 需要 参考 该 路 径 。 | 


15.2.4 配置 PHP 


配置 PHP 的 具体 操作 步骤 如 下 。 

第 1 步 ， 在 PHP 安装 目录 下 ， 把 php.ini-development (或 php.ini-recommended) 更 名 为 php.ini。 

第 2 步 ， 打开 php.ini 配置 文件 ， 找 到 Dynamic Extensions 设置 组 ， 把 常用 模块 前 面 的 分 号 去 掉 ， 
建议 启用 MySQL、MySQLi、PDO、CURL 等 模块 ， 随 着 开发 需要 ， 可 以 选择 启用 更 多 模块 。 

第 3 步 , 设置 或 更 改 date.timezone=PRC。 该 配置 表示 定义 显示 时 间 的 时 区 , PRC 为 People's Republic 
of China 的 简称 ， 即 中 华人 民 共和 国 ， 也 就 是 显示 日 期 使 用 中 国 的 时 区 。 

第 4 步 ,设置 或 更 改 session.save_path = "D:/php/tmp"， 路 径 可 根据 本 地 系统 情况 自由 配置 ， 建 议 
配置 到 单独 目录 。 该 配置 定义 session 文件 的 存放 位 置 ， 如 果 没有 配置 ， 则 不 会 生成 session 文件 ， 如 
果 配 置 的 目录 不 存在 ， 则 会 报错 。 | 

第 5 步 ， 设 置 或 更 改 extension_dir = "D:/php/ext"， 路 径 按 自己 的 情况 配置 。 该 配置 增加 PHP 的 | 
拓展 功能 ， 拓 展 功 能 都 在 ext 目录 下 面 。 

第 6 步 ， 可 以 根据 需要 有 选择 性 地 设置 其 他 变量 参数 。 当 然 ， 随 着 PHP 开发 的 不 断 深入 ， 读 者 
还 可 以 个 性 化 设置 更 多 环境 变量 。 

加 ”如 果 要 禁止 某 些 全 局 变量 或 调整 优先 级 ， 可 以 修改 variables_order 选项 。 | 

加 ”如 果 要 禁用 某 些 函 数 ， 可 以 配置 disable_functions 选项 。 | 

ignore_user_ abort 选项 可 以 设置 PHP 在 浏览 器 关闭 后 依然 运行 ， 计 划 任 务 等 采用 的 就 是 这 | 

种 技巧 。 | 
expose_php 选项 决定 是 否 向 服务 器 暴露 自己 所 使 用 的 脚本 类 型 。 
memory_limit 默认 为 128MB， 设 置 PHP 运行 允许 的 最 大 内 存 ， 如 果 PHP 程序 运行 时 经 常 
提示 内 存 溢 出 ， 建 议 把 这 个 值 调整 为 270MB。 
Tequest_order 选项 允许 调整 GET 和 POST 的 优先 顺序 。 
tpload_max_filesize = 2MB 允许 上 传 文件 的 最 大 尺寸 。 同 样 的 控制 选项 还 有 max_file_ uploads。 | 
session.cookie_httponly 选项 设置 Cookies 不 会 被 客户 端 语言 (如 JavaScript) 读 取 到 ， 可 防 | 
御 XSS 攻击 。 

第 7 步 , 在 Apache 安装 目录 下 (如 C:\Program Files\Apache Software Foundation\Apache2.2\conf)， 
找到 confyhttpd.conf 配置 文件 ， 做 如 下 修改 和 配置 ， 如 果 没 有 该 选项 则 添加 ， 有 则 编辑 。 注 意 ， 这 一 
步 操作 非常 关键 ， 读 者 务必 正确 设置 。 

回 “ServerRoot "C:/Program Files/Apache Software Foundation/Apache2.2" 

设置 Apache 服务 器 的 安装 目录 。 

回 。 Listen localhost:80 

设置 Apache 监听 端口 。 

加 LoadModule php5 module d:/php/php5apache2 2.dll 

必 设 选项 。 装 载 PHP 模块 ， 该 项 必须 正确 设置 ， 否 则 PHP 将 无 法 工作 。 

PHPIniDir "d:/php" 

PHP 配置 文件 目录 ， 在 配置 文件 中 可 能 会 没有 该 选项 ， 则 建议 添加 这 一 行 代码 。 





加 回回 加 加 
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DocumentRoot "D:/www" 
必 设 选项 。 网 页 文件 的 存放 位 置 ， 即 本 地 虚拟 服务 器 的 远程 文件 夹 ， 所 有 开发 的 PHP 页 面 都 必 
须 放 置 在 该 目录 下 才能 够 被 PHP 识别 和 解析 。 同 时 找到 下 面 的 语句 : 
<Directory "C:/Program Files(x86)/Apache Software Foundation/Apache 2.2/htdocs"> 
修改 为 
<Directory "D:/www"> 
回 ”添加 PHP 默认 索引 文件 (可 选 ) 
<IfModule dir module> 
DirectoryIndex index.html index.htm index.php 
</IfModule> 
添加 PHP 应 用 类 型 (可 选 ) 
<IfModule mime module> 
AddType application/x-httpd-php .php 
</IfModule> 
添加 PHP 伪 静 态 ( 可 选 ) 


<IfModule mime module> 
AddType application/x-httpd-php .html 
</IfModule> 


15.2.5 测试 PHP 


完成 上 述 安装 和 配置 工作 ，PHP 环境 就 基本 搭建 好 了 ， 下 面 可 以 测试 PHP 环境 ， 确 保 它 能 够 正 
常 工作 。 

【操作 步骤 】 

第 1 步 ， 新 建 一 个 testphp 文件 ， 注 意 扩展 名 为 .php。 

第 2 步 ， 在 testphp 文件 中 输入 如 下 代码 : 


<?php 

echo "Hello World": 

We 

第 3 步 , 把 testphp 文件 保存 到 D:/www 中 , 即 在 15.2.4 节 配 置 环境 变量 时 , DocumentRoot"D:/www" 
选项 的 设置 目录 。 

第 4 步 ， 启 动 浏览 器 ， 在 地 址 栏 中 输入 “http:/localhost/testphp ”， 按 Enter 键 后 如 图 15.34 所 示 ， 
则 说 明 环 境 搭建 成 功 。 





15.34 ”测试 环境 
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15.3 安装 MySQL 


使 用 Apache+PHP 配合 ， 可 以 开发 出 脱离 数据 库 支持 的 Web 应 用 程序 ， 但 是 缺乏 数据 库 支 持 的 ， 
网 站 是 不 完善 的 。PHP 与 MySQL 是 黄金 搭档 ， 所 以 下 面 还 要 讲解 MySQL 数据 库 的 安装 和 设置 。 
【操作 步骤 】 
第 1 步 ， 下载 MySQL 数据 库 服 务 软件 。 访 问 http://www.mysql.com/， 单 击 Downloads 菜单 项 ， 
进入 下 载 页 面 , 选择 最 新 的 MySQL 软件 进行 下 载 即 可 。 也 可 以 在 http://downloads.mysql.comy/archives/ 
installer/ 页 面 选择 下 载 不 同 的 MySQL 版 本 。 


闪 提示 : 目前 MySQL 主流 版 本 为 MySQL 5， 包括 MySQL 5.5、MySQL 5.6 和 MySQL 5.7， 各 版 | 

本 核心 功能 和 用 法 基本 相同 ， 读 者 可 根据 需要 选用 。MySQL 提供 两 个 安装 版 本 : | 

MySQL Community Server: 社区 版 本 ， 开 源 免费 ， 但 不 提供 官方 技术 支持 。 | 

回 MySQL Enterprise Edition: 企业 版 本 ， 需 付费 。 | 

在 运行 MySQL 安装 程序 时 ， 如 果 和 希望 通过 网 络 在 线 安装 ， 则 选择 mysql-installer- | 

web-community; 如 果 在 运行 MySQL 安装 程序 时 不 可 以 上 网 ， 则 选择 mysql-installer- | 

community， 通 俗 地 说 就 是 在 线 安装 ， 还 是 离线 安装 。 | 

第 2 步 ， 下面 以 安装 MySQL 5.7 社区 版 为 例 进 行 说 明 。 双击 下 载 到 本 地 的 mysql-installer-community- | 
5.7.13.0.msi 文件 ， 打 开 如 图 15.35 所 示 的 安装 协议 界面 ， 选 中 复 选 枉 ， 表 示 同 意 安装 协议 。 

第 3 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.36 所 示 的 对 话 框 ， 选 择 安装 类 型 。 








MySQL Installer License Agreement My5QL Installer Choosing a Setup Type 


图 15.35 接受 安装 协议 图 15.36 选择 安装 类 型 


| 
回 ”Developer Default: 默认 安装 类 型 ， 开 发 模式 。 该 选项 代表 典型 个 人 用 桌面 工作 站 ， 如 果 机 | 
器 上 运行 着 多 个 桌面 应 用 程序 ， 可 将 MySQL 服务 器 配置 成 使 用 最 少 的 系统 资源 。 | 
Server only: 仅 作为 服务 器 。 该 选项 代表 服务 器 ，MySQL 服务 器 可 以 同 其 他 应 用 程序 一 起 
运行 ， 例 如 FTP、Email 和 Web 服务 器 ，MySQL 服务 器 配置 成 使 用 适当 比例 的 系统 资源 。 
Client only: 仅 作为 客户 端 。 
Full: 完全 安装 类 型 。 


加 加 
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总 

Custom: 自 定 义 安装 类 型 。 作 为 服务 器 类 型 数据 库 安 装 ， 需 选择 自 定义 安装 类 型 ， 安 装 需 
自 定义 安装 路 径 。 

第 4 步 ， 单 击 Next 按钮 ， 打 开 如 图 15.37 所 示 的 对 话 框 ， 选 择 安装 选项 。 

会 内 | 回 ”MySQL Servers: 必 人 选项， 核心 组 件 ， 可 根据 系统 位 数 对 应 选择 。 

Ne | Applications 应 用 和 MySQL Connectors 连接 器 可 不 选 。 


yote Documentation 类 似 于 帮助 文档 资料 可 选 。 
第 5 步 ， 单 击 Next 按钮 ， 在 打开 的 界面 中 单 击 Execute 按钮 ， 开 始 执行 安装 ， 如 图 15.38 所 示 。 










MySQL Installer MySQL. Installer 


图 15.37 选择 安装 选项 图 15.38 执行 安装 
第 6 步 ， 安 装 成 功 后 ， 每 个 选项 列表 前 会 显示 对 号 提示 图 标 。 单 击 Next 按钮 ， 会 显示 Product 
Configuration 产品 配置 向 导 界 面 ， 如 图 15.39 所 示 。 
第 7 步 ， 单 击 Next 按钮 ， 选 择 配 置 选项 。 在 打开 的 界面 中 选择 Developer Machine 选项 ， 即 以 开 
发 机 模式 启动 ， 这 样 有 利于 减少 MySQL 服务 运行 时 的 内 存 占 用 ， 如 图 15.40 所 示 。 


MySQL. Installer MySQL. Installer 


图 15.39 MySQL 产品 配置 向 导 界面 图 15.40 选择 开发 机 模式 


Developer Machine: 开发 机 器 。 作 为 初学 者 ， 选 择 Developer Machine 即 可 。 
Server Machine: 服务 器 。 如 果 服 务 程序 及 库 装 在 同一 台 机 上 ， 建 议 选择 Server Machine。 
! Dedicated MySQL Server Machine: 专用 MySQL 服务 器 。 该 选项 代表 只 运行 MySQL 服务 的 
| 服务 器 ， 如 果 没有 运行 其 他 应 用 程序 ，MySQL 服务 器 配置 成 使 用 所 有 可 用 系统 资源 。 
| 在 界面 下 面 可 选中 Show Advanced Options 复 选 框 。 其 他 选项 可 以 按 默认 设置 即 可 。 


加 加 加 
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| 

第 8 步 ， 单 击 Next 按钮 ， 在 打开 的 界面 中 设置 MySQL 服务 器 访问 密码 ， 本 书后 面 章节 中 访问 | 
MySQL 数据 库 的 实例 都 以 11111111 作为 访问 密码 , 如 图 15.41 所 示 。 也 可 以 在 该 界面 添加 访问 用 户 。| 
第 9 步 ， 单 击 Next 按钮 ， 在 打开 的 界面 中 设置 Windows 服务 默认 值 ， 如 图 15.42 所 示 。 | 
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图 15.41 设置 数据 库 访问 密码 图 15.42 设置 Windows 服务 默认 值 


第 10 步 ， 单 击 Next 按钮 ， 设 置 插件 和 扩展 。 在 该 界面 中 保持 默认 。 | 
第 11 步 ， 单 击 Next 按钮 ， 配 置 日 志 ， 如 图 15.43 所 示 。 可 自 定义 路 径 存放 日 志文 档 方便 管理 。 | 
ErrorLog: 错误 日 志 。 记 录 启 动 、 运 行 或 停止 mysqld 时 出 现 的 问题 。 
General Log: 通用 日 志 。 记 录 建 立 的 客户 端 连 接 和 执行 的 语句 ， 占 用 资源 多 ， 默 认 不 启用 。 | 
Show Query Log: 慢 查 询 日 志 。 记 录 所 有 执行 时 间 超 过 long_query_time 秒 的 所 有 查询 或 不 | 
使 用 索引 的 查询 。 
| 
| 
| 
下 
下 
| 
| 
| 


回回 网 


回 ”Bin Log: 二 进 制 日 志 。 记 录 所 有 更 改 数据 的 语句 ， 还 用 于 复制 ， 启 用 主 从 备份 时 一 定 要 启 
用 此 日 志 。 
第 12 步 , 单 击 Next 按钮 , 在 打开 的 界面 中 单 击 Execute 按钮 , 开始 执行 环境 参数 配置 , 如 图 15.44 | 





MySQL Installer 





图 15.43 设置 日 志 路 径 图 15.44 执行 环境 参数 配置 


第 13 步 ， 配 置 完毕 ， 并 重启 MySQL 服务 器 即 可 。 
第 14 步 ， 如 果 选 中 了 Documentation 帮助 文档 选项 〈 参 见 第 4 步 )， 还 会 继续 配置 Samples and 
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| Examples 参数 ， 按 提示 单 击 Next 按钮 即 可 。 如 图 15.45 所 示 ， 按 要 求 输入 MySQL 数据 库 访 问 密码 ， 
| 连接 数据 库 。 
第 15 步 ， 单 击 Execute 按钮 ， 开 始 执行 环境 参数 配置 ， 如 图 15.46 所 示 。 











图 15.45 ”连接 到 数据 库 图 15.46 应 用 服务 器 配置 
第 16 步 ， 最 后 单 击 Finish 按钮 ， 完 成 整个 MySQL 数据 库 服 务 环境 的 安装 和 配置 操作 。 


15.4 手动 搭建 PHP 服务 器 


对 于 熟悉 PHP 开发 的 用 户 来 说 ， 更 喜欢 使 用 手动 方式 措 建 Apache+PHP 服务 器 环境 ， 手 动 拱 建 
PHP 环境 的 优势 不 言 而 喻 ， 用 户 可 以 自由 设置 个 性 化 PHP 环境 ， 能 够 更 深入 地 理解 PHP 内 部 环境 。 


15.4.1 搭建 Apache 运行 环境 


2015 年 以 后 ，Apache 改变 策略 ,官网 不 再 提供 Apache-http-server 的 Windows 的 编译 版 本 ， 仅 提 
供 开发 版 源 代码 ， 但 提供 了 第 三 方 编译 版 本 : ApacheHaus、Apache Lounge、BitNami WAMP Stack、 
WampServer、XAMPP。 第 三 方 访问 信息 : http://httpd.apache.org/docs/current/platform/windows.html#down。 

【操作 步骤 】 

第 1 步 ， 访 问 ApacheHaus (http://www.apachehaus.com/cgi-bin/download.plx)， 下 载 Apache 2.4.x 
VC9 64 位 版 本 。 建 议 下 载 httpd-2.4.23-x64.zip 或 httpd-2.4.23-x86.zip, 然后 下 载 对 应 的 VC9 (Visual C++ 
2008) 运行 库 。 

第 2 步 ， 安 装 好 VC9 运行 库 之 后 ， 将 httpd-2.4.23-x64.zip 里 面 的 Apache24 文件 夹 放 到 下 盘 根 目 
| 录 , 或 者 其 他 非 系统 盘 根 目 录 下 。 注 意 : 必须 放 到 根 目 录 下 ， 如 果 放 在 非 根 目录 下 ， 启 动 和 加 载 模块 
| 会 出 错 。 
| 第 3 步 ， 打开 EMApache24\eonf 目录 下 的 httpd conf 文件 ， 在 当前 目录 下 各 份 为 htpd.conf 
| 第 4 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 


ServerRoot "${SRVROOT}" 
| 修改 为 : 
| ServerRoot "E:/Apache24" 
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该 行 代码 设置 Apache 程序 的 启动 位 置 。 
第 5 步 ， 在 httpd.conf 文件 中 如 果 找 到 如 下 代码 。 如 果 没 有 则 添加 ， 如 果 已 经 添加 ， 则 忽略 本 步 
操作 。 


#ServerName www.example.com 


把 前 面 的 “#” 注 释 符号 去 掉 ， 定 义 服务 器 的 域名 访问 网 址 )。 如 果 是 在 本 地 定义 虚拟 服务 器 ， 
可 以 修改 为 : 


ServerName localhost:80 

第 6 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 
DocumentRoot "${SRVROOT}/htdocs" 

修改 为 : 

DocumentRoot "E:/www" 

定义 网 站 根 目 录 在 本 地 系统 中 的 物理 路 径 。 

第 7 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 
<Directory "${SRVROOT}/htdocs"> 

修改 为 : 

<Directory "E:/www"> 

定义 网 站 在 本 地 系统 中 的 物理 路 径 ， 统 一 各 种 请 求 的 物理 路 径 。 
第 8 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 
DirectoryIndex index.html 

修改 为 : 

定义 网 站 支持 更 多 的 默认 页 。 

第 9 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 
ScriptAlias /cgi-bin/ "${SRVROOT}/cgi-bin/" 
修改 为 : 

ScriptAlias /cgi-bin/ "E:/Apache24/cgi-bin/" 

第 10 步 ， 在 httpd.conf 文件 中 找到 如 下 代码 : 
<Directory "@exp_cgidir@"> 

修改 为 : 

<Directory "E:/Apache24/cgi-bin"> 

第 11 步 ， 启动 Apache。 在 “运行 ”对 话 框 中 输入 cmd 命令 ， 确 定之 后 打开 命令 提示 符 。 在 命令 


提示 符 中 输入 E:， 按 Enter 键 切 换 到 E 盘 下 ; 继续 输入 cd Apache24\bin， 按 Enter 键 进 入 E:/Apache24/bin 
目录 下 ; 最 后 输入 httpd， 按 Enter 键 启动 Apache 服务 器 。 
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忘 提示 : 如 果 httpd.conf 配置 正确 的 话 ， 输 入 httpd 按 Enter 键 后 是 没有 任何 提示 信 
启动 Apache 成 功 。 如 果 显 示 如 图 15.47 所 示 的 提示 ， 则 说 明 服务 器 端口 号 被 占用 ， 需 要 
重 设 端口 号 。 





EndewsSSstsmal 如 果 显示 这 些 信息 , 则 需要 在 httpdconf 文件 
中 修改 Listen 80 为 Listen 81, 重 设 PHP 服务 
器 端口 号 








: RH89972: make 


: hH8BB72: make 
1d not 
listening socket ailable, shutting down 


linahle te npen lngs 








15.47 重 设 端口 号 





第 12 步 ， 测 试 Apache。 可 以 把 Apache24\htdocs 目录 下 的 index.html 复制 到 E:\www 目录 下 ， 用 
浏览 器 访问 http://localhost:81/， 在 浏览 器 中 显示 如 图 15.48 所 示 的 提示 ， 则 说 明 Apache 已 经 正确 安装 了 。 








Apache Haus 


Apache™ binaries for Windows™ Readme First 


Welcome, 


That's right! 1f you are seeing this means that the web server installed at this ste is working properly, but 
has not yet been configured, 


Tf you are a member of the general public: 


The fact that you are seeing this page indicates that the website you just vsited is either just installed, 
expanencng problams, or 's undergoing routne mantenancs. 


If you are the website administrator: 


You may now add content to the /htdocs directory. Nete that until you do so, People visting your website 
wll see ths page, and not your content. 


Support 
Apache Version: 2.4.23Win64 。 Stat off with the server manual，。 Apache Server on Windows Community Forums 


Buid Date: Jul4 2016 
The Apa 





anual vy 





图 15.48 ”启动 Apache 成 功 


第 13 步 ， 加 入 Windows 系统 服务 ， 让 Apache 自动 启动 。 以 管理 员 身 份 启动 命令 提示 符 ， 在 命 
令 提 示 符 下 进入 E:/Apache24/bin 目录 ， 然 后 输入 httpd.exe -k install -n "Apache24"。"Apache24" 为 
Apache 在 Windows 服务 中 的 名 字 。 

第 14 步 ， 输入 httpd.exe -k install -n "Apache24" 后 按 Enter 键 ， 会 显示 成 功 安装 的 提示 ，Windows 
服务 列表 中 也 会 显示 Apache24 服务 项 。 这 时 可 以 选择 启动 ， 启 动 Apache 服务 ， 如 图 15.49 所 示 。 
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图 15.49 启动 Apache 服务 


容 提示 : 如果 要 印 载 Apache 服务 ， 先 要 停止 这 个 服务 ， 然 后 输入 httpd exe -k uninstall -n "Apache24" 
钙 载 这 个 服务 ,以 后 可 以 通过 Apache24\bin 文 件 夹 下 的 ApacheMonitor.exe 来 控制 Apache。 
任务 栏 也 会 显示 这 个 软件 ， 使 用 它 可 以 很 方便 地 管理 Apache 的 运行 。 


15.4.2 运行 PHP 编译 器 


运行 PHP 编译 器 相对 简单 ， 首 先 访问 http://windows.php.net/download/ 下 载 最 新 PHP 压缩 包 ， 这 

里 以 最 新 的 PHP 7.0.9 为 例 进行 说 明 。 
【操作 步骤 】 

第 1 步 ， 下 载 php-7.0.9-Win32-VC14-x64.zip， 解 压 文件 ， 复 制 到 要 安装 的 位 置 。 这 里 以 E:php7 
为 例 进 行 说 明 。 

第 2 步 ,由 于 PHP 7 版 本 是 由 VC14 编译 ,这 意味 着 需要 安装 VC 2015 运行 环境 ,同时 需要 Apache 
2.4 才 可 以 运行 PHP 7。 访 问 微软 官网 ， 在 http://www.microsoft.com/zh-cn/download/details.aspx?id= 48145 
页 面 下 载 ve_redist.x86.exe， 运 行 安装 。 


这 提示 : 安装 VC14 之前， 必须 开启 3 个 服务 : Windows Modules Installer、Windows Update、Window 
Defender Service， 否 则 一 定 会 安装 失败 。 


第 3 步 ， 在 Ei\php 7 目录 下 复制 php.ini-development， 重 命名 为 php.ini。 

第 4 步 ， 打 开 Apache24\conf 目录 下 的 httpd.conf 配置 文件 ， 添 加 如 下 代码 : 

# php7 support 

LoadModule php7_module "E:/php7/php7apache2 4.dll" 

# configure the path to php.ini 

PHPIniDir " E:/php7" 

上 面 代码 用 来 支持 PHP， 其 中 E:/php7 为 PHP 程序 的 根 目录 。 由 于 使 用 的 是 Apache2.4.23， 所 以 
php7_module 为 php7apache2 4.dll。 

第 5 步 ， 在 Windows 8 下 重启 Apache 服务 器 ， 使 上 面 的 配置 选项 生效 。 

第 6 步 , 测试 PHP。 删 除 E:/www 目录 下 其 他 文件 ， 新 建文 本 文件 ， 另 存 为 mdex.php， 在 其 中 
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PHP 快速 入 门 
( 铝 视频 讲解 ; 140 分 钟 ) 


PHP 是 一 种 火 入 式 服务 器 端 编程 语言 ， 简 单 易 学 ， 快 速 上 手 ， 它 具有 强大 的 扩张 性 。 随 着 
PHP 开发 不 断 普及 , 越 来 越 多 的 初学 者 选择 PHP 作为 网 站 开发 的 首选 语言 。 本 章 主 要 讲解 PHP 
基本 用 法 和 使 用 规则 ， 为 后 面 各 章 深入 学 习 黄 定 基础 


【学 习 重 点 】 


ml 
ml 
ml 
ml 


dl 


PHP 基本 语法 

PHP 数据 类 型 、 变 量 和 常量 
PHP 运算 符 和 表达 式 

PHP 控制 语句 

PHP 函数 、 类 和 对 象 

PHP 编码 规范 


ma 
&% 


16.1 PHP 基本 语法 


| PHP 使 用 一 对 特殊 的 标签 包含 脚本 代码 ， 与 HTML 结构 代码 混合 在 一 起 。 当 服务 器 解析 页 面 时 ， 
能 够 自动 过 滤 出 PHP 脚本 并 进行 解释 、 执 行 ， 最 后 把 生成 的 静态 网 页 信息 传递 给 客户 端 显示 。 


| 16.1.1 PHP 标记 


一 般 情况 下 ，PHP 代码 都 是 嵌入 在 HIML 文档 中 的 ，PHP 代码 在 HIML 结构 中 有 4 种 存在 形式 。 
| 回 PHP 默认 风格 ， 通 过 “<?php” 和 “?>” 一 对 标签 分 隔 HIML 和 PHP 代码 。 如 : 
| < 

# 这 里 是 PHP 代码 


?> 

利用 这 种 风格 ， 可 以 在 HTML 文档 中 任意 混合 PHP 和 HTML 代码 。 如 : 

<?php if ($expression) { ?> 

<strong>$expression 变量 为 true.</strong> 

<?php } else { ?> 

<strong>$expression 变量 为 false.</strong> 

<?php } ?> 

上 面 代 码 能 够 正常 工作 ， 这 种 方法 对 于 输出 大 段 文 本 而 言 ， 脱 离 PHP 解析 模式 通常 比 将 所 有 内 
| 容 用 echo0 或 者 print0 方 法 输出 会 更 有 效率 。 

| 脚本 风格 ， 通 过 <scripP> 标 签 包含 PHP 代码 ， 然 后 通过 language 属性 指明 脚本 语言 为 PHP。 如 : 
| <script language="php"> 

| # 这 里 是 PHP 代码 

</script> 

简写 风格 ， 是 在 默认 风格 基础 上 去 掉 php 关键 字 ， 以 方便 快速 书写 代码 。 如 : 


<2 
# 这 里 是 PHP 代码 
?> 


| 回 ASP 风格 ， 通 过 “<%” 和 “%>” 一 对 标签 分 隔 HTML 和 PHP 代码。 如 : 
| 国 到 
! 
| 


# 这 里 是 PHP 代码 

| %> 

| < 所 注意 :如 果 使 用 简写 风格 或 者 ASP 风格 ， 则 事先 应 该 在 php.ini 配置 文件 中 修改 如 下 配置 ， 把 这 

两 个 参数 值 都 设置 为 Dn。 考虑 到 这 两 种 风格 的 移植 性 较 差 ， 通 常 不 推荐 使 用 。 

short_open tag = On 

asp_tags =On 
| 当 开 发 需要 发 行 的 程序 或 者 库 ， 或 者 在 用 户 不 能 控制 的 服务 器 上 开发 PHP 程序 ， 因 为 目 
| 标 服务 器 可 能 不 支持 短 标记 ， 为 了 代码 的 移植 及 发 行 ， 确 保 不 要 使 用 简写 风格 或 者 ASP 
| 风格 。 
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16.1.2 PHP 注释 
任何 语言 都 有 注释 语法 , 这 些 注释 不 被 编译 和 执行 , 但 是 能 够 帮助 开发 人 员 阅 读 和 维护 代码 。 PHP | 


支持 3 种 语法 注释 格式 ， 简 单 说 明 如 下 。 
回 C++ 语言 风格 单行 注释 。 








<?php 
/这 里 是 PHP 注释 语句 
?> 


C 语言 风格 多 行 注释 。 | 
<Iphp | 
PHP 代码 
多 行 注释 | 
*/ | 
be | 
多 行 注释 语法 格式 不 可 幅 套 使 用 ， 所 有 被 包含 在 “/*” 和 “*/” 分 隔 符 内 的 字符 都 是 注释 信息 ， 
将 不 被 解释 。 
Shell 语言 风格 注释 。 


<?php 
# 这 里 是 PHP 注释 语句 
?> 
在 单行 注释 中 ， 不 要 包含 “?> ”字符 ， 和 否则 服务 器 会 误 以 为 PHP 代码 结束 ， 因 此 停止 后 面 代码 
的 解释 。 例 如 ， 在 下 面 代码 中 ， 将 会 看 到 在 网 页 中 显示 的 多 处 字符 ， 如 图 16.1 所 示 。 


<2php 
echo "PHP 代码 !11" // 输 出 字符 串 ?> 不 该 显示 的 注释 语句 
?> 


€3 leahon *] 
PHP 代码!! 生 说 显示 的 注释 语句 ?> 





图 16.1 错误 的 注释 语句 
16.1.3 PHP 指令 分 隔 符 


与 C、Perl 语言 一 样 ，PHP 需要 在 每 个 语句 后 用 分 号 结束 指令 。 一 段 PHP 代码 中 的 结束 标记 隐 
含 表 示 了 一 个 分 号 ， 因 此 在 一 个 PHP 代码 段 中 的 最 后 一 行 可 以 不 用 分 号 结束 。 如 果 后 面 还 有 新 行 ， 
则 代码 段 的 结束 标记 包含 了 行 结束 。 例 如 : 


<2php 
echo "这 是 一 行 命令 ": 
2> 
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| 或 者 
| ”<?php echo "这 是 一 行 命令 "> 
| 
| 在 文档 末尾 的 PHP 代码 段 ,结束 标记 可 以 不 要 ,有些 情况 下 当 使 用 include0 或 者 require() 方 法 时 
全 一 | 省 略 结束 标记 会 更 有 利 ， 这 样 文档 末尾 多 余 的 空格 就 不 会 显示 ， 之 后 仍然 可 以 输出 响应 标 头 。 在 使 用 
Note | 输出 缓冲 时 也 很 便利 ， 就 不 会 看 到 由 包含 文件 生成 的 空格 。 如 : 
<?php echo ' 这 里 省 略 了 结束 标记 ': 


16.2 PHP 数据 类 型 


PHP 支持 8 种 基本 的 数据 类 型 。 包 括 4 种 标量 类 型 ， 如 boolean (布尔 型 )、integer( 整 型 )、float 
| 〈 浮 点 型 ， 也 称 为 double， 即 双 精 度 )、string (字符 串 ); 两 种 复合 类 型 ， 如 array (数组 )、object (对 
| 象 )， 两 种 特殊 类 型 ， 如 resource (资源 )、NULL (NULL)。 
| 


| < 所 注意 :PHP 变量 的 类 型 不 需要 声明 ，PHP 能 够 根据 该 变量 使 用 的 上 下 文 环境 在 运行 时 决定 。 
| 16.2.1 标量 类 型 
标量 类 型 是 基本 数据 结构 ， 用 来 存储 简单 的 、 直 接 的 数据 ，PHP 标量 类 型 包括 4 种 ， 简 单 说 明 如 





| 表 16.1 所 示 。 
| 表 16.1 标量 类 型 
| 类 型 说 了 明 
| boolean (布尔 型 ) 最 简单 的 数据 结构 ， 仅 包含 两 个 值 ， 如 tme〈 真 )》 和 false ( 假 ) 
| string (字符 串 ) 就 是 连续 的 字符 序列 ， 包 含 计算 机 所 能 够 表示 的 一 切 字符 的 集合 
integer ( 整 型 ) 只 包含 整数 ， 包 括 正 整数 和 负 整 数 
float ( 浮 点 型 ) 包含 整数 和 小 数 


1，boolean ( 布尔 型 ) 

布尔 型 是 使 用 频率 最 高 的 数据 类 型 ， 也 是 最 简单 的 类 型 。 布 尔 类 型 是 PHP 4 开始 引进 ， 要 指定 一 
个 布尔 值 ， 使 用 关键 字 true 或 false 即 可 ， 这 两 个 值 不 区 分 大 小 写 。 设置 变量 的 值 为 布尔 型 ， 则 直接 
将 TRUE 或 FALSE 关键 字 赋 值 给 变量 即 可 。 如 : 





<2php 
$foo = Tme:; /设置 变量 Sfoo 的 值 为 真 
?> 


通常 可 以 利用 某 些 运算 符 返 回 布尔 值 ， 并 将 其 传递 给 控制 流程 ， 以 便 控制 流程 方向 。 如 : 


<?php 
站 ($action 一 "show_version") { /一 是 一 个 操作 符 ， 它 检测 两 个 变量 是 否 相 等 ， 并 返回 一 个 布尔 值 
echo "The version is 1.23": 
} 
! ?> 
} 当然 下 面 的 用 法 是 没有 必要 的 : 
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if ($show_separators 一 TRUE) { 
echo "<hr>\n"; 
} 
也 可 以 使 用 下 面 这 种 简单 的 方式 : 
if ($show_ separators) { 
echo "<hr>\n"; 
} 
?> 
< 和 注意 :在 PHP 中， 美元 符号 $ 是 变量 的 标识 符 ， 所 有 变量 都 应 该 以 $ 字 符 开 头 ， 无论 是 声明 变量 ， 
还 是 调用 变量 ， 都 应 该 使 用 $ 符 号 。 


2. 整 型 


现 
) 六 





整 型 数值 只 包含 整数 ,在 32 位 操作 系统 中 ， 整 型 有 效 范围 为 -2147483648~+2147483647。 整 型 值 | 


可 以 使 用 十 进 制 、 十 六 进 制 或 八进制 表示 ， 前 面 可 以 加 上 可 选 的 符号 〈- 或 者 +)。 八 进 制 表示 数字 前 
必须 加 上 0〈 零 )， 十 六 进 制 表示 数字 前 必须 加 上 0x。 例 如 : 


<?php 

$a = 1234: /十 进 制 数 

$a = -123; /负数 

$a = 0123: /八进制 数 〈 等 于 十 进 制 83) 
$a= OxlA; /十 六 进 制 数 〈 等 于 十 进 制 26) 
?> 


PHP 不 支持 无 符号 整数 ， 整 数值 的 字 长 可 以 用 常量 PHP_INT_SIZE 来 表示 ， 自 PHP 4.4.0 和 PHP | 


5.0.5 后 ， 最 大 值 可 以 用 常量 PHP_INT_MAX 来 表示 。 
< 全 注意 : 如 果 向 八进制 数 传递 了 一 个 非法 数字 (8 或 9) ， 则 后 面 其 余数 字 会 被 忽略 。 如 : 


<2php 
var_dump(01090); /八进制 010 = 十 进 制 8 
ke 


如 果 给 定 的 一 个 数 超出 了 整数 范围 ， 将 会 被 解释 为 浮 点 数 。 同 样 如 果 执 行 的 运算 结果 超出 了 整数 
范围 ， 也 会 返回 浮 点 数 。 如 : 


<?php 

Slarge_number = 2147483647: 

var_dump($large_number): // 输 出 为 int(2147483647) 
S$million = 1000000: 

Slarge_number = 50000 * $million; 


var_dump($large_ number): /输出 为 float(50000000000) 
3. 浮 点 型 
浮 点 数 也 叫 双 精度 数 或 者 实数 ， 可 以 使 用 下 面 几 种 方法 定义 。 
<?php 
$a= 1.234: /标注 格式 定义 
$b= 1.2e3: // 科 学 计数 法 格式 定义 


ET 
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| $c=7E-10; /科学 计数 法 格式 定义 
| ?> 
! 
。 | 爷 注 意 ; 汉 点 型 的 数值 只 是 一 个 近似 值 ， 应 过 锡 使 用 泽 点 型 值 进行 大 小 比较 ， 因 此 浮 点 数 结果 精 
| 确 不 到 最 后 一 位 。 如果 确 实 需 要 更 高 的 精度 ， 应 该 使 用 任意 精度 数学 函数 或 者 pmp 函数。 





| 例如 ，floor((0.1+0.7)*10) 通常 会 返回 7， 而 不 是 预期 中 的 8， 因 为 该 结果 内 部 的 表示 其 实 
Note | 是 类 似 7.9， 类 似 的 十 进 制 表达 式 1/3 返回 值 为 0.3。 


4. 字符 串 

字符 串 都 是 由 一 系列 的 字符 组 成 ， 一 个 字符 就 是 一 个 字 节 。 可 以 通过 单 引 号 、 双 引号 、heredoc 
语法 结构 和 nowdoc 语法 结构 (PHP 5.3.0 以 后 ) 定义 字符 串 。 

回 单 引号 

定义 一 个 字符 串 的 最 简单 的 方法 是 用 单 引号 把 它 包 围 起 来 。 如 果 想 要 输出 一 个 单 引号 , 需 在 它 的 
前 面 加 个 反 斜 线 〈\)。 在 单 引号 前 或 在 字符 串 的 结尾 处 想 要 输出 反 斜 线 ， 需 要 输入 两 条 〈\)。 注 意 ， 
如 果 在 任何 其 他 的 字符 前 加 了 反 斜 线 ， 反 和 斜 线 将 会 被 直接 输出 。 


<?php 
echo "单行 字符 串 ': 

| echo ' 多 行 

| 字符 串 '; 

| echo "I\'ll be back"™: /输出 : "TIl be back" 

| echo 'C:\*.*9'; /| 输出: C:\W*.*? 

| echo You deleted Ce /输出 : You deleted C:\*.*? 
echo 'This will not expand: \n a newline'; /输出 : This will not expand: \n a newline 
echo "Variables do not $expand S$either’: // 输 出: Variables do not Sexpand S$either 
?> 


在 单 引号 字符 串 中 的 变量 和 特殊 含义 的 字符 将 不 会 被 替换 ， 按 普通 字符 输出 ,但 是 双 引号 所 包含 
| 的 变量 会 自动 被 替换 为 实际 数值 。 
| 加 双 引 号 


| 如果 字符 串 是 包围 在 双 引 号 〔") 中 ，PHP 将 对 一 些 特 殊 的 字符 进行 解析 ， 这 些 特 殊 字符 都 要 通 
| 过 转 义 符 来 显示 ， 常 用 转 义 字符 说 明 如 表 16.2 所 示 。 
! 


表 16.2 常用 转 义 字符 























| 转 义 字符 输 出 

| un 换行 (LF or 0x0A (10) in ASCID 

| vr 回 车 (CR or 0x0D (13) in ASCID 

| 上 水 平方 向 的 tab(HT or 0x09 (9) in ASCID 

| vw 竖 直方 向 的 tab (VT or 0x0B (11) in ASCID (since PHP 5.2.5) 
| ¥ 换 页 (FF or 0x0C (12) in ASCID (since PHP 5.2.5) 

| \ 反 昏 线 

| 让 美金 dollar 标 记 

| 双 引 号 

| \[0-7]01.3} 符合 该 表达 式 顺 序 的 字符 串 是 一 个 八进制 的 字符 








| \x[0-9A-Fa-f] {1.2} 符合 该 表达 式 顺序 的 字符 串 是 一 个 十 六 进 制 的 字符 
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| 
与 单 引号 字符 串 一 样 ， 如 果 输 出 上 述 之 外 的 字符 ， 反 斜 线 会 被 打印 出 来 。 | 
heredoc 结构 | 
第 3 种 定义 字符 串 的 方法 是 用 heredoe 句法 结构 ，<<<。 在 该 提示 符 后 面 ， 要 定义 个 标识 符 ， 然 | 
后 是 一 个 新 行 。 接 下 来 是 字符 串 本 身 ， 最 后 要 用 前 面 定义 的 标识 符 作为 结束 标志 。 | 全 
结束 时 所 引用 的 标识 符 必须 在 一 行 的 开始 位 置 , 而且 标识 符 的 命名 也 要 像 其 他 标签 一 样 遵守 PHP | 全 
的 规则 :只 能 包含 字母 、 数 字 和 下 划 线 ， 并 且 不 能 用 数字 和 下 划 线 作为 开头 。 


) 六 





<?php 

$ str=<<<EOD 
Example of string | 
spanning multiple lines | 
using hereda syntax. ! 
EOD: 
echo $str 
?> 


4 注意 ;结束 标识 符 这 行 除了 可 能 有 一 个 分 号 (; ) 外 ， 绝 对 不 能 包括 其 他 字符 。 这 意味 着 标识 符 
不 能 缩 进 ， 分 号 的 前 后 也 不 能 有 任何 空白 或 Tabs 键 。 更 重要 的 是 结束 标识 符 的 前 面 必 须 | 
是 个 被 本 地 操作 系统 认可 的 新 行 标签 ， 如 在 UNIX 和 Mac OS 和 系统 中 是 由 ， 而 结束 标 | 
识 符 (可 能 有 个 分 号 ) 的 后 面 也 必须 跟 个 新 行 标 签 。 


heredoc 结构 就 像 是 没有 使 用 双 引 号 的 双 引 号 字符 串 , 在 heredoc 结构 中 引号 不 用 被 蔡 换 ， 但 是 上 
文中 列 出 的 字符 (\n 等 ) 也 可 使 用 。 变 量 将 被 蔡 换 ， 但 在 heredoc 结构 中 字符 串 表达 复杂 变量 时 ， 要 | 
格外 小 心 。 

nowdoc 结构 

如 果 说 heredoc 结构 类 似 于 双 引 号 字符 串 , 那么 nowdoc 结构 就 是 类 似 于 单 引号 字符 串 的 .nowdoc 
结构 很 像 heredoc 结构 ， 但 是 nowdoc 不 进行 解析 操作 。 这 种 结构 很 适合 用 在 不 需要 进行 转 义 的 PHP 
代码 和 其 他 大 段 文本 。 

一 个 nowdoc 结构 也 用 和 heredoc 结构 一 样 的 标记 <<<, 但 是 跟 在 后 面 的 标志 符 要 用 单 引号 括 起 来 ， 
即 <<<EOD'。heredoc 结构 的 所 有 规则 适用 于 nowdoc 结构 ， 尤 其 是 结束 标志 符 的 规则 。 例 如 : 

<?php 

$str =<<<EOD' 

Example of string 

spanning multiple lines 

using nowdoc syntax. 

EOD: 

ME 


16.2.2 ”复合 类 型 
合 类 型 包括 两 种 数据 ， 即 数组 和 对 象 ， 简 单 说 明 如 表 16.3 所 示 。 








表 16.3 复合 类 型 | 

类 型 说 有 明 | 
array (数组 ) 一 组 有 序数 据 集合 | 
object (对 象 ) 对 象 是 类 的 实例 ， 使 用 new 命令 创建 i 
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1 数组 
在 PHP 中 数组 实际 上 是 一 个 有 序 映射 。 映 射 是 一 种 把 values 关联 到 keys 的 类 型 。 此 类 型 在 很 多 
方面 做 了 优化 ， 因 此 可 以 把 它 当成 真正 的 数组 ， 或 列表 (向 量 )、 散 列表 (是 映射 的 一 种 实现 )、 字 上 典 、 
集合 、 栈 、 队列 以 及 更 多 可 能 性 . 数组 元 素 的 值 也 可 以 是 另 一 个 数组 。 树 形 结构 和 多 维 数组 也 是 允许 的 。 
定义 数组 可 以 使 用 amray0 结 构 。 该 函数 能 够 接受 任意 数量 用 逗号 分 隔 的 键 (key) / 值 (value) 对 ， 
键 值 之 问 通过 -> 运算 符 连接 。 键 key) 可 以 是 一 个 整数 或 字符 串 ， 值 (value) 可 以 是 任意 类 型 的 数 
据 。 例 如 : 





<?php 

S$arr = array("foo" => "bar", 12 => tme): 

echo $arr["foo"]: //bar 
echo $arr[12]; Nn 
?> 


在 PHP 中 索引 数组 与 关联 数组 是 相同 的 ， 它 们 都 可 以 同时 包含 整 型 和 字符 串 的 下 标 。 例 如 : 


<?php 

S$arr = array("somearray" => array(6 => 5, 13 => 9. "a" => 42)); 
echo $arr["somearray"][6]: /5 

echo $arr["somearray"][13]: /9 

echo $arr["somearray"]["a"]: /42 

?> 


如 果 给 出 的 值 没 有 指定 键 名 ， 则 取 当 前 最 大 的 整数 索引 值 ， 而 新 的 键 名 将 是 该 值 加 1。 如 果 指定 
的 键 名 已 经 有 了 值 ， 则 该 值 会 被 覆盖 。 

使 用 true 作为 键 名 , 将 定义 整数 1 为 键 名 。 使 用 false 作为 键 名 , 将 定义 整数 0 为 键 名 。 使 用 NULL 
作为 键 名 ， 将 定义 空 字符 串 为 键 名 。 使 用 空 字符 串 作为 键 名 将 新 建 (或 覆盖 ) 一 个 用 空 字符 串 作为 键 
名 的 值 ， 这 和 用 空 的 方 括号 不 一 样 。 


< 注意 ;不 能 使 用 数组 和 对 象 作为 键 (key) 。 

另外 ， 还 可 以 通过 在 方 括号 内 指定 键 名 来 给 数组 赋值 。 也 可 以 省 略 键 名 ,在 这 种 情况 下 给 变量 名 
加 上 一 对 空 的 方 括号 “[]”)。 如 : 

Sarr[key] = value: 

$ar[] = value; 

这 是 一 种 定义 数组 的 替换 方法 。 要 改变 一 个 值 ， 只 要 给 它 赋 一 个 新 值 。 如 果 要 删除 一 个 键 / 值 对 ， 
可 以 使 用 unsetO 函 数 。 如 : 


<?php 

Sarr = array(5 => 1, 12 => 2): 

S$arr[] = 56; /等 于 $ar[13] = 56: 

S$arr["x"] = 42: /添加 一 个 新 元 素 ， 键 名 为 "x" 
unset($arr[5]): // 从 数组 中 移 除 一 个 元 素 
unset($arr):; // 删 除 整 个 数组 

?> 


< 狼 注 意 : 这 里 所 使 用 的 最 大 整数 键 名 不 一 定 就 在 当前 数组 中 。 它 只 要 在 上 次 数组 重新 生成 索引 后 曾 
经 存在 过 就 行 了 。 如 : 
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<?php 
Sarray = amTay(1. 2. 3. 4. 5): // 创 建 一 个 简单 的 数组 


Print r($array); 

// 现 在 删除 其 中 的 所 有 元 素 ， 但 保持 数组 本 身 不 变 

foreach ($array as $1 => $value) { | 
unset($array[$i]): | 


a 
) 六 





ee 
Sarray[] = 6: /添加 一 个 单元 注意 新 的 键 名 是 5， 而 不 0) | 
Print 1($array); | 
Sarray = array_values($array): /重新 索引 | 
’ | 
| 





16.2 输出 效果 


2 对象 | 
对 象 是 面向 对 象 编程 的 基础 ， 在 PHP 中 使 用 new 语句 实例 化 一 个 类 ， 即 可 创建 一 个 对 象 ， 如 : | 
<?php | 
class foo{ // 创 建 一 个 类 | 
function do foo0{ | 
echo "Doing foo | 
} | 
} | 
S$bar = new foo: // 创 建 对 象 | 
$bar->do_foo(): /调用 对 象 包含 的 函数 
We 


16.2.3 ”特殊 类 型 
特殊 数据 类 型 包括 资源 和 空 值 两 种 ， 简 单 说 明 如 表 16.4 所 示 。 





表 16.4 特殊 类 型 

类 型 说 了 明 

ug 《资源 | 宙 源 也 称 为 句柄 ， 是 一 种 特殊 的 变量 ， 保 存 到 外 部 资源 的 一 个 引用 。 资源 一 般 通 过 专 | 
门 的 函数 来 定义 和 使 用 





null ( 空 值 7 特殊 的 值 ， 表 示 变 量 没有 值 ， 唯 一 的 值 是 null | 
| 
资源 类 型 从 PHP 4 开始 引进 ， 由 于 资源 类 型 变量 保存 有 为 打开 文件 、 数 据 库 连 接 、 图 形 画布 区 域 | 
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等 的 特殊 句柄 ， 因 此 将 其 他 类 型 的 值 转换 为 资源 类 型 没有 意义 。 

在 使 用 资源 时 ， 系 统 会 自动 启用 垃圾 回收 机 制 ,释放 不 再 使 用 的 资源 ,避免 占用 系统 资源 。 因 此 ， 
很 少 需要 手工 释放 内 存 。 

2.， 空 值 

空 值 就 是 表示 该 变量 没有 设置 任何 值 ， 其 值 为 一 个 特殊 的 值 null， 该 值 不 区 分 大 小 写 ，null 和 
NULL 是 等 效 的 。 当 变量 被 赋予 空 值 ， 可 能 有 3 种 情况 : 变量 还 没有 被 赋值 ， 或 者 变量 被 主动 赋 null 
空 值 ， 或 者 被 unset0 函 数 处 理 过 的 变量 。 如 : 

<2php 

S$var=NULL: 

?> 

将 一 个 变量 转换 为 null 类 型 ， 将 会 删除 该 变量 。 从 PHP 4 开始 ，unset0 函 数 就 不 再 有 返回 值 ， 所 
以 用 户 不 要 试图 获取 或 者 输出 unsetO。 

使 用 is_null0 函 数 可 以 判断 变量 是 否 为 null， 该 函数 返回 值 为 布尔 值 ， 如 果 变 量 为 null， 则 返回 
true， 否 则 返回 false， 而 unset0 函 数 是 用 来 销毁 指定 的 变量 。 


16.2.4 ”类 型 转换 


PHP 是 一 种 弱 类 型 语言 ， 但 是 在 开发 中 还 是 需要 用 到 类 型 转换 。PHP 中 的 类 型 转换 与 C 语言 一 
样 ， 非 常 简单 ， 只 需要 在 变量 前 面 加 上 用 括号 括 起 来 的 类 型 名 称 即 可 ， 具 体 说 明 如 表 16.5 所 示 。 


表 16.5 类 型 强制 转换 














转换 操作 符 说 了 明 
(boolean) 转换 为 布尔 型 
string) 转换 为 字符 串 
(integer) 转换 为 整 型 
float 转换 为 浮 点 数 
arra 转换 为 数组 
object 转换 为 对 象 


除了 使 用 强制 转换 外 ， 还 可 以 使 用 settype0 函 数 转换 数据 类 型 。 该 函数 包含 参数 值 ， 第 一 个 值 为 
变量 名 , 第 二 个 参数 值 为 要 转换 的 类 型 字符 串 , 包括 boolean float、 integer、 string、 null、 array、 object。 
settypeO 函 数 返 回 值 为 布尔 值 ， 如 果 数 据 类 型 转换 成 功 ， 则 返回 tmue， 否 则 返回 false。 例 如 ， 输 入 下 
面 代码 ， 然 后 运行 结果 如 图 16.3 所 示 。 


<?php 

Snum = '3.1415926abc' // 声 明 字 符 串 变 量 

echo (integer)$num: /把 变量 强制 转换 为 整 型 

echo <p> ': 

echo $num: // 输 出 原始 变量 值 

echo '<p>": 

echo settype(Snum. 'float’): // 输 出 把 变量 转换 为 浮 点 数 的 结果 
echo ‘<p>"; 

echo $num: // 被 转换 为 浮 点 数 后 的 变量 值 

?> 
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图 16.3 输出 数据 类 型 转换 


1. 转换 为 布尔 值 | 
要 明确 地 将 一 个 值 转换 成 boolean， 应 该 使 用 (bool) 或 者 (boolean) 来 强制 转换 。 但 是 很 多 情况 下 不 | 
需要 用 强制 转换 ， 因 为 当 运算 符 、 函 数 或 者 流程 控制 结构 需要 一 个 boolean 参数 时 , 该 值 会 被 自动 转换 。 | 
在 PHP 中， 并 不 是 false 才 是 假 的 ， 在 某 些 特殊 情况 下 ， 下 面 这 些 boolean 值 也 被 认为 是 假 的 。 
0: 整 型 值 零 。 
0.0: 浮 点 型 值 零 。 | 
"0"， 字符 员 值 零 。 | 
"， 空 白字 符 串 。 | 
空 数组 :不 包括 任何 元 素 的 数组 。 
空 对 象 : 不 包括 任何 成 员 变量 的 对 象 ( 仅 PHP 4.0 适用 ) 。 | 
特殊 类 型 NULL 〈 包 括 尚未 设 定 的 变量 ) 。 | 
从 没有 任何 标记 的 XML 文档 生成 的 SimpleXML 对 象 。 
其 他 所 有 其 他 值 都 被 认为 是 tue (包括 任何 资源 )。 注 意 ，-1 和 其 他 非 零 值 〈 不 论 正 负 ) 一 样 ， 
被 认为 是 真 。 


国共 办 办 办 办 欠 加 


< | 
var dump(booD ™"): /lbool(false) | 
Var_dump((booD 1): //bool(true) | 
var_dump((booD "1"); /boolttme) | 
Var_dump((booD arrayO): //bool(false) | 
var_dump((booD "false"): //bool(true) | 
?> | 
| 

2， 转 换 为 整 型 | 


要 明确 地 将 一 个 值 转换 为 整 型 ， 可 以 使 用 (int) 或 (integen) 强 制 转换 。 不 过 大 多 数 情况 下 都 不 需要 | 
强制 转换 ， 因 为 当 运 算 符 、 函 数 或 流程 控制 需要 一 个 整 型 参数 时 ， 值 会 自动 转换 。 还 可 以 通过 函数 | 
intval0 将 一 个 值 转换 成 整 型 。 | 

当 从 布尔 值 转换 为 整数 值 时 ，false 将 被 转换 为 0，tmue 将 被 转换 为 1。 当 从 浮 点 数 转换 成 整数 时 ，| 
将 向 零 取 整 。 如 果 浮 点 数 超出 了 整数 范围 ， 则 结果 不 确定 ， 因 为 没有 足够 的 精度 把 浮 点 数 转换 为 确切 | 
的 整数 结果 ， 在 此 情况 下 没有 和 警告， 甚至 没有 任何 通知 。 


< 所 注意 : 不 要 将 未 知 的 分 数 强制 转换 为 整数 型 ， 这 样 会 导致 不 可 预料 的 结果 。 如 : 


<?php 
echo (int) ( (0.1+0.7) * 10): // 显 示 7 
2 


3. 转换 为 字符 串 
一 个 值 可 以 通过 在 其 前 面 加 上 (string) 或 用 strval0 函 数 来 转变 成 字符 串 ,在 一 个 需要 字符 串 的 表达 
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| 式 中 ， 字 符 串 会 自动 转变 。 例 如 ， 在 使 用 函数 echo0 或 者 print0 时 ， 或 在 一 个 变量 和 一 个 字符 串 进行 
| 比较 时 ， 就 会 发 生 这 种 转变 类 型 。 
| 一 个 布尔 型 的 true 值 被 转换 成 字符 串 "1"， 而 布尔 型 的 false 值 将 被 转换 成 "( 空 的 字符 串 ) 。 
这 种 转变 可 以 在 布尔 值 和 字符 串 之 间 随 意 进行 。 
加 ”一 个 整数 或 浮 点 数 将 被 转变 为 数字 的 字面 样式 的 字符 串 (包括 浮 点 数 中 的 指数 部 分 ) ， 使 


Note | 用 指数 计数 法 的 浮 点 数 (16.1E+6) 也 可 转变 。 
回 ”数组 转换 成 字符 串 "Array"， 因 此 ，echo0 和 print0 无 法 显示 出 数组 的 值 。 如 果 显示 一 个 数组 


值 ， 可 以 用 echo $ar['foo"] 这 种 结构 。 
回 ”资源 总 会 被 转变 成 "Resource id #1" 这 种 结构 的 字符 串 ， 其 中 的 1 是 PHP 分 配给 该 资源 的 独 
特 数字 。 
回 NULL 总 是 被 转变 成 空 的 字符 串 。 
| 16.2.5 ”检测 数据 类 型 
| PHP 内 置 了 众多 检测 数据 类 型 的 函数 , 可 以 根据 需要 对 不 同类 型 数据 进行 检测 , 判断 变量 是 否 属 
| 于 某 种 特定 的 类 型 ， 如 果 符 合 则 返回 tue， 否 则 返回 false。 具 体 说 明 如 表 16.6 所 示 。 
| 
表 16.6 数据 类 型 检测 函数 


例如 ， 下 面 示例 先 使 用 is_float0 函 数 检测 变量 是 否 为 浮 点 数 ， 然 后 根据 检测 返回 值 ， 即 时 进行 提示 。 


| 检 测 函数 说 了 明 
| is bool 检测 变量 是 否 为 布尔 值 类 型 

| is_string 检测 变量 是 否 为 字符 串 类 型 

| is float 检测 变量 是 否 为 浮 点 数 类 型 

| is double 检测 变量 是 否 为 浮 点 数 类 型 

| is integer 检测 变量 是 否 为 整 型 

| is_int 检测 变量 是 否 为 整 型 

| is null 检测 变量 是 否 为 空 值 类 型 

| is arral 检测 变量 是 否 为 数组 类 型 

| is object 检测 变量 是 否 为 对 象 类 型 

| is_numeric 检测 变量 是 否 为 数字 ， 或 者 是 数字 组 成 的 字符 串 
上 


<?php 
$num = '3.1415926abc': 
iflis float($num)) 
echo "变量 Snum 是 浮 点 数 ! ': 


echo ' 对 不 起 ， 变 量 $num 不 是 浮 点 数 ! "; 
?> 


16.3 PHP 变量 和 常量 


| 本 节 主 要 介绍 PHP 变量 和 常量 的 基本 使 用 规格 。 变 量 包含 普通 变量 、 可 变 变量 和 预定 义 变量 ， 
|! 常量 包括 普通 常量 和 预定 义 常量 。 
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16.3.1 声明 和 使 用 变量 


变量 本 质 上 是 系统 内 存 中 单元 的 命名 ,系统 为 程序 中 每 个 变量 分 配 一 个 存储 单元 , 在 这 些 存 储 单 | 
元 中 可 以 存储 任何 类 型 的 数据 。 | 

与 其 他 语言 不 同 ， 在 PHP 中 使 用 变量 之 前 是 不 需要 特别 声明 的 (注意 ， 在 PHP 4 之 前 是 需要 声明 
变量 的 )， 只 需要 为 变量 赋值 即 可 ,但 是 PHP 中 的 变量 名 称 必须 使 用 字符 作为 前 级 ， 变 量 区 分 大 小 写 。 | 

为 变量 赋值 ， 可 以 使 用 = 运算 符 实 现 ， 左 侧 运算 符 左 侧 为 变量 ， 右 侧 为 所 赋 的 值 ， 如 ; | 








| 
S$num ='3.1415926abe'; | 
n> | 


变量 名 不 能 够 以 数字 、 特 殊 字符 开头 。 除 了 直接 赋值 外 ， 还 可 以 使 用 如 下 方法 为 变量 赋值 。 
一 是 变量 之 间 的 赋值 。 如 : 


$numl ="'3.1415926'; 


Snum2 = $numl 
echo $num?2; // 显 示 '3.1415926' 
?> 


< 所 注意 :变量 之 问 赋值 ， 只 是 传递 值 ， 变 量 在 内 存 中 的 存储 单元 还 是 各 自 独立 的 ， 互 不 干扰 ， 


二 是 引用 赋值 。 从 PHP 4 开始 ，PHP 引入 了 引用 赋值 的 概念 。 引 用 的 概念 是 ， 用 不 同 的 名 称 访问 | 
同一 个 变量 的 内 容 ， 当 改变 其 中 一 个 变量 的 值 时 ， 另 一 个 变量 的 值 也 跟着 发 生变 化 。 使 用 & 运 算 符 表 | 
示 引 用 ， 例 如， 在 下 面 示例 中 ，$num2 引用 $num1， 修 改 $numl 变量 的 值 ， 则 $num2 变量 的 值 也 随 之 | 
发 生变 化 。 | 


apip | 
$numl ="3.1415926'; | 
Snum?2 = &$numl ; /引用 变量 Snuml | 
$numl = 'string'; /修改 变量 Snuml 的 值 | 
echo $num2; // 显 示 变 量 $num2 的 值 也 被 更 改 为 字符 串 'string' | 
?> 上 


16.3.2 ”变量 作用 域 


变量 都 必须 在 有 效 的 范围 内 使 用 ,如果 超出 有 效 范围 ， 则 变量 就 失去 意义 。 变 量 的 作用 域 如 表 16.7 
所 示 。 


表 16.7 变量 的 作用 域 


作 用 域 说 阴 
局 部 变量 | 在 函数 的 内 部 定义 的 变量 ， 其 作用 域 是 所 在 函数 
被 定义 在 所 有 函数 以 外 的 变量 ， 其 作用 域 是 整个 PHP 文件 ， 但 是 用 户 自 定义 的 函数 内 部 是 不 


En 可 用 的 。 如 果 希 望 在 用 户 自 定 义 的 函数 内 部 使 用 全 局 变量 ， 则 应 该 使 用 global 关键 字 声明 变量 











能 够 在 函数 调用 结束 之 后 仍 可 以 保留 变量 值 , 当 再 次 回 到 作用 域 时 , 又 可 以 继续 使 用 原来 的 值 。 
静态 变量 | 而 一 般 的 变量 是 在 函数 调用 结束 之 后 ， 其 存储 的 数据 将 被 清除 ， 所 占用 的 内 存 空间 将 被 释放 。 
但 是 要 使 用 静态 变量 ， 则 必须 使 用 static 关键 字 声 明 变 量 
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| 例如， 在 下 面 示例 中 ， 函 数 体内 是 无 法 引用 全 局 变量 的 。 
| 
! 


Im // 声 明 全 局 变量 
办 | functiontestO{ 
鲜 de. /下 用 全 局 变量 ， 则 无 效 
| 国 枉 
Tote 四 < /调用 函数 ， 显 示 为 空 
| ?> 
| 但是， 如 果 在 函数 体 使 用 global 关键 字 声 明 变 量 之 后 ， 则 可 以 在 函数 内 引用 全 局 变量 。 
| 
| gal; // 声 明 全 局 变量 
| function testO{ 
| global $a; // 声 明 全 局 变量 
| echo $a; // 引 用 全 局 变量 ， 有 效 
| 
| ta0: // 调 用 函数 ， 显 示 为 1 
| 


静态 变量 仅 在 局 部 函数 域 中 存在 ,但 当 程 序 执行 离开 此 作用 域 时 ， 其 值 并 不 会 丢失 。 例 如 ， 在 下 
面 示例 中 静态 变量 $count 能 够 持续 存储 现在 芝 加 的 值 。 


<?php 
function testO{ 
static $count = 0; // 声 明 静 态 变 量 

| S$count++: // 递 加 变量 值 
| echo $count:; // 显 示 变量 值 
| ff($count <10) { // 如 果 变 量 值 小 于 10， 则 继续 调用 函数 
| testO: 
| } 
| } 
| testO: /调用 函数 
| echo "<p>": 
| testO: // 第 二 次 调用 函数 
| 


| 静态 变量 提供 了 一 种 处 理 递 归 函 数 的 方法 。 递 归 函 数 是 一 种 调用 自己 的 函数 ,用 户 在 写 递归 函数 
| 时 要 小 心 ， 因 为 可 能 会 无 穷 递归 下 去 ， 所 以 必须 确保 有 充分 的 方法 来 中 止 递归 。 这 个 简单 的 函数 递归 
| 计数 到 10， 使 用 静态 变量 $count 来 判断 何 时 停止 ， 当 时 即便 函数 中 止 ， 如 果 继 续 调用 函数 ， 用 户 会 
| 发现 $count 的 值 是 从 11 开始 的 ， 而 不 是 0， 演 示 效 果 如 图 16.4 所 示 。 
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| 图 16.4 递归 函数 中 的 静态 变量 应 用 
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16.3.3 可 变 变量 


可 变 变量 是 一 种 特殊 的 变量 ， 它 允许 动态 改变 变量 的 名 称 ， 也 就 是 说 该 变量 的 名 称 由 另外 一 个 变 | 
量 的 值 来 确定 。 定 义 可 变 变 量 的 方法 是 在 变量 前 面 添加 一 个 $ 符 号 。 如 ; 





<?php 

$a="b"; // 声 明 变 量 $a， 该 变量 的 值 为 字符 串 b | 

SpE // 声 明 变量 Sb， 该 变量 的 值 为 数字 2 | 

echo $a: // 显 示 变量 $a 的 值 | 

echo $$a: // 通 过 可 变 变量 输出 变量 Sb 的 值 2 | 

?> | 
| 


有 时 使 用 可 变 变量 名 是 很 方便 的 。 一 个 可 变 变 量 获 取 了 一 个 普通 变量 的 值 作为 这 个 可 变 变量 的 变 
量 名 。 如 : 

<?php 

$a = 'hello'; 

$$a = 'world'; 

echo "$a ${$a}"; 

echo "$a $hello": 

?> 

在 上 面 示例 中 , 可 变 变量 $$a 的 名 称 可 以 是 变量 $a 的 值 , 可 以 直接 使 用 变量 $a 的 值 来 引用 可 变 变 
量 ， 并 获取 它 的 值 。 其 中 {$a} 表 达 式 表示 获取 变量 $a 的 值 ， 因 此 ${$a} 和 S$hello 所 表达 的 意思 相同 ， 
都 表示 可 变 变 量 $$a 的 一 个 名 称 。 


16.3.4 ”预定 义 变量 
PHP 提供 了 大 量 的 预定 义 变量 ,通过 这 些 预 定义 变量 可 以 获取 用 户 会 话 、 用 户 操作 环境 和 本 地 操 


作 系 统 等 人 由 于 许多 变量 依赖 于 运行 的 服务 器 的 版 本 和 设置 及 其 他 因素 ， 所 以 并 没有 详细 地 说 明 
文档 。 一 些 预定 义 变量 在 PHP 以 命令 行 形式 运行 时 并 不 生效 。 常 用 预定 义 变量 说 明 如 表 16.8 所 示 。 


表 16.8 PHP 常用 预定 义 变量 



































预定 义 变量 说 阴 | 
SGLOBALS 引用 全 局 作用 域 中 可 用 的 全 部 变量 | 
$_ SERVER 服务 器 和 执行 环境 信息 | 
$ GET HTTP GET 变量 | 
$ POST HTTP POST 变量 | 
$ FILES HTTP 文件 上 传 变量 | 
$ REQUEST HTTP Request 变量 | 
$ SESSION Session 变量 | 
3 ENV 环境 变量 | 
$ COOKIE HTTP Cookies | 
Sphp_errormsg 前 一 个 错误 信息 | 
SHTTP RAW POST DATA 原生 POST 数据 | 


“He 
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| 续 表 
| 预定 义 变量 说 了 明 
| Shttp_response_header HTTP 响应 头 

全 | Sargc 传递 给 脚本 的 参数 数目 

SN Sa 传递 给 脚本 的 参数 数组 


16.4 PHP 运算 符 


! 

| 运算 符 是 用 来 对 变量 、 常 量 和 数据 进行 计算 的 符号 ， 它 可 以 通过 一 或 多 个 值 即 表达 式 ) 产生 另 

| 一 个 值 ( 即 整个 结构 为 一 个 表达 式 )。 因 此 ， 用 户 可 以 理解 任何 会 返回 一 个 值 的 结构 都 是 运算 符 ， 而 

| 那些 没有 返回 值 的 就 不 是 运算 符 , 如 函数 可 以 视 为 一 个 运算 符 , 而 echo 命令 就 不 是 一 个 运算 符 。 PHP 

| 提供 了 3 种 类 型 的 运算 符 。 

一 元 运算 符 : 只 运算 一 个 值 ， 如 ! ( 取 反 运算 符 ) 或 ++〈 递 加 运算 符 ) 。 

有 限 二 元 运算 符 ，PHP 支持 的 大 多 数 运算 符 都 是 这 种 。 

三 元 运算 符 : ?:。 它 应 该 被 用 来 根据 一 个 表达 式 在 另 两 个 表达 式 中 选择 一 个 ， 而 不 是 用 来 在 
两 个 语句 或 者 程序 路 线 中 选择 。 注 意 ， 为 了 避免 误 用 ， 建 议 把 整个 三 元 表达 式 放 在 扩 号 里 。 


| 16.4.1 算术 运算 符 


加 





算术 运算 符 用 来 处 理 四 则 运算 的 符号 ， 在 数学 计算 中 应 用 比较 多 。 常 用 算术 运算 符 如 表 16.9 所 示 。 


| 表 16.9 算术 运算 符 

| 算术 运算 符 说 了 明 

| 取 反 。 如 -$a 表示 变量 $a 的 负 值 

| + 加 法 。 如 $a+ $b 

| - 减法 。 如 Sa - $b 

| * 乘法 。 如 a* Sb 

| / 除法 。 如 $a / $b 

| % 取 模 。 如 $a % $b， 获 得 $a 除 以 $b 的 余数 


16.4.2 ”赋值 运算 符 


基本 的 赋值 运算 符 是 =。 一 般 用 户 会 把 = 符号 误解 为 “等 于 ”， 其 实 不 是 的 。 它 实际 上 意味 着 把 右 
边 表达 式 的 值 赋 给 左边 的 运算 数 。 
赋值 运算 表达 式 的 值 也 就 是 所 赋 的 值 。 也 就 是 说 ,“$a= 3” 的 值 是 3。 这 样 就 可 以 做 一 些小 技巧 ， 如 : 


<?php 

$a= ($b=4)+5: 

?> 

: 在 上 面 示例 中 ， 变 量 $a 的 值 为 9， 而 变量 $b 的 值 就 成 了 4。 

| 在 基本 赋值 运算 符 之 外 ， 还 有 适合 于 所 有 二 元 算术 、 数 组 集合 和 字符 串 运 算 符 的 组 合 运算 符 〈 如 
| 表 16.10 所 示 )， 这 样 可 以 在 一 个 表达 式 中 使 用 它 的 值 并 把 表达 式 的 结果 赋 给 它 。 
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SI | 

表 16.10 ”组合 运 算 符 | 

组 合 运算 符 说 了 明 | 
汉 先 连 接 后 赋值 。 如 $a .= $b 等 于 $a = $a . $b | 
二 先 加 后 赋值 。 如 $a += $b 等 于 $a = $a+ $b | 全 fF 


先 减 后 赋值 。 如 $a 一 $b 等 于 $a = $a - $b | 


先 乘 后 赋值 。 如 Sar- Sb 等 于 $a 二 $a * $b 


先 除 后 赋值 。 如 $a /= $b 等 于 $a = $a/ $b 














16.4.3 字符 串 运 算 符 


有 了 两 个 字符 串 运算 符 。 一 个 是 连接 运算 符 〈.)， 它 返回 其 左右 参数 连接 后 的 字符 串 。 另 一 个 是 连 
接 赋值 运算 符 〈.=)， 它 将 右边 参数 附加 到 左边 的 参数 后 。 如 : 

<?php 

$a = "Hello "; | 
$b= $a. "World!"; /Sb ="Hello World!" | 
$a="Hello "; | 
$a = "World!"; //$a = "Hello World!" 
?> 


16.4.4 位 运算 符 


位 运算 符 允 许 对 整 型 数 中 指定 的 位 进行 求 值 和 操作 。 如 果 左 右 参数 都 是 字符 串 ， 则 位 运算 符 将 操 | 
作 字 符 的 ASCII 值 。 在 PHP 中 位 运算 符 说 明 如 表 16.11 所 示 。 


表 16.11 位 运算 符 


位 运算 符 说 阴 
& 按 位 与 (And) 。 如 $a & $b 将 把 $a 和 $b 中 都 为 1 的 位 设 为 1 | 
按 位 或 Or) 。 如 $a | $b Or 将 把 $a 或 者 $b 中 为 1 的 位 设 为 1 | 
^ 按 位 异 或 (Xor) 。 如 $a 人 ^ $b 将 把 $a 和 $b 中 不 同 的 位 设 为 1 | 
按 位 非 (Not) 。~ $a 将 $a 中 为 0 的 位 设 为 1， 反 之 亦 然 | 
<< 左 移 (Shift lef) 。 如 $a << $b 将 $a 中 的 位 向 左 移动 $b 次 〈 每 一 次 移动 都 表示 乘 以 2) | 
>> 右 移 (Shift right) 。 如 $a >> $b 将 $a 中 的 位 向 右 移动 $b 次 〈 每 一 次 移动 都 表示 除 以 2) | 
例如 ， 在 下 面 示例 中 使 用 位 运算 符 对 变量 中 的 值 进 行 位 运算 操作 。 | 
Aaphp | 
echo 12^9; // 输 出 为 3 | 
echo "12" 和 "gn: /| 输出 退 格 字符 (ascii 8》 | 
echo "hallo" ^ "hello": /输出 ascii 值 #0 #4 #0 #0 #0 | 
echo 2 人 "3" /输出 1 ! 
CChO2 Ys 3, /| 输出 1 | 
> | 


16.4.5 ”比较 运算 符 


比较 运算 符 允 许 对 两 个 值 进行 比较 ， 返 回 结果 为 布尔 值 ， 如 果 比 较 结果 为 真 ， 则 返回 值 为 tme， 
否则 返回 值 为 false。PHP 中 的 比较 运算 符 如 表 16.12 所 示 。 
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| 2 
表 16.12 ”比较 运算 符 
比较 运算 符 说 明 
二 等 于 。 如 $a 一 $b 返回 值 等 于 twe， 则 说 明 $a 等 于 $b 
一 - 全 等 。 如 $a 一 二 $b 返回 值 等 于 trtue， 则 说 明 $a 等 于 $b， 并 且 它们 的 类 型 也 相同 
= 不 等 。 如 $a !=$b 返回 值 等 于 tme， 则 说 明 $a 不 等 于 $b 












































一 不 等 。 如 Sa >$b 返回 值 等 于 tue， 则 说 明 Sa 不 等 于 Sb 
| 一 非 全 等 。 如 $a ! 一 Sb 返回 值 等 于 tme， 则 说 明 Sa 不 等 于 $b， 或 者 它们 的 类 型 不 同 
| < 小 于 。 如 $a <$b 返回 值 等 于 true， 则 说 明 $a 严格 小 于 $b 

| > 大 于 。 如 $a >$b 返回 值 等 于 tue， 则 说 明 $a 严格 大 于 $b 

| 一 小 于 等 于 。 如 $a <=$b 返回 值 等 于 tne， 则 说 明 Sa 小 于 或 者 等 于 Sb 

| 二 大 于 等 于 。 如 $a >-Sb 返回 值 等 于 tne， 则 说 明 Sa 大 于 或 者 等 于 Sb 


| 如 果 比 较 一 个 整数 和 字符 串 ， 则 字符 串 会 被 转换 为 整数 。 如 果 比 较 两 个 数字 字符 串 ， 则 作为 整数 
| 比较 。 此 规则 也 适用 于 switch 语句 。 





| 
| <?php 
| Var_dump(0 一 "a"); /0 一 0->tme 
= //1=1->tne 
var_dump("1" =— "1e0"); /1 一 1->tme 


| 16.4.6 ”逻辑 运算 符 


逻辑 运算 符 用 来 组 合 罗 辑 运算 的 结果 , 是 程序 设计 中 一 组 非常 重要 的 运算 符 。PHP 的 逻辑 运算 符 
如 表 16.13 所 示 。 


表 16.13 ”逻辑 运算 符 


逻辑 运算 符 说 了 明 
and 逻辑 与 。 如 果 $a 与 $b 都 为 tue， 则 $a and $b 返回 值 等 于 true 
| && 逻辑 与 。 如 果 $a 与 $b 都 为 rue， 则 $a && $b 返回 值 等 于 true 
| or 逻辑 或 。 如 果 $a 或 $b 有 一 个 为 tue， 则 $a or $b 返回 值 等 于 true 
上 


逻辑 或 。 如 果 $a 或 $b 有 一 个 为 tue， 则 $a || $b 返回 值 等 于 tme 
xor 逻辑 异 或 。 如 果 $a 或 $b 有 一 个 为 tue， 另 一 个 为 flase， 则 $a xor $b 返回 值 等 于 true 
! 逻辑 非 。 如 果 $a 为 ttue， 则 !$a 返回 值 等 于 flase 


| ! 
| 例如 ， 下 面 的 foo0 函 数 不 会 被 调用 ， 因 为 它们 被 运算 符 “ 短 路 ”了 。 
i 














<?php 

$a= (false && foo0): 
$b = (true || foo0): 

$c = (false and foo0): 
$d = (true or foo0): 
?> 


16.4.7 错误 控制 运算 符 
PHP 支持 错误 控制 运算 符 :@。 当 将 其 放置 在 一 个 PHP 表达 式 之 前 ， 该 表达 式 可 能 产生 的 任何 
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错误 信息 都 被 忽略 。 如 果 激 活 track_errors 特性 ， 表 达 式 所 产生 的 任何 错误 信息 都 被 存放 在 变量 Sphp_ | 
errormsg 中 。 此 变量 在 每 次 出 错时 都 会 被 覆盖 ， 所 以 如 果 想 用 它 的 话 就 要 尽早 检查 。 如 : | 


$a=1/0; 
?> 


运行 上 面 代 码 , 则 会 产生 一 个 异常 , 并 在 浏览 器 中 呈现 出 来 。 如 果 避 免 错误 信息 显示 在 浏览 器 中 ， 
则 可 以 在 表达 式 前 面 添加 @ 运 算 符 ， 实 现代 码 如 下 : 





<?php 
$a= @(1 /10): 
?> 


< 所 注意 : @ 运 算 符 只 对 表达 式 有 效 。 对 初学 者 来 说 一 个 简单 的 规则 就 是 : 如 果 能 从 某 处 得 到 值 ,就 | 
能 在 它 前 面 加 上 @ 运 算 符 . 例如 ,可 以 把 它 放 在 变量 、 函 数 和 include() 调 用 、 常 量 等 之 前 。 | 
不 能 把 它 放 在 函数 或 类 的 定义 之 前 ， 也 不 能 用 于 条 件 结构 前 。 | 
\ 一 > | 
16.4.8 运算 符 优先 级 
运算 符 优先 级 指定 了 两 个 表达 式 绑 定 得 有 多 紧密 。 例 如 ， 表 达 式 1 + 5 * 3 的 结果 是 16， 而 不 是 
18， 因 为 乘 号 的 优先 级 比 加 号 高 。 不 过 可 以 使 用 括号 来 强制 改变 优先 级 。 例 如 ，(1 + 5)* 3 的 值 为 18。 
如 果 运 算 符 优先 级 相同 ， 则 使 用 从 左 到 右 的 左 联 顺序 。 
PHP 的 运算 符 在 运算 中 遵循 的 规则 是 : 优先 级 高 的 运算 先 执 行 , 优先 级 低 的 操作 后 执行 , 同一 优 | 
先 级 的 操作 按照 从 左 到 右 的 顺序 进行 。PHP 运算 符 优先 级 如 表 16.14 所 示 。 
表 16.14 ”运算 符 优先 级 
































结合 方向 运 算 符 附加 信息 | 
非 结合 clone new clone 和 new | 
左 arrayO | 
非 结合 + 递增 /递减 运算 符 | 
非 结合 ~ - (int) (float) (string) (array) (object) (bool) @ 类 型 | 
非 结合 instanceof 类 型 | 
右 结合 ! 逻辑 操作 符 | 
左 */% 算术 运算 符 | 
左 +-. 算术 运算 符 和 字符 串 运算 符 | 
左 <<>> 位 运算 符 | 
非 结合 < 一 > 二 一 比较 运算 符 | 
非 结合 一 -一 一 比较 运算 符 | 
左 & 位 运算 符 和 引用 | 
左 ^ 位 运算 符 | 
左 | 位 运算 符 | 
左 && 逻辑 运算 符 | 
左 1 逻辑 运算 符 | 
去 ? : 三 元 运算 符 | 
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16.5 PHP 表达 式 


表达 式 是 PHP 语言 基础 。 在 PHP 中 几乎 所 写 的 任何 东西 都 是 一 个 表达 式 。 简 单 但 却 最 精确 的 定 
义 一 个 表达 式 的 方式 就 是 “任何 有 值 的 东西 ”。 

最 基本 的 表达 式 形式 是 常量 和 变量 。 当 输入 “$a=5”， 即 将 值 5 分 配给 变量 ga。 很 明显 ，5 是 一 
个 值 为 5 的 表达 式 。 稍 微 复杂 的 表达 式 例子 就 是 函数 。 如 : 


<?php 

function foo O{ 
Tetum 5; 

} 

?> 


函数 也 是 表达 式 ， 表 达 式 的 值 即 为 它们 的 返回 值 。 既 然 fpo0 返 回 5， 表 达 式 foo0 的 值 也 是 5。 通 
常 函数 不 会 仅仅 返回 一 个 静态 值 ， 而 可 能 会 进行 计算 ， 完 成 特定 任务 。 

PHP 是 一 种 面向 表达 式 的 语言 , 从 这 一 方面 来 讲 几乎 一 切 都 是 表达 式 。 另 外 一 个 很 好 的 面向 表达 
式 的 例子 就 是 前 、 后 递增 和 有 递减。PHP 和 多 数 其 他 语言 的 用 户 应 该 比较 熟悉 变量 ++ 和 变量 ~- 符号 。 
即 递增 和 递减 运算 符 。 在 PHP 2 中 ， 语 句 $at++ 没 有 值 〈 不 是 表达 式 )， 这 样 的 话 用 户 不 能 为 其 赋值 或 





| 者 以 任何 其 他 方式 来 使 用 它 。PHP 通过 将 其 变 为 了 表达 式 ， 类 似 C 语言 ， 增 强 了 递增 /递减 的 能 力 。 


在 PHP 和 C 语言 中 ， 有 两 种 类 型 的 递增 : 前 递增 和 后 递增 ， 本 质 上 来 讲 ， 前 递增 和 后 递增 均 增加 了 
变量 的 值 ， 并 且 对 于 变量 的 影响 是 相同 的 。 不 同 的 是 递增 表达 式 的 值 。 前 递增 ， 写 作 ++$variable， 求 
增加 后 的 值 (PHP 在 读 取 变量 的 值 之 前 , 增加 变量 的 值 , 因而 称 之 为 前 递增 )。 后 递增 , 写作 $variable++， 
求 变 量 未 递增 之 前 的 原始 值 (PHP 在 读 取 变量 的 值 之 后 ， 增 加 变量 的 值 ， 因 而 叫做 后 递增 )。 

常用 到 表达 式 类 型 是 比较 表达 式 。 这 些 表达 式 求 值 FALSE 或 TRUE。PHP 支持 > (大 于 )、 盖 
(大 于 等 于 )、 一 (等 于 )、!= (不 等 于 )、< (小 于 )、<= (小 于 等 于 )。PHP 还 支持 全 等 运算 符 一 =- 
〈 值 和 类 型 均 相 同 ) 和 非 全 等 运算 符 ! 一 〈 值 或 者 类 型 不 同 )。 这 些 表达 式 都 是 在 条 件 判 断 语句 ， 如 让 
语句 中 。 

表达 式 可 以 被 当成 语句 。 这 时 ,可 以 在 一 个 表达 式 加 一 个 分 号 结尾 。 在 “$b=$a=5;” 中 ，$a=5 是 
一 个 有 效 的 表达 式 ， 但 它 本 身 不 是 一 条 语句 。 而 “$b=$a=5;” 是 一 条 有 效 的 语句 。 


16.6 PHP 流程 控制 


任何 PHP 脚本 都 是 由 一 系列 语句 构成 的 。 一 条 语句 可 以 是 一 个 赋值 语句 ， 一 个 函数 调用 ， 一 个 
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< 

循环 ,一 个 条 件 语句 或 者 是 一 个 什么 也 不 做 的 空 语句 。 语 句 通 常 以 分 号 结束 ， 用户 可 以 使 用 大 括号 将 | 
一 组 语句 封装 成 一 个 语句 组 。 语 句 组 本 身 可 以 当 作 是 一 行 语句 。 本 节 将 重点 介绍 PHP 流程 控制 结构 | 
和 语句 ， 这 里 主要 包括 条 件 语句 和 循环 语句 。 | 


16.6.1 if 条件 语句 





站 结构 是 很 多 语言 (包括 PHP 在 内 ) 最 重要 的 特性 之 一 ， 它 允许 按照 条 件 执行 代码 片段 。PHP ! 
的 让 结构 和 C 语言 相似 。 | 
<2php | 
if (expr) | 
statement | 

?> 


如 果 表达 式 expr 的 值 为 tue，PHP 将 执行 statement， 如 果 值 为 false， 将 忽略 statement。 例 如 ， 
在 下 面 示例 中 ， 如 果 $a 大 于 $b， 则 将 显示 "a 大 于 b"。 


<?php 
if ($a> $b) 
echo "a 大 于 b"; 
?> 
经 常 需要 按照 条 件 执行 不 止 一 条 语句 ， 当 然 并 不 需要 给 每 条 语句 都 加 上 一 个 庄子 句 。 可 以 将 这 些 
语句 放 入 语句 组 中 。 例 如 ， 如 果 $a 大 于 $b， 则 将 显示 "a 大 于 b"， 并 且 将 $a 的 值 赋 给 $b。 
<?php 
if ($a> $b) { 
echo "a 大 于 b"; 
$b= $a; 


} 
ne 


站 语句 可 以 无 限 层 地 超 套 在 其 他 站 语句 中 ， 这 给 程序 的 不 同 部 分 的 条 件 执 行 提供 了 充分 的 弹性 。 
16.6.2 else 条 件 语句 


用 户 经 常 需要 设计 在 满足 某 个 条 件 时 执行 一 条 语句 ,而 在 不 满足 该 条 件 时 执行 其 他 语句 ,这 正 是 | 
else 语句 的 功能 。else 延伸 了 站 语 句 ， 可 以 在 站 语句 中 的 表达 式 的 值 为 false 时 执行 语句 。 例 如 ， 在 | 
下 面 示例 中 ， 如 果 $a 大 于 $b 时 ， 显 示 "a 大 于 b"， 反 之 则 显示 "a 不 大 于 b"。 | 

<?php 

if ($a> $b) { 

ceho"a 大 于 |b 
}else{ 
echo "a 不 大 于 b": 


} 
至 


else 语句 仅 在 让 以 及 elseif 语句 中 的 表达 式 的 值 为 false 时 执行 。 
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16.6.3 else if 条件 语句 


| else 让 与 else 条件 语句 一 样 ， 它 延伸 了 让 语句 ， 可 以 在 原来 的 让 表达 式 值 为 false 时 执行 不 同 语 
付 -| | 句 。 但 是 与 else 不 一 样 的 是 , 它 仅 在 else 站 的 条 件 表达 式 值 为 tue 时 执行 语句 。 例如 , 在 下 面 示例 中 ， 
Note 如 果 $a 大 于 $b 时 ， 显 示 "a 大 于 b"， 如 果 相 等 ， 则 显示 "a 等 于 b"， 都 不 成 立 则 显示 "a 小 于 b"。 


| <2php 
| 这 (Sa> $b) { 
echo "a 大 于 b"; 
} elseif (ga 一 Sb) { 
echo "a 等 于 b"; 
}else{ 
echo "a 小 于 b"; 


有 

?> 

在 同一 个 过 结构 中 可 以 有 多 个 elseif 语句 。 第 一 个 表达 式 值 为 tue 的 elseif 语句 〈 如 果 有 的 话 ) 
将 会 执行 。 在 PHP 中 ， 也 可 以 写成 elseif， 它 和 else 站 语句 的 行为 完全 一 样 。 句 法 分 析 的 含义 有 少许 
区 别 , elseif 的 语句 仅 在 之 前 的 站 或 elseif 的 表达 式 值 为 false, 而 当前 的 elseif 表达 式 值 为 tue 时 执行 。 


4 注意 : elseif 与 else 让 只 有 在 使 用 大 括号 的 情况 下 才 认 为 是 完全 相同 。 
16.6.4 ”switch 条件 语句 


elseif 语 句 可 以 设计 多 重 选择 , 但 是 比较 繁琐 , 为 了 避免 站 语句 的 元 长 结构 , 用 户 可 以 使 用 switch 
语句 简化 编程 。switeh 语句 适合 于 这 样 的 环境 ， 当 需要 把 同一 个 变量 (或 表达 式 ) 与 很 多 不 同 的 值 比 
较 ， 并 根据 它 等 于 哪个 值 来 执行 不 同 的 代码 。 
<?php 
switch ($1) { 
Case 0: 
echo "i= 0": 
break 
Case 1: 
echo "i=1"; 
break: 
| case 2: 
| echo "i=2": 
| break: 


} 

?> 

switch 语句 是 一 行 接 一行 地 执行 ， 开 始 时 没有 代码 被 执行 ， 仅 当 一 个 case 语句 中 的 值 和 switch 
表达 式 的 值 匹配 时 , PHP 才 开 始 执行 语句 , 直到 switch 的 程序 段 结束 或 者 遇 到 第 一 个 break 语句 为 止 。 
| 如 果 不 在 case 的 语句 段 最 后 写 上 break 的 话 ，PHP 将 继续 执行 下 一 个 case 中 的 语句 段 。 如 : 
ip 
! switch ($D { 
| case 0: 
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如 果 $i 等 于 0，PHP 将 执行 所 有 的 输出 语句 ， 如 果 $i 等 于 1，PHP 将 执行 后 面 两 条 输出 语句 ， 只 
有 当 $i 等 于 2 时 ， 才 会 得 到 预期 的 结果 ， 只 显示 “i=2”。 所 以 ， 别 忘 了 break 语句 很 重要 。 

在 switch 语句 中 条 件 只 求 值 一 次 , 并 用 来 与 每 个 case 语句 比较 。 而 在 elseif 语句 中 条 件 会 再 次 求 
值 。 如 果 条 件 比 较 复杂 ， 或 者 在 一 个 很 多 次 的 循环 中 ， 那 么 选用 switch 语句 可 能 会 快 一 些 。 

在 一 个 case 中 的 语句 也 可 以 为 空 ， 这 样 只 不 过 将 控制 转移 到 了 下 一 个 case 中 的 语句 。 如 : 





default 语句 比较 特殊 ， 它 匹配 其 他 case 都 不 匹配 的 情况 。 如 : 





case 表达 式 可 以 是 任何 求 值 为 简单 类 型 的 表达 式 , 即 整 型 或 浮 点 数 以 及 字符 串 , 不 能 是 数组 或 对 象 ， 
除非 它们 被 解除 引用 成 为 简单 类 型 。 同 时 ，PHP 还 允许 使 用 分 号 〈;) 代 蔡 case 语句 后 的 冒号 (:)， 如 : 
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| i 注意 : 与 其 他 语言 不 同 ， 在 switch 结构 中 ，continue 语句 作用 类 似 于 break 语句 。 如 果 在 循环 中 
有 一 个 switch 结构 并 希望 continue 到 外 层 循环 中 的 下 一 个 轮回 ， 可 以 使 用 continue 语句 。 





16 6.5 ”while 循环 语句 


while 循环 是 PHP 中 最 简单 的 循环 类 型 。 其 基本 格式 如 下 : 


while (expr) 
statement 


while 语句 的 含义 很 简单 ， 它 告诉 PHP 只 要 while 表达 式 的 值 为 TRUE， 就 重复 执行 嵌 套 中 的 循 


环 语句 。 表 达 式 的 值 在 每 次 开始 循环 时 检查 ， 所 以 即使 这 个 值 在 循环 语句 中 改变 了 ， 语 句 也 不 会 停止 


| 执行 ， 直 到 本 次 循环 结束 。 有 时 如 果 while 表达 式 的 值 一 开始 就 是 FALSE， 则 循环 语句 一 次 都 不 会 
| 执行 。 


例如 ， 下 面 两 个 循环 语句 完全 一 样 ， 都 显示 数字 1 到 10。 


<2php 

$i=1; 

while ($i <= 10) { 
echo $it+; 

} 

$i=1; 

while ($i <= 10) { 
print $i; 
Sit+; 

Hb 

?> 


16.6.6 ”do-while 循环 语句 


do-while 与 while 循环 非常 相似 , 区 别 在 于 表达 式 的 值 是 在 每 次 循环 结束 时 检查 而 不 是 在 开始 时 ， 


因此 do-while 循环 语句 保证 会 执行 一 次 循环 ， 而 while 循环 就 不 一 定 了 ， 如 果 表 达 式 的 值 为 false 则 
整个 循环 立即 终止 。 如 : 


} while ($i > 0): 
?> 
在 上 面 示例 中 , 循环 正好 运行 一 次 , 因为 经 过 第 一 次 循环 后 , 当 检查 表达 式 的 真 值 时 , 其 值 为 false 
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| 

($i 不 大 于 0) 而 导致 循环 终止 。 | 
| 

16.6.7 for 循环 语句 
for 循环 是 PHP 中 最 复杂 的 循环 结构 。 它 的 行为 与 C 语言 的 相似 。 其 语法 格式 如 下 : | 鲜 


tr on op: eye) 
statement ! 


第 一 个 表达 式 (exprl ) 在 循环 开始 前 无 条 件 求 值 一 次 。 第 二 个 表达 式 expr2 在 每 次 循环 开始 前 求 | 
值 。 如 果 值 为 twe， 则 继续 循环 ， 执 行 嵌 套 的 循环 语句 。 如 果 值 为 false， 则 终止 循环 。 第 三 个 表达 式 | 
expr3 在 每 次 循环 之 后 被 求 值 执行 )。 | 
每 个 表达 式 都 可 以 为 空 或 包括 逗号 分 隔 的 多 个 表达 式 。 表 达 式 expr2 中 ， 所 有 用 去 号 分 隔 的 表达 | 
式 都 会 计算 ， 但 只 取 最 后 一 个 结果 。expr2 为 空 ，PHP 会 认为 其 值 为 tue， 意 味 着 将 无 限 循 环 下 去 。 | 
这 可 能 不 像 想象 中 那样 没有 用 ， 因 为 经 常会 希望 用 break 语句 来 结束 循环 而 不 是 用 for 的 表达 式 真 值 | 
判断 。 | 
例如 ， 下 面 示例 中 4 个 循环 结构 将 显示 1 到 10 数字 。 | 


) 





<?php 

/循环 1 */ 

for ($i= 1; $i <= 10; $i++) { 
echo $i; 


} 
让 循环 2*/ 
for ($i=1;; $itH+) { 
if($i> 10) 
break; 
} 


echo $i; 


NF) 
$i= 1; 
for (::) { 
让 (Si> 10) { 
break:; 


} 
echo $i; 
Sit+; 


bp 
以 循环 4*/ 
for ($i= 1, $j = 0: $i <= 10; $j += $i, print $1, $i++); 
?> 
在 上 面 示例 中 第 一 个 循环 结构 比较 常见 , 但 是 后 面 3 种 循环 形式 在 特殊 情况 下 比较 实用 ,建议 用 
户 灵活 掌握 它们 ， 学 会 在 for 循环 中 使 用 空 的 表达 式 有 时 会 发 现 很 方便 。 
for 循环 经 常用 在 遍历 操作 , 例如， 在 下 面 示例 中 对 数组 进行 遍历 ， 以 便 改变 数组 中 某 些 元 素 的 值 。 
<?php 
Speople =Array( 
Array(Cname' => Kalle''salt => 856412). 
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Array(name' => 'Pierre'. 'salt => 215863) 
六 
for($i = 0: $i < sizeof($people): ++$D){ 
S$people[S$i]['salt] = rand(000000. 999999): 





Note | 在 上 面 代码 中 ，for 的 第 二 个 表达 式 需要 获取 数组 的 长 度 ， 因 此 每 次 循环 时 都 要 计算 一 遍 数 组 的 
| 长 度 ， 这 样 就 影响 到 循环 的 执行 效率 。 由 于 数组 的 长 度 始终 不 变 ， 可 以 使 用 一 个 中 间 变量 来 存储 数组 
| 长度， 然后 用 这 个 变量 作为 for 循环 的 第 二 个 表达 式 。 这 样 在 循环 时 就 可 以 直接 使 用 该 变量 的 值 ， 不 
| 用 每 次 重新 计算 。 如 : 
| Spip 
| Bpeople = Array( 
Aray(name' => 'Kalle', 'salt' => 856412), 
Array(name' => 'Pierre', 'salt' => 215863) 


六 
for($i = 0, $size = SizeofS$people): Si < $size: ++H9i{ 
$people[$i]['salt] = rand(000000, 999999): 
} 
?> 


16.6.8 foreach 循环 语句 


PHP 4 引入 了 foreach 结构 ， 该 结构 仅 能 用 于 数组 ， 当 试图 将 其 用 于 其 他 数据 类 型 或 者 一 个 未 初 
| 始 化 的 变量 时 会 产生 错误 ， 因 此 可 以 把 它 视 为 一 种 遍历 数组 的 简便 方法 。 
| foreach 结构 有 两 种 语法 : 
| foreach (array expression as $value) 
| statement 

foreach (array expression as $key => $value) 

statement 

第 一 种 格式 遍历 给 定 的 array_expression 数组 。 每 次 循环 中 ， 当 前 单元 的 值 被 赋予 给 变量 $value， 
并 且 数 组 内 部 的 指针 向 前 移 一 步 ， 因 此 下 一 次 循环 中 将 会 得 到 下 一 个 单元 。 

第 二 种 格式 与 第 一 种 循环 格式 相同 ， 只 是 它 不 仅 获取 每 个 单元 的 值 ， 还 可 以 获取 单元 的 键 名 ， 其 
中 当前 单元 的 键 名 也 会 在 每 次 循环 中 被 赋 给 变量 $key。 虽 然 这 种 格式 不 常用 , 但 它 是 第 一 种 格式 的 有 
益 扩展 。 自 PHP 5 起 ，foreach 结构 还 可 以 遍历 对 象 。 

当 foreach 开始 执行 时 , 数组 内 部 的 指针 会 自动 指向 第 一 个 单元 。 这 意味 着 不 需要 在 foreach 循环 
之 前 调用 resetO。 

除非 数组 是 被 引用 ，foreach 所 操作 的 是 指定 数组 的 一 个 备份 ， 而 不 是 该 数组 本 身 。foreach 对 数 
组 指针 有 些 副作用 。 除 非 对 其 重 置 , 在 foreach 循环 中 或 循环 后 都 不 要 依赖 数组 指针 的 值 .但 是 从 PHP 5 
开始 ， 可 以 很 容易 地 通过 在 $value 之 前 加 上 & 运 算 符 来 修改 数组 的 元 素 。 此 方法 将 以 引用 赋值 而 不 是 
复制 一 个 值 。 如 : 


| pip 
| Sarr = array(1.2. 3. 4): 
| foreach ($arr as &$value) { 
| $value = $value * 2: 
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?> 


则 执行 完毕 ， 数 组 $arr 的 值 变 成 array(2, 4, 6. 8)。 
16.6.9 流程 控制 的 替代 方法 


PHP 提供 了 一 些 流程 控制 的 蔡 代 语法 ， 包 括 这、switeh、while、for、foreach。 蔡 代 语 法 的 基本 形 
式 是 把 左 花 括号 ({) 换 成 冒号 (:)， 把 右 花 括号 (} ) 分 别 换 成 endif:、endswitch;、endwhile;、endfor: 
和 endforeach;。 如 : 





<?php 
if($a= 1): 

echo "a=1"; 
elseif ($a 一 2): 

echo "a=2"; | 
else: | 
echo "a>1、 2"; | 
endif 


?> 


16.6.10 ”break 控制 流程 语句 


break 语句 能 够 结束 当前 for、foreach、while、do-while 或 者 switch 结构 的 执行 。 同 时 break 可 
以 接受 一 个 可 选 的 数字 参数 来 决定 跳出 几 重 循环 。 如 : 


$i=0; 
While (++5i) { 
Switch ($D { 
Case 5: 
echo " 5<br /> 
break 1; 话 只 退出 switch */ 
case 10: 
echo " 10 <br />\n"; 
break 2; 让 退出 switch 和 while 循环 */ 
default: 
break: 


b 


} 
?> 


16.6.11 ”continue 控制 流程 语句 

continue 在 循环 结构 用 来 跳 过 本 次 循环 中 剩余 的 代码 ， 并 在 条 件 求 值 为 真 时 开始 执行 下 一 次 循 
环 。 它 可 以 接受 一 个 可 选 的 数字 参数 来 决定 跳 过 几 重 循环 到 循环 结尾 。 如 : 

<Iphp 


$i= 0; 
while (i++ <5) { 
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3 SS 说 
echo "3 层 循环 <br />\n"; 
while (1) { 
echo "&nbsp:&nbsp:2 重 循环 <br />\n"; 
while (D) { 
echo "&nbsp:&nbsp:1 重 循环 <br />\n"; 
continue 3; 
} 
echo "不 输出 该 句 <br />\n"; 


i 

echo "不 执行 该 句 <br />n"; 
} 
?> 


< 人 注意 :在 PHP 中 switch 语句 被 认为 是 可 以 使 用 continue 的 一 种 循环 结构 
16.6.12 ”goto 控制 流程 语句 
goto 语句 可 以 用 来 跳 转 到 程序 中 的 某 一 指定 位 置 .该 目标 位 置 可 以 用 目标 名 称 加 上 冒号 来 标记 。 如 : 
<?php 
goto a; 
echo 1: 
a: 


echo 2; 
?> 


在 上 面 示例 中 ， 将 输出 2， 而 不 是 1。 

PHP 中 的 goto 有 一 定 限制 ， 只 能 在 同一 个 文件 和 作用 域 中 跳 转 ， 也 就 是 说 无 法 跳出 一 个 函数 或 
类 方法 ， 也 无 法 跳 入 到 另 一 个 函数 。 同 时 也 无 法 跳 入 到 任何 循环 或 者 switch 结构 中 。 常 见 的 用 法 是 
用 来 跳出 循环 或 者 switeh， 可 以 代替 多 层 的 break。 该 语句 仅 在 PHP 5.3 及 以 上 版 本 有 效 。 


16.6.13 include 和 require 控制 流程 语句 


include 和 require 语句 包含 并 运行 指定 文件 。 这 两 种 结构 除了 在 如 何 处 理 失败 之 外 完全 一 样 。include 
产生 一 个 警告 ， 而 require 则 会 导致 一 个 致命 错误 。 换 句 话 说 ， 如 果 想 在 遇 到 丢失 文件 时 停止 处 理 页 
面 就 用 require。include 就 不 是 这 样 ， 脚 本 会 继续 运行 。 同 时 也 要 确认 设置 了 合适 的 include_path。 

include 和 require 语句 寻找 包含 文件 的 顺序 先是 在 当前 工作 目录 的 相对 的 include_path 下 寻找 ， 
然后 是 当前 运行 脚本 所 在 目录 相对 的 include_ path 下 寻找 。 例 如 ，include path 是 .， 当 前 工作 目录 是 
/www/， 脚 本 中 要 include 一 个 include/aphp， 且 在 该 文件 中 有 一 句 include "b.php"， 则 寻找 bphp 的 





| 顺序 先是 /www/， 然 后 是 /www/include/。 如 果 文 件 名 以 ./ 或 者 ./ 开始 ， 则 只 在 当前 工作 目录 相对 的 
| include_path 下 寻找 。 


当 一 个 文件 被 包含 时 ， 其 中 所 包含 的 代码 继承 了 include 所 在 行 的 变量 范围 。 从 该 处 开始 ， 调 用 
文件 在 该 行 处 可 用 的 任何 变量 在 被 调用 的 文件 中 也 都 可 用 。 不 过 所 有 在 包含 文件 中 定义 的 函数 和 类 都 


| 具有 全 局 作用 域 。 


例如 ， 新 建 varsphp 文件 : 


<2php 
$color = 'green' 
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S$fuit= "apple'; 
?> 
再 创建 testphp 文件 : 


<2php 

echo "A $color $fruit": //A 

include vars.php'; 

echo "A $color $fruit"; 

?> | 

如 果 include 出 现 于 调用 文件 中 的 一 个 函数 里 , 则 被 调用 的 文件 中 所 包含 的 所 有 代码 将 表现 得 如 | 

同 它们 是 在 该 函数 内 部 定义 的 一 样 ， 所 以 它 将 遵循 该 函数 的 变量 范围 。 | 

| 

<?php | 
function foo0{ 


global $color: | 
include ‘vars.php'; | 
! 
| 





echo "A $color $fruit"; 

} 

foo0; 

echo "A $color $fruit"; 

?> 

当 一 个 文件 被 包含 时 ， 语 法 解析 器 在 目标 文件 的 开头 脱离 PHP 模式 并 进入 HIML 模式 ， 到 文件 
结尾 处 恢复 。 由 于 此 原因 , 目标 文件 中 应 被 当 作 PHP 代码 执行 的 任何 代码 都 必须 被 包括 在 有 效 的 PHP | 
起 始 和 结束 标记 之 中 。 


16.7 PHP 函数 


在 开发 过 程 中 ， 经 常 需要 反复 重复 某 种 操作 或 者 处 理 ， 如 数据 查询 、 字 符 串 操作 等 ， 如 果 每 个 模 | 
块 的 操作 都 需要 重复 输入 一 次 代码 ， 不 仅 执行 效率 低 ， 而 且 后 期 维护 都 比较 麻烦 ， 这 时 不 妨 考虑 使 用 | 
函数 来 解决 这 个 难题 。 


16.7.1 定义 和 调用 函数 


在 PHP 语言 中 ， 定 义 函 数 的 语法 格式 如 下 : 
function fun name($arg_1. $arg 2. … $are D){ 
fan body: 


} 














其 中 , function 表示 声明 自 定义 函数 必须 使 用 的 关键 字 , fun_name 表示 函数 的 名 称 , $arg_1、$arg_2、 
$arg_n 等 为 函数 的 参数 ， 参 数 之 间 通 过 逗号 分 隔 ， 参 数 个 数 不 限 ， 也 可 以 省 略 参数 。 

函数 名 和 PHP 中 的 其 他 标识 符 命名 规则 相同 。 有 效 的 函数 名 以 字母 或 下 划 线 打头 ， 后 面 跟 字 母 、 
数字 或 下 划 线 。 可 以 用 正则 表达 式 表示 为 : [a-zA-Z_\x7f-\xffl[a-zA-Z0-9_\x7f-\xfflj*。 函 数 名 是 大 小 写 
无 关 的， 不 过 在 调用 函数 时 ， 通 常 使 用 其 在 定义 时 相同 的 形式 。 

fun_body 表示 函数 体 ， 在 函数 体 中 可 以 包含 任意 多 行 代 码 , 这 些 代码 是 函数 的 功能 主体 ， 并 由 这 
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KR 
些 代码 执行 和 完成 指定 的 任务 。 注 意 ， 任 何 有 效 的 PHP 代码 都 有 可 能 出 现在 函数 内 部 ， 甚 至 包括 其 
他 函数 和 类 定义 。 

当 定义 好 函数 之 后 ， 就 可 以 调用 函数 了 ， 调 用 函数 的 方法 比较 简单 ， 只 需要 引用 函数 名 ， 并 赋予 
国内 | 正确 的 参数 即 可 ， 格 式 如 下 : 


| fun name($arg 1, $arg 2..... $arg D) : 
Note | 函数 必须 在 其 调用 之 前 定义 。 
例如 ， 下 面 示例 中 在 自 定义 函数 中 定义 函数 ， 然 后 分 别 进行 调用 。 





echo "I don't exist until foo0 is called \n"; 
} 


} 
必 现 在 还 不 能 调用 bar0 函 数 ， 因 为 它 还 不 存在 */ 
foo0: 
必 现 在 可 以 调用 bar0 函 数 了 ， 因 为 foo0 函 数 
的 执行 使 得 bar0 函 数 变 为 已 定义 的 函数 */ 

barO: 
人 
在 PHP 中 所 有 函数 都 具有 全 局 作用 域 ， 可 以 在 内 部 定义 ， 在 外 部 调用 ， 反 之 亦 然 。 
| 4 注意 ;PHP 不 支持 函数 重 载 ， 也 不 可 能 取消 定义 或 者 重 定义 已 声明 的 函数 。 
| 在 PHP 中 可 以 调用 递归 函数 。 如 : 
a 
| function recursion($a){ 
($a<20) { 

echo "$an": 

recursion($a + 1): // 调 用 函数 自身 
} 


| 
i 
| } 
| ?> 


| 在 调用 递归 函数 时 , 应 该 设置 循环 调用 的 条 件 和 次 数 , 因为 可 能 会 破坏 堆栈 从 而 使 当前 脚本 终止 。 
| 

| 16.7.2 函数 参数 

| 


| 通过 参数 列表 可 以 传递 信息 给 函数 ， 这 个 信息 列表 是 以 逗号 作为 分 隔 符 的 表达 式 列表 。 在 调用 函 
| 数 时 ， 需 要 向 函数 传递 参数 ， 被 传 入 的 参数 被 称 为 实 参 ， 而 在 定义 函数 时 指定 的 参数 ， 被 称 为 形 参 。 
参数 传递 的 方式 有 按 值 传递 、 按 引用 传递 和 默认 参数 3 种 。 


1.， 按 值 传递 参数 
将 实 参 的 值 复制 到 对 应 的 形 参 中 , 在 函数 内 部 的 操作 针对 形 参 进行 , 操作 的 结果 不 会 影响 到 实 参 ， 
即 函 数 返 回 后 ， 实 参 的 值 不 会 改变 。 如 : 
<2?php 
1 function fon($n){ 
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$m=$m*2+ 1; 


echo "在 函数 内 : \Sm = ".$m: /显示 11 
} 
Sm= 5; 
fun($m); // 调 用 函数 
echo "在 函数 外 : \$Sm=".$m:; // 显 示 5 
?> 
2. 按 引用 传递 参数 





按 引 用 传递 参数 是 将 实 参 的 内 存 地 址 传递 给 形 参 中 , 这 时 在 函数 内 部 的 所 有 操作 都 会 影响 到 实 参 | 
的 值 ， 此 时 再 次 调用 实 参 ， 也 会 发 现实 参 的 值 发 生变 化 。 如 : 


<?php 
function fun(&$m){ 

Sm=$Sm*2+ 1; 

echo "在 函数 内 : \$m = ".$m: /显示 1 | 
} | 
Sm=5; | 
fun($m); // 调 用 函数 
echo "在 函数 外 : \$m = "Sm: // 显 示 11 
?> 


3， 默认 参数 ( 可 选 参数 ) 


还 有 一 种 设置 参数 的 方式 ， 即 可 选 参数 。 可 以 指定 某 个 参数 为 可 选 参数 ， 将 可 选 参数 放置 在 参数 
列表 的 末尾 ， 并 且 指定 其 默认 值 。 如 : 


<?php 
function fun(&$m, $n=0){ 
$l=$m + S$n; 
if($n = 0) 
echo “$m=".$1."<p>"; 
else 
echo "$m + \$n=".$."<p>"; 


} 

Sm=5; 

Sn=5; 

fun($m); // 显 示 : $m=5 
fun($m. $n): // 显 示 : Sm+ $n=10 
?> 


PHP 还 允许 使 用 数组 和 特殊 类 型 NULL 作为 默认 参数 ， 默 认 值 必须 是 常量 表达 式 ， 不 能 是 诸如 
变量 、 类 成 员 ， 或 者 函数 调用 等 表达 式 。 


< 所 注意 : 当 使 用 默认 参数 时 ， 任 何 默认 参数 必须 放 在 任何 非 默 认 参 数 的 右 侧 ; 否则 ， 函 数 将 不 会 按 
照 预 期 的 情况 工作 。 


16.7.3 ”函数 返回 值 


使 用 retum 关键 字 可 以 返回 函数 值 。 如 果 在 一 个 函数 体内 调用 returmn 语句 ， 将 立即 结束 该 函数 的 
执行 ， 并 将 它 的 参数 作为 函数 的 值 返 回 。 如 : 
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| 
| function square(Sn){ 
| Tetum $n * $n: 
| } 
全 国 | echo square(S): 1/ 返回 25 
A 
如 果 在 全 局 范围 中 调用 retum 语句 , 则 当前 脚本 文件 将 中 止 运行 。 如 果 当 前 脚本 文件 是 被 include 


| 的 或 者 require 的 ， 则 控制 交 回 调用 文件 。return 也 会 终止 eval 语句 或 者 脚本 文件 的 执行 。 

| 返回 值 可 以 包括 数组 和 对 象 的 任意 类 型 。 但 是 函数 不 能 返回 多 个 值 , 但 可 以 通过 返回 一 个 数组 来 

| 得 到 类 似 的 效果 。 如 : 

| 上 

| function small n Of 
Teturn array (0, 1, 2); 














} 
list ($zero, $one, $two) = small nO: 
?> 


如 果 需 要 函数 返回 一 个 引用 ， 必 须 在 函数 声明 和 指派 返回 值 给 一 个 变量 时 都 使 用 引用 操作 符 &。 如 : 
< 


function &foo0{ 
Tetum retum Sref 


} 
S$newref = &foo0: 
?> 


16.7.4 可 变 函 数 


PHP 支持 可 变 函数 ， 即 如 果 一 个 变量 名 后 有 圆 括号 ，PHP 将 寻找 与 变量 的 值 同名 的 函数 ， 并 且 
| 尝试 执行 它 。 可 变 函 数 可 以 用 来 实现 包括 回调 函数 、 函 数 表 在 内 的 一 些 用 途 。 下 面 通过 一 个 示例 体会 
什么 是 可 变 函 数 。 

<?php 


function fun10{ 
echo "函数 1<p>"; 


b 
function fn20{ 
echo "函数 2<p>"; 
} 
Sm= "fun1": 
$mO: // 调 用 fun1 函数 
Sm= "fun2"; 
SmO: /调用 fun2 函数 
?> 


通过 上 面 示例 可 以 看 到 ,函数 的 调用 是 通过 改变 变量 的 变量 名 实现 的 , 通过 在 变量 名 后 面 加 上 一 
对 小 括号 ，PHP 就 会 自动 寻找 与 变量 名 相同 的 函数 ， 并 且 执 行 它 ， 如 果 找 不 到 对 应 的 函数 ， 则 系统 会 
| 自动 报错 。 
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16.7.5 取消 引用 


当 不 需要 引用 时 ， 可 以 使 用 unset0 函 数 取 消 引 用 。 该 函数 能 够 断 开 变量 名 与 引用 的 内 容 之 间 的 联 | 
系 ， 而 不 是 销毁 变量 内 容 。 如 ; | 





<?php 

$a= 1; 

$b = &$a: /定义 引用 

echo $b; // 显 示 1 

unset($b); /取消 引用 ! 
echo Sb; // 显 示 空 | 
?> | 


16.8 PHP 类 和 对 象 


PHP 5 开始 引入 了 新 的 对 象 模型 。 完 全 重 写 了 PHP 处 理 对 象 的 方式 ， 人 允许 更 佳 性 能 和 更 多 特性 。 
本 节 将 重点 介绍 PHP 类 和 对 象 的 定义 和 应 用 ,以 帮助 用 户 掌握 强大 的 对 象 化 编程 开发 的 方法 和 技巧 。 


16.8.1 定义 和 调用 类 


使 用 class 关键 字 可 以 定义 类 ， 在 类 中 可 以 声明 类 成 员 和 方法 。 例 如 ， 在 下 面 示例 中 定义 了 类 A， 
该 类 中 包含 一 个 方法 f0。 
<2php 
class A{ 
function fO{ 
echo "类 方法 "; 


} 
} 
?> 
在 类 中 ， 伪 变量 gthis 是 一 个 对 调用 对 象 的 引用 ， 即 引用 类 的 实例 。 再 看 一 个 示例 ， 在 这 个 示例 
中 分 别 声明 了 类 成 员 和 方法 。 


<?php 

class A{ 
public Svar = 默认 值 ': // 声 明成 员 | 
public function {0{ // 声 明 方法 | 
} | 

» 


使 用 new 关键 字 可 以 调用 类 ， 即 使 用 new 关键 字 创建 一 个 对 象 的 实例 ， 然 后 就 可 以 引用 类 成 员 
和 方法 了 。 如 : 


<?php 
$a=newAO: /实例 化 类 
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echo $a->var: /引用 对 象 的 成 员 ， 显 示 ' 默 认 值 ' 
$a->f0: V// 引 用 对 象 的 方法 ， 显 示 ' 默 认 值 ' 
和 


当 把 一 个 对 象 已 经 创建 的 实例 赋 给 一 个 新 变量 时 , 新 变量 会 访问 同一 个 实例 ,就 和 用 该 对 象 赋值 


| 一 样 。 此 行为 和 给 函数 传递 入 实例 时 一 样 。 可 以 用 克隆 给 一 个 已 创建 的 对 象 建立 一 个 新 实例 。 


在 一 个 类 中 可 以 使 用 extends 关键 字 继承 另 一 个 类 的 方法 和 成 员 。 但 不 能 扩展 多 个 类 ， 只 能 继承 
一 个 基 类 。 例 如 ， 在 下 面 示例 中 ， 分 别 定义 A 和 了 B 类 ， 其 中 A 是 基 类 ，B 是 子 类 ， 然 后 就 可 以 在 B 


| 类 中 调用 基 类 的 成 员 或 者 方法 。 
<?php 
class A{ /定义 A 类 
public $var = 默认 值 : // 声 明成 员 
public function fO{ // 声 明 方法 
echo $this->var; 
} 
} 
class B extends A{ // 定 义 B 类 
function eO { // 声 明 方法 
parent:f0: // 调 用 A 类 的 方法 和 
} 
or /实例 化 B 类 
Shee0; // 调 用 对 象 $b 的 e0 方 法 ， 显 示 默 认 值 ' 
?> 
16.8.2 ”类 属性 


类 的 变量 成 员 被 称 为 属性 ， 或 者 字段 、 特 征 ， 本 书 统一 称 为 属性 。 属性 声明 是 由 关键 字 public、 
protected 或 者 private 开头 ， 然 后 跟 一 个 变量 来 组 成 。 属 性 中 的 变量 可 以 初始 化 ， 但 是 初始 化 的 值 必 
须 是 常数 , 这 里 的 常数 是 指 在 编译 阶段 时 就 为 常数 , 而 不 是 在 编译 阶段 之 后 在 运行 阶段 运算 出 的 常数 。 

类 成 员 都 必须 使 用 关键 字 public、protected 或 private 进行 定义 。 由 public 关键 字 定义 的 类 成 员 
可 以 在 任何 地 方 被 访问 。 由 protected 定义 的 类 成 员 可 以 被 其 所 在 类 的 子 类 和 父 类 访问 ， 当 然 该 成 员 
所 在 的 类 也 可 以 访问 。 由 private 定义 的 类 成 员 则 只 能 被 其 所 在 类 访问 。 

为 了 兼容 PHP 4, PHP 5 声明 属性 依然 可 以 直接 使 用 关键 字 var, 或 者 放 在 public、protected、 private 
之 前 。 但 是 var 并 不 是 必需 的 。 如 果 直 接 使 用 var 声明 属性 , 而 没有 public、protected 或 private, PHP 5 
会 认为 这 个 属性 为 public。 

在 类 的 成 员 方 法 里 面 , 可 以 通过 $this->property (property 是 属性 名 字 ) 这 种 方式 来 访问 类 的 属性 、 


| 方法 , 但 是 要 访问 类 的 静态 属性 或 者 在 静态 方法 里 面 却 不 能 使 用 ,而 是 使 用 self:$property。 在 类 的 非 
| 静态 方法 里 面 可 以 使 用 伪 变 量 $this， 这 个 伪 变 量 是 调用 该 方法 的 实例 化 对 象 引用 。 


<?php 
class MyClass{ 
public $public = "Public': 
protected $protected = 'Protected'; 
Private $private = 'Private’;: 
function printHello0 { 
echo S$this->public: 
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echo $this->protected: 
echo $this->private: 
| 
} 
S$obj = new MyClassO: 
echo $obj->public: 
echo $obj->protected; 
echo $obj->private: 
$obj->printHello0: 
?> 


16.8.3 ”类 常量 


性 


/正常 执行 ， 显 示 : public 

/会 产生 一 个 致命 错误 

/会 产生 一 个 致命 错误 

/输出 : public、protected 和 private 


J 
) 六 





在 类 中 还 可 以 定义 常量 ， 常 量 的 值 将 始终 保持 不 变 ， 常 量 的 值 必须 是 一 个 定 值 ， 不 能 是 变量 、 类 | 
属性 或 其 他 操作 《〈 如 函数 调用 ) 的 结果 。 在 定义 和 使 用 常量 时 不 需要 使 用 $ 符 号， 常量 的 值 不 能 为 关 | 


键 字 self、parent 或 static。 例 如 ， 在 下 面 示例 中 定义 并 使 用 一 个 类 常量 。 


echo self::constant . "\n"; 
b 
} 
echo MyClass::constant . "\n"; 
$class = new MyClass(): 
S$class->showConstant(): 
?> 


16.8.4 构造 函数 和 析 构 函数 


// 在 类 方法 中 引用 常量 


/调用 类 的 方法 显示 常量 值 


PHP 5 允许 开发 者 在 一 个 类 中 定义 一 个 方法 作为 构造 函数 ， 具 有 构造 函数 的 类 会 在 每 次 创建 对 象 


时 先 调用 该 方法 ， 一 般 在 构造 函数 中 做 一 些 初始 化 工作 。 其 语法 格式 如 下 : 


void _construct ([ mixed $args [. $... ]]) 


如 果子 类 中 定义 了 构造 函数 ， 则 不 会 自动 调用 父 类 构造 函数 。 要 执行 父 


的 构造 函数 中 调用 parent::_constructO 。 


<?php 
class BaseClass { 
function ”constructO { 
print "对 象 初始 化 构造 函数 "; 
} 
0 
class SubClass extends BaseClass { 
function constructO { 
parent::_ constructO: 
print "初始 化 子 类 "; 
i 
} 


类 构造 函数 ， 需 要 在 子 类 


a - 
2 


gob =new BaseClass0: // 自 动 显示 : 对 象 初始 化 构造 函数 
| S$obj = new SubClass0: /自动 执行 父 类 和 子 类 的 构造 函数 
| > 
! 
会 内 | 为 了 实现 向 后 兼容 性 ， 如 果 PHP 5 在 类 中 找 不 到 constmct0 函 数 ， 它 就 会 尝试 寻找 旧式 的 构造 


| 函数 ， 也 就 是 和 类 同名 的 函数 。 
Note | 析 构 函数 就 是 在 对 象 的 所 有 引用 都 被 删除 或 者 当 对 象 被 显 式 销毁 时 执行 。 其 语法 格式 如 下 : 
| void _ destruct (void ) 
例如 ， 在 下 面 示例 中 将 会 自动 执行 构造 函数 和 析 构 函数 。 
<?php 
class MyClass { 
function constructO { 
print "构造 函数 
} 
function destructO { 
print " 析 构 函数 “ 
} 


} 

S$obj = new MyClassO: 

?> 

与 构造 函数 一 样 ， 父 类 的 析 构 函数 不 会 被 引擎 自动 调用 。 要 执行 父 类 的 析 构 函数 ， 必 须 在 子 类 的 
析 构 函数 体 中 显 式 调用 parent::_destructO。 


16.8.5 “对象 继承 


继承 是 面向 对 象 编程 的 基本 特性 ，PHP 的 对 象 模型 也 支持 继承 。 继 承 将 会 影响 到 类 与 类 、 对 象 与 
对 象 之 间 的 关系 。 当 扩展 一 个 类 ， 子 类 就 会 继承 父 类 的 所 有 公有 和 保护 方法 。 但 是 子 类 的 方法 会 覆盖 
父 类 的 方法 。 

例如 ， 在 下 面 示例 中 ， 子 类 bar 继承 父 类 foo 的 printPHP0 方 法 ， 同 时 重 写 了 父 类 的 printItem() 
方法 。 

<?php 

class foo{ 

public function printItem($string) { 
echo Foo: '. $string; 


} 
public function printPHPO{ 
echo 'PHP is great.”: 


} 
} 
class bar extends foo{ 
public function printItem($string) { 
echo 'Bar: ' . $string: 


} 
. 
| $foo = new foo0: 
| $bar =newbar0: 
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&H | 
$foo->printItem('baz"): // 显 示 : Foo: baz | 
S$foo->printPHPO: /显示 : PHP is great | 
S$bar->printItem(baz): // 显 示 : Bar baz | 
$bar->printPHPO: // 显 示 : PHP is great | 
?> 


继承 对 于 功能 的 设计 和 抽象 是 非常 有 用 的 , 而 且 对 于 类 似 的 对 象 增加 新 功能 就 无 须 重新 再 写 这 些 
公用 的 功能 。 


16.8.6 ”抽象 类 


抽象 类 不 能 直接 被 实例 化 ， 必 须 先 继承 该 抽象 类 ， 然 后 再 实例 化 子 类 。 抽 象 类 中 至 少 包 含 一 个 抽 
象 方法 。 如 果 类 方法 被 声明 为 抽象 的 ， 那 么 其 中 就 不 能 包括 具体 的 功能 实现 。 继 承 一 个 抽象 类 时 ， 子 
类 必须 实现 抽象 类 中 的 所 有 抽象 方法 。 如 果 抽 象 类 中 某 个 抽象 方法 被 声明 为 protected， 那 么 子 类 中 实 
现 的 方法 就 应 该 声明 为 protected 或 者 public， 而 不 能 定义 为 private。 如 : 

<2php 

abstract class AbstractClass{ 

abstract protected function getValueO: /强制 子 类 必须 定义 的 方法 
public function printOutO { // 普 通 方法 ( 非 抽象 方法 ) 
print $this->getValue() .ww 





} 
} 
class Classl extends AbstractClass{ 
protected function getValueO { /具体 化 抽象 方法 
retum " 子 类 1"; 


} 
} 
Sclassl = new Classl: 
$class1->printOut(O: /显示 : 子 类 1 
> 


< 注意 ;抽象 类 的 子 类 中 的 普通 方法 执行 方式 和 其 他 类 相同 。 
16.8.7 接口 
接口 〈interface) 就 是 另 一 种 特殊 形式 的 抽象 类 ， 你 可 以 指定 某 个 类 必须 实现 哪些 方法 ， 但 不 需 


要 定义 这 些 方法 的 具体 内 容 。 使 用 interface 关键 字 可 以 定义 一 个 接口 ， 结 构 与 标准 类 一 样 ， 但 其 中 定 
义 所 有 的 方法 都 是 空 的 。 如 : 


<?php 
// 声 明 一 个 iTemplate 接口 
interface iTemplate{ 
public function setVariable($name. $var): 


} 
// 实 现 接口 
class Template implements iTemplate{ 
private $vars = arrayO: 
public function setVariable($name, $var) { 
S$this->vars[$name] = $var: 
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要 实现 一 个 接口 ， 可 以 使 用 implements 操作 符 。 类 中 必须 实现 接口 中 定义 的 所 有 方法 ， 否 则 会 
报错 。 如 果 要 实现 多 个 接口 ， 可 以 用 去 号 来 分 隔 多 个 接口 的 名 称 。 实 现 多 个 接口 时 ， 接 口中 的 方法 不 
能 有 重 名 。 

接口 中 定义 的 所 有 方法 都 必须 是 public， 这 是 接口 的 特性 。 接 口 也 可 以 继承 ， 通 过 使 用 extends 
操作 符 。 接 口中 也 可 以 定义 常量 ， 接 口 常量 和 类 常量 的 使 用 完全 相同 ， 它 们 都 是 定 值 ， 不 能 被 子 类 或 
子 接口 修改 。 


16.9 PHP 编码 规范 


严谨 的 代码 编写 习惯 将 让 用 户 受益 终生 ， 下 面 就 PHP 开发 中 一 些 约定 俗 成 的 编码 规范 进行 汇总 ， 
以 方便 用 户 学 习 。 


16.9.1 命名 规范 


1 变 重 

回 “全 局 变量 使 用 $g 开头 ， 如 $g_data_list。 

一 般 的 变量 使 用 小 写字 母 命 名 ， 单 词 之 间 使 用 下 划 线 分 隔 。 

变量 名 字 应 该 使 用 名 词 或 者 形容 词 + 名 词 的 方式 。 如 $value，Snew_value。 
不 要 将 在 循环 中 频繁 使 用 的 临时 变量 等 用 于 其 他 用 途 ， 如 $i、$j。 

2.， 常量 

常量 使 用 大 写字 母 命名 ， 单 词 之 间 使 用 下 划 线 分 隔 ， 如 DB_HOST。 

3 函数 


函数 采用 小 写字 母 合 名， 单词 之 间 使 用 下 划 线 分 隔 。 函 数 的 命名 建议 使 用 动词 + 名 词 的 方式 ， 如 
get_user img。 

4. 类 

类 使 用 英文 的 大 小 写 来 分 隔 单词 ， 包 括 首 个 单词 ， 所 有 单词 的 首 字母 大 写 ， 如 PageManager。 在 
类 中 ， 方 法 放 到 属性 定义 前 边 ， 公 用 方法 放 到 专用 方法 前 边 ， 一 般 情况 下 ， 一 个 类 对 应 到 一 个 文件 ; 
当 一 些 类 关系 紧密 时 ， 可 以 存放 在 一 个 文件 中 ; 存放 类 的 文件 采用 ClassName.class.php 方式 命名 。 

5. 方法 

方法 使 用 英文 的 大 小 写 来 分 隔 单词 , 除 首 个 单词 外 , 其 他 单词 的 首 字母 大 写 , 如 getCurrentPage0; 
不 要 采用 不 常用 的 缩写 ， 如 where2go0; 使 用 常用 的 缩写 时 ， 只 大 写 首 字母 ， 如 getHtml0。 


16.9.2 版式 规范 


1. 语义 分 隔 
各 个 函数 、 方 法 之 间 应 该 采用 空 行 间隔 ; 同一 个 函数 中 联系 紧密 的 语句 之 间 可 以 不 换行 ， 其 他 情 





“0 





况 需 要 换行 。 


2. 


回 
回 


空格 


逻辑 运算 符 前 后 必须 加 空格 ， 例 如 : 


加 减 运算 符 不 能 加 空格 。 


多 个 参数 分 隔 时 必须 加 空格 ， 例 如 : 


$g_pro, $g_user g_show: 

get_db_ info($host $user, $passwd): 
$g_pro.$g_user$g_show: 
get_db_info($host$user$passwd); 


回 


语法 关键 字 后 必须 加 空格 ， 例 如 : 


for ($i= 0; $i< 10: $i++) 
for($i = 0: $i < 10: $it+ ) 


各 


字符 串 与 变量 连接 使 用 “.” 号 时 ， 必 须 在 “.” 前 后 加 空格 ， 使 用 “” 号 时 ， 必 须 在 变量 前 后 加 


全 


字符 串 和 变量 连接 


例如 : 


Smy name= ‘file ” .$varl: 
$my name= “file {$varl}” ; 
Smy name= “file ” .$varl:; 
$my_name = “file $varl” ; 


4. 


函数 名 后 括号 不 需要 加 空格 ， 语 法 关键 字 后 的 括号 必须 加 空格 。 例 如 : 


加 括号 


for ($i= 0: $i< 10; $i++) 
strlen($my_name): 

for($i = 0: $i< 10; $it+ ) 
strlen ($my_name); 


到 


花 括号 
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/正确 
/错误 
/正确 
/错误 


/正确 
/正确 
/错误 
/错误 


/正确 
/错误 


/正确 
/正确 
/错误 
/错误 


/正确 
/正确 
/错误 
/错误 


花 括号 必须 为 上 下 对 应 。 例 如 ， 下 面 写 法 是 正确 的 。 





if (8a) { 
$b= $a; 
6.， 数组 定义 
数组 定义 和 使 用 时 在 key 值 前 后 必须 加 单 引号 。 例 如 : 
回 ”正确 
array( 


mame' => 'd5s.cn'. 


“Be 





现 
) 六 





a 
&% 


7. SQL 字符 串 

| 在 PHP 中 嵌入 的 SQL 语句 关键 字 全 部 采用 大 写 ; 表 名 和 字段 名 要 用 反 引 号 〈`) 引起 来 以 防止 因 
| 为 字段 名 中 包含 空格 而 出 现 错误 ， 数 据 值 两 边 用 单 引 号 ' 包 括 ， 并 且 应 确保 数据 值 中 的 单 引 号 已 经 
| 义 ， 以 防止 SQL 注入 。 例 如 : 

| $sql = “SELECT user .name' FROM user WHERE 'id = “$id” ": /正确 

$sql = “select name.user from name where id=$id”: /错误 


| 

| 16.9.3 注释 规范 

| 

| 不 写 不 必要 的 注释 ， 只 有 当代 码 不 能 很 好 地 说 明 罗 和 辑 时 ， 才 用 注释 补充 ; 把 注释 看 成 程序 的 一 部 
| 分 ， 在 编写 /维护 代码 时 同时 编写 /维护 注释 ; 注释 完全 采用 PHPDocumentor 的 规范 ， 以 方便 用 其 生成 
| API 级 文档 。 下 面 给 出 各 个 部 分 的 注释 示范 。 

| 1. 文件 头 注释 

注释 包括 以 下 方面 。 

(1) 项 目 、 模 块 名 称 ， 文 件 名 称 、 功 能 说 明 。 

(2) 模块 或 文件 的 使 用 说 明 。 

(3) 作者 、 日 期 。 

(4) 修改 记录 。 

示范 : 


/ 率 玉 六 率 玉 率 素 六 六 率 率 六 这 率 这 率 率 率 率 六 率 闪 率 六 让 让 六 六 让 证 率 


* 项 目 名 称 ，ZMedia 数据 抓 取 服务 

* 文件 名 称 : ZMedia Spiderphp 

* 文件 功能 ， 服 务 运行 入 口 

率 素 素 素 素 素 素 素 素来 束 求 率 素 素 素 束 率 素 素 事 束 率 事 束 率 束 素 束 束 事 束 训 来 率 束 束 束 束 素 来 

* 运行 方式 : php /ZMedia_Spiderphp [-s] [控制 信号 ] [-d] 

* 参数 说 明 : 

*# -5 控制 信号 : start (开始 运行 )、stop〈 结 束 运行 )、restart 〈 重 新 启动 ) 
* -d 调试 状态 ， 终 端 窗口 显示 输出 调试 信号 ， 否 则 无 窗口 运行 输出 到 日 志 
下 


* 如 : php ./ZMedia_Spider.php -s restart -d debug 
本 


率 素 于 素来 素 束 束 素来 于 来 于 事 素 束 束 素 束 素 束 束 宁可 束 束 束 束 可 可 可 可 可 可 束 束 可 事 束 可 来 
| * 创建 日 期 2015-05-01 
| * 创建 作者 : 张 三 


| 于 玉 六 闪闪 闪闪 六 六 站 水 闵 闪闪 冰 妆 六 六 闪闪 六 六 率 半 六 闪 六 站 六 站 率 让 症 亲 亲 闵 站 六 让 订 站 
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* 修改 记录 : 
* 2015-05-01，V1.0， 创 建文 件 
刘表 闪 闪 半 闪闪 闪闪 灾 灾 / 
2. 类 注释 

注释 包括 以 下 方面 。 

(1) 类 名 称 。 

(2) 作者 、 日 期 。 

(3) 修改 记录 。 

示范 : 





/让 六 六 这 六 率 闪闪 这 率 证 闪闪 宙 闵 让 六 这 让 证 六 证 市 六 下定 灾 认 太古 灾 让 


* 文件 功能 :日 志 记录 类 


于 六 率 率 六 率 六 率 闵 于 兴 率 兴 六 六 六 率 闵 素 闵 冰冰 六 六 六 率 率 闵 率 素 六 六 灰 闵 闪 六 证 率 认 


* 创建 日 期 : 2015-05-21 
* 创建 作者 : 张 三 


素来 六 玉 冰 来 率 六 来 六 证 闵 来 永 来 六 永 术 本 冰 来 闵 素 冰 来 永 玉环 玉 证 水 永 率 闵 率 率 玉环 亲 
* 修改 记录 : 
* 2015-05-21，V1.0， 创 建文 件 
宁可 率 率 率 率 率 训 束 束 于 束 于 机 间 本 训 可 机 可 字 可 宙 训 机 可 本 可 本 可 可 可 事 率 可 可 可 可 可 可 
3 函数 /类 方法 注释 
注释 包括 以 下 方面 。 
(1) 函数 /类 方法 的 功能 说 明 。 
(2) 输入 参数 说 明 。 
(3) 输出 结果 说 明 。 
(4)〔 可 选 ) 实现 流程 说 明 。 
示范 : 
/中 让 中 站 中 素 中 事 束 率 素 束 训 来 事 让 训 于 事 素 训 事 素 素 率 素 训 机 训 宙 末 可 率 率 率 宙 机 训 训 事 机 可 市 事 机 可 训 机 可可 可 可 中 本 可 可 中 可 


* 功能 ，PHP 截取 UTF-8 字符 串 ， 解 决 半 字 符 问题。 
* 说 明 : 英文 、 数 字 (半角 ) 为 1 字 节 (8 位 )， 中 文 (全角 ) 为 3 字 节 
六 六 六 北 弟 六 六 来 闵 亲 北宁 北 率 北 率 素 率 率 闪 六 六 六 率 亲 六 闵 率 六 闲 六 亲 率 闵 率 六 率 率 素 率 闵 率 闲 闲 率 率 率 率 率 率 率 宁 闲 率 率 率 率 亲 率 率 

* 输入 : $str 源 字符 串 

* $len 左边 的 子 串 的 长 度 

* 输出 取出 的 字符 串 ， 当 S$len 小 于 等 于 0 时 ， 会 返回 整个 字符 串 


本来 来 六 六 六 率 冰 率 六 六 率 闵 六 率 六 率 六 六 率 六 六 六 率 六 率 六 六 六 率 太 订 认 率 六 六 站 来 率 站 让 计 订 率 床 本 来 率 让 / 


function utf substr($str, $len) 
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第 /7/ 章 


请 求 和 获取 信息 
( 锚 视频 讲解 : S1 分 钟 ) 


现在 的 网 站 已 经 从 提供 静态 信息 的 形式 发 展 到 交互 式 的 提供 动态 信息 业务 的 方式 。Web 的 
信息 服务 形式 可 以 概括 为 两 点 : 向 客户 提供 信息 ; 记录 客户 提交 的 信息 。 要 提供 这 两 种 服务 ， 
需 解决 的 问题 是 : 如 何 快速 地 让 用 户 获取 需要 的 信息 ， 如 何 有 效 地 记录 用 户 提交 的 信息 ， 以 便 
网 站 做 出 快速 、 准 确 的 响应 

用 户 可 以 通过 表单 和 URL 附加 的 查询 字符 串 向 服务 器 传递 信息 ,PHP 也 定义 了 不 同 的 方法 
来 获取 它们 ， 然 后 通过 强大 的 服务 器 计算 能 力 和 数据 库 支持 做 出 快速 响应 ， 完 成 用 户 请 求 到 网 
站 响应 的 交互 式 循 环 。 本 章 将 详细 介绍 PHP 是 如 何 实现 用 户 请 求 到 网 站 响应 的 交互 过 程 


【 学 习 重 点 】 

MH 设计 表单 

提交 表单 数据 

使 用 PHP 获取 表单 数据 
使 用 PHP 获取 查询 字符 串 


吾 至 吾 
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17.1 定义 表单 


表单 一 直 是 前 台 设 计 和 后 台 开发 共同 处 理 的 对 象 。 前 台 需 要 考虑 表单 设计 的 可 用 性 、 实 用 性 , 而 | 


后 台 开发 则 需要 考虑 如 何 借助 表单 设计 实现 数据 交互 的 高 效 、 安 全 和 完整 。 
17.1.1 表单 结构 


| 
表单 不 仅 指 一 个 <form> 标 签 , 实际 上 它 是 一 个 复杂 的 数据 控件 , 提供 数据 输入 的 接口 和 数据 传输 | 
的 规则 , 这 有 别 于 网 页 中 其 他 标签 。 表单 另 一 个 特殊 之 处 就 是 它 包含 多 个 表单 域 对象 , 只 有 协同 合作 ，| 
整个 表单 才能 够 正常 工作 ， 实 现 信 息 交互 的 目的 。 
一 个 完整 的 表单 必须 包含 表单 框 (<form> 标 签 )、 表 单 域 (数据 输入 域 ) 和 表单 事件 (提交 按钮 ， 
触发 表单 数据 被 提交 的 界面 )， 如 图 17.1 所 示 。 


SS eonorsneonseren PE0 | seem | 表单 框 在 页 面 中 不 会 显示 , 主 
表单 结构 要 用 来 组 织 和 传输 数据 


表单 域 , 提供 输入 界面 和 数据 
接收 接口 

提交 按钮 ， 触 发 表单 | 

数据 被 发 送出 去 


图 17.1 设计 完整 的 表单 结构 
如 果 使 用 html 表示 ， 则 代码 如 下 : 
<form id="form1" name="form1" method="post" action=""> 
<labelj> 姓 名 : <input type="text" name="textfield" id="textfield" /> </label> 
<fieldset data-role="controleroup" data-type="horizontal"> 
<legend> 性 别 : </legend> 
<label><input name="sex" type="radio" value=" 男 " checked /> 男 </label> 
<label><input name="sex" type="radio" value=" 女 " /> 女 </label> 
</fieldset> 
<fieldset data-role="controleroup" data-type="horizontal"> 
<legend> 兴 趣 : </legend> 
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<label><input name="interest" type="checkbox" value=" 体 育 " 人 体育 </label> 
<label><input name="interest" type="checkbox" value=" 音 乐 " 广 音乐 <label> 
<label><input name="interest" type="checkbox" value=" 计 算 机 " /> 计算 机 </label> 
</fieldset> 
<labe 户 学 历 : 
<select name="level" data-inline="true"> 
<option value="levell"> 中 学 </option> 
<option value="level2"> 专 科 </option> 
<option value="level3"> 本 科 </option> 
<option value="level4"> 研 究 生 </option> 
</select> 
</label> 
<label> 简 介 : <textarea name="intr" cols="40" rows="4"></textarea></label> 
<label><input name=" type="submit" value=" 提 交 "” data-inline="true" data-theme="e" /></label> 
</form> 
在 上 面 代码 中 , <form> 标 签 构 成 了 表单 包含 框 , 其 他 元 素 都 必须 包含 在 其 中 , 而 <input>、<select> 
和 <textarea> 标 签 则 表示 表单 域 ， 其 中 <input name="" type="submit" value=" 提 交 " /> 则 表示 表单 事件 ， 
单 击 该 按钮 将 触发 表单 提交 动作 ， 实 现 数据 请 求 的 交互 行为 。 表单 域 所 包含 的 对 象 没有 限制 ， 但 是 表 
单 框 是 必需 的 ， 表 单 事件 可 以 附加 在 表单 框 上 或 者 其 他 表单 域 上 。 


17.1.2 设计 表单 页 


在 Dreamweaver 中 设计 表单 比较 方便 , 下 面 通 过 一 个 示例 的 操作 过 程 演示 如 何 快速 设计 一 个 表单 
页 面 。 

【操作 步 又】 

第 1 步 ， 打 开本 节 模 板 页 面 (orig.html)， 保 存 为 index.php。 在 这 个 示例 中 ， 将 设计 一 个 完整 的 
表单 结构 ， 最 终 预 览 效果 如 图 17.1 所 示 。 

第 2 步 ， 把 光标 置 于 插入 表单 的 具体 位 置 ， 这 
里 为 <div data-role="content"> 标 签 中 。 然后 选择 【 插 
入 】|I 【表单 】1【 表 单 】 命 令 ， 在 当前 光标 位 置 插入 
一 个 表单 框 。 插 入 表单 框 之 后 ， 在 设计 视图 中 会 显 
示 红 色 虚 线 框 ， 如 图 17.2 所 示 。 

第 3 步 ， 把 光标 置 于 表单 框 内 ， 选 择 【 插 入 】| 





| 画 Ewwwwaexphp 三 各 




















【表单 】 子 菜单 中 的 任意 一 个 表单 项 ， 如 【文本 】 。 [ene mp 

菜单 选项 ， 在 表单 框 内 的 当前 光标 位 置 插入 一 个 表 图 17.2 插入 表单 杠 

单 对 象 。 

总 提示 : 如果 插 入 的 文本 框 不 位 于 表单 框 <form> 标 签 内 ， 则 Dreamweaver 会 弹出 提示 对 话 框 提示 
是 否 增加 表单 标签。 


第 4 步 ， 在 页 面 中 插入 一 个 文本 表单 对 象 之 后 ， 选 中 该 表单 项 ， 在 【属性 】 面 板 中 设置 表单 对 象 


| 的 属性 ， 如 图 17.3 所 示 ， 该 面板 显示 文本 框 的 全 部 属性 ， 可 以 进行 快速 设置 。 


第 5 步 ， 以 同样 的 方式 ， 继 续 插 入 其 他 表单 对 象 ， 然 后 在 【属性 】 面 板 中 设置 属性 即 可 。 不 同 表 
单 对 象 及 其 属性 说 明 请 参阅 17.1.3 节 讲解 。 
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在 这 里 设置 文本 框 的 属性 ， 这 





些 属性 将 在 17.1.3 节 详 细 介 绍 
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图 17.3 设置 表单 对 象 的 属性 
17.1.3 ”设置 表单 基本 属性 


3) 
) 六 





表单 属性 众多 ， 不 过 大 部 分 表单 对 象 都 定义 有 最 基本 的 属性 ， 这 些 基本 属性 具有 通用 性 ， 下 面 简 | 


单 归纳 这 些 基 本 属性 。 
1. name 


表单 一 般 使 用 name 属性 来 标识 对 象 ， 作 为 数据 传输 中 的 名 称 ， 服 务 器 端 根据 表单 的 name 属性 
值 捕获 表单 对 象 包含 的 数据 。 因 此 在 表单 设计 中 ， 每 个 对 象 都 必须 定义 name 属性 ， 如 图 17.4 所 示 。 


服务 器 端 根据 表单 的 name 属性 
值 捕获 表单 对 象 包含 的 数据 


























17.4” 复 选 框 的 name 属性 


次 提示 ， 在 客户 端 JavaSeript 脚本 中 ， 以 及 css 样式 中 ， 过 值 才 是 表单 对 象 的 唯一 标识 。 由 于 按钮 | 


对 象 不 包含 附加 数据 ， 因 此 可 以 忽略 name 属性 。 


【拓展 】 为 表单 元 素 设置 name 属性 值 时 ， 应 该 遵循 如 下 原则 : 
回 “在 页 面 中 name 属性 值 不 能 够 重复 ， 否 则 服务 器 在 捕获 数据 时 会 发 生 错误 。 


回 name 属性 名 应 易 懂 、 好 记 。 因 为 在 PHP 脚本 中 经 常会 引用 这 些 名 称 。 易 懂 ， 能 够 保证 看 到 | 


名 称 就 可 以 知道 该 对 象 包含 的 数据 内 容 ; 好 记 ， 能 够 保证 在 脚本 中 输入 表单 对 象 的 名 称 时 ， 
不 会 出 错 。 


2. value 


大 部 分 表单 对 象 都 需要 使 用 value 属性 来 设置 在 页 面 中 显示 的 文本 或 者 向 服务 器 传递 的 值 .例如 ， 
按钮 需要 使 用 value 属性 定义 按钮 的 显示 名 称 ; 文本 框 使 用 value 属性 设置 文本 框 的 默认 值 ， 该 值 会 
被 传递 给 服务 器 ， 单 选 按钮 、 复 选 框 、 隐 藏 域 和 列表 框 /下 拉 菜 单 需 要 使 用 value 属性 来 设置 被 传递 给 
服务 器 的 值 。 如 图 17.5 所 示 是 列表 框 的 选项 值 列表 。 
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3. type 
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17.5 列表 选项 值 


对 于 输入 性 表单 对 象 〈<input> ) 来 说 ， 必 须 设置 fype 属性 ， 用 来 设置 输入 类 型 。<input> 标 签 在 
页 面 中 的 表现 样式 和 功能 说 明 如 表 17.1 所 示 。 


type 属性 值 


text 


表 17.1 输入 表单 对 象 的 类 型 


说 明 
文本 框 ， 字 符 单行 显示 ， 适 合 输入 少量 文本 。 如 <input name="text" type="text" /> 


password “| 密码 域 , 所 有 字符 都 显示 为 星 号 , 专用 密码 输入 。 如 <input name="password" type="password" /> 


checkbox 


Tadio 


复 选 框 ， 可 以 同时 选择 多 项 ， 专 用 多 项 选择 设计 。 如 <input name="checkbox" type="checkbox" 
value="?" /> 
单 选 按钮 ， 只 能 选择 一 项 ， 多 个 单 选 按钮 需要 组 合 使 用 ， 专 用 单项 选择 设计 。 如 <input 


name="radio" type="radio" value="?" /> 








submit 提交 按钮 ， 专 用 提交 表单 数据 的 触发 按钮 。 如 <input name="" type="submit" /> 

reset 重 置 按钮 ， 专 用 清空 表单 元 素 内 的 输入 数据 。 如 <input name="" type="reset" /> 

file 文件 域 ， 专 门 用 来 上 传 二 进 制 数据 流 。 如 <input name="file" type="file" /> 

hidden 隐藏 域 ， 专 门 用 来 传递 固定 值 。 如 <input name="hidden" type="hidden" value="?" /> 

imagk 图 像 域 ， 个 性 设计 提交 按钮 的 形状 。 如 <input name="image "type="image" /> 

button 普通 按钮 ， 具 有 更 广 用 途 的 动作 按钮 。 如 <input name=" button " type="button" /> 
4. size 


很 多 表单 对 象 需要 设置 该 属性 ， 当 然 它 不 是 必需 的 属性 。 对 于 拥有 该 属性 的 元 素来 说 ， 如 果 默 认 
设置 ， 则 浏览 器 将 以 默认 值 进行 显示 。 

不 同 元 素 的 size 属性 功能 也 不 同 ， 例 如 ,在 列表 框 中 size 属性 用 来 设置 列表 框 显示 的 高 度 ， 而 文 
| 件 域 、 文 本 框 和 密码 域 会 使 用 size 属性 设置 对 象 显示 宽度 ， 如 图 17.6 所 示 。 
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17.6 ”列表 框 和 文本 框 中 的 size 属性 
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5. disabled | 

每 个 表单 对 象 定义 有 disabled 属性 ， 定 义 disabled 属性 可 以 禁止 使 用 该 元 素 。disabled 属性 使 用 | 
也 比较 特殊 ， 它 没有 属性 值 ， 直 接 插入 到 标签 中 即 可 。 如 : | 

<input name="password " type="password" disabled /> ! 

该 属性 常用 在 客户 端 脚本 中 动态 控制 表单 元 素 ， 例 如 ， 当 提交 按钮 被 单 击 后 ， 设 置 disabled 属性 
使 其 处 于 禁用 状态 ， 避 免 再 次 提交 表单 。 

6. readonly 

readonly 属性 常用 在 输入 性 表单 对 象 中 ， 如 文本 框 、 密 码 域 、 文 本 区 域 , 用 来 禁止 输入 任何 信息 。 
其 用 法 如 下 : 

<textarea name="textfield" readonly="readonly"></textarea> 

7. checked 

checked 属性 与 disabled 属性 一 样 没 有 属性 值 。 常 用 在 选择 性 表单 对 象 中 ， 定 义 对 象 处 于 被 选中 
状态 ， 如 单 选 按 钮 和 复 选 框 。 例 如 : 

<input name="" type="radio" value="" checked /> 

在 列表 框 或 者 下 拉 菜 单 中 ， 为 了 表示 被 选中 的 项 目 ， 常 用 selected 属性 ， 例 如 : 


<select name="select"> 
<option value="1">1</option> 
<option value="2" selected="selected">2</option> 
‘<option value="3">3</option> 

</select> 


17.1.4 使 用 表单 对 象 


表单 对 象 在 页 面 中 呈现 不 同 的 UI 效果 ， 具 有 不 同 的 数据 输入 体验 , 但 是 它们 的 功能 都 是 相同 的 ， 
即 接收 数据 。 表 单 将 根据 不 同 表单 对 象 接收 并 传递 数据 。 服 务 器 也 将 以 表单 对 象 作为 信息 单元 对 表单 
数据 进行 捕获 。 

1. 文本 框 

文本 框 比较 常用 ， 任 何 类 型 的 信息 都 可 以 通过 文本 框 实现 交互 。 文 本 框 包含 很 多 属性 ， 常 用 属性 
及 其 语法 格式 如 下 : 








<input 
name="textfield" <!-- 必 设 属 性 --> | 
type="text" <!-- 必 设 属性 -> | 
id="textfield" <!-- 可 选 属性 -> | 
value=" 单 行文 本 框 " <!-- 默 认 值 ， 可 选 属性 -> | 
size="20" <!-- 定 义 文本 框 的 宽度 ， 即 文本 框 的 显示 长 度 --> | 
maxlength="20" <!-- 定 义 文本 框 的 大 小 ， 即 最 多 接收 字符 数 --> | 

户 


【拓展 】 文 本 框 体 现 了 信息 接收 的 多 样 性 和 自由 性 ， 用户 可 以 在 文本 框 中 输入 任意 数据 ， 这 些 都 
没有 限制 。 但 是 这 也 为 后 台数 据 处 理 带 来 麻烦 。 例 如 ， 如 果 获 取 用 户 的 性 别 信息 ， 使 用 文本 框 让 用 户 
输入 性 别 ， 就 会 存在 很 多 问题 。 有 的 用 户 可 能 会 输入 “ 男 ”， 也 有 的 用 户 可 能 会 输入 “men”， 或 者 有 
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| 的 用 户 输入 “先生 ”“ 男 人 ”等 。 所 以 在 使 用 文本 框 时 应 该 考虑 下 面 几 个 问题 : 

| 信息 是 否 确定 。 确 定 的 信息 就 不 需要 用 户 输入 ， 直 接 使 用 隐藏 域 传递 即 可 。 

| 信息 是 否 具 体 。 具 体 的 信息 就 应 该 让 用 户 进行 选择 ， 而 不 是 让 用 户 进行 输入 。 
全 | 信息 是 否 模糊 。 模 糊 的 信息 应 该 使 用 文本 框 ， 而 不 能 设计 选项 或 者 列表 让 用 户 进行 操作 。 
| 在 实际 应 用 中 文本 框 多 用 于 要 求 用 户 输入 个 人 信息 ， 如 姓名 、 地 址 等 不 确定 的 简单 信息 。 


“Noite 二 时 二 7 
| 密码 域 也 是 一 种 文本 框 , 不 过 它 是 一 种 特殊 用 途 的 文本 框 , 与 普通 文本 框 不 同 之 处 就 在 于 它 在 页 
| 面 中 不 显示 所 有 输入 字符 ,而 是 全 部 用 星 号 代 蔡 ， 这 样 的 设计 目的 是 为 了 防止 密码 不 被 旁观 者 恶意 窃 
| 取 ， 如 图 17.7 所 示 。 
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内 容 不 可 见 的 密码 域 





图 17.7 文本 框 与 密码 域 效果 比较 


3. 文本 区 域 

文本 区 域 就 是 多 行文 本 框 , 由 于 它 能 够 多 行 显示 输入 的 信息 , 常 被 设计 为 接收 大 容量 信息 的 项 目 。 
例如 ， 个 人 简介 、 对 象 说 明 、 详 细 计 划 、 图 书目 录 、 多 行列 表 等 。 

与 文本 框 不 同 ， 文 本 区 域 使 用 textarea 元 素 定义 。 文 本 区 域 的 代码 格式 如 下 : 








| <textarea 
| name="textarea" <!-- 必 设 属性 -> 
| cols="20" <!-- 定 义 文本 区 域 显示 的 列 数 〈 宽 度 )， 以 字符 为 单位 -> 
| ToWs="5" <!-- 定 义 文本 区 域 显示 的 行 数 〈 高 度 ) --> 
| wrap="physical"> <!-- 定 义 换行 方式 -> 
| <!-- 这 里 是 文本 区 域 显示 的 输入 信息 ， 也 可 以 在 此 设置 默认 显示 信息 --> 
</textarea> 


【拓展 】 与 文本 框 相 比 ， 文 本 区 域 有 如 下 3 个 特征 : 

文本 区 域 元 素 是 一 个 封闭 式 标签 ， 这 有 别 于 文本 框 等 输入 性 表单 元 素 input。 

回 textarea 元 素 没有 value 属性 ， 可 以 在 标签 中 间 定 义 默认 显示 信息 。 

回 ”textarea 元 素 提供 了 3 个 比较 特殊 的 属性 , 其 中 wrap 属性 用 来 定义 当 输 入 文本 内 容 大 于 文本 
区 域 定义 的 宽度 时 ， 如 何 进 行 显示 。 它 包含 两 个 属性 值 ， 说 明 如 表 17.2 所 示 。 


表 17.2 wrap 属性 值 列表 














| 属性 什 说 明 
| oft | 默认 值 ， 当 在 表单 中 提交 时 ，textarea 中 的 文本 不 换行 
| hard 当 在 表单 中 提交 时 ，textarea 中 的 文本 换行 包含 换行 符 ) 。 当 使 用 hard 时 ， 必 须 定义 cols 属性 
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4. 单 选 按钮 | 
单 选 按钮 传递 的 信息 非常 简单 ， 可 以 用 一 个 字 节 来 表示 ， 如 1、0、tmue 或 false。 从 开发 的 角度 | 
分 析 ， 由 于 单 选 按钮 传递 的 信息 比较 单纯 ， 很 容易 被 服务 器 处 理 ， 常 常 被 用 于 脚本 中 实现 逻辑 判断 。 | 
例如 ， 判 断 是 男 是 女 、 是 对 是 错 、 是 否 同意 等 。 | 图 
通过 设置 相同 的 name 属性 值 ， 可 以 把 多 个 单 选 按钮 捆绑 在 一 起 ， 设 计 为 单 选 按钮 组 。 例如， 下 | 
面 代码 设计 一 个 性 别 选项 ， 效 果 如 图 17.8 所 示 。 
<fieldset data-role="controlgroup"> 
<legend> 性 别 </legend> 
<label> 


| 
<input name="sex" type="radio" value=" 男 " checked /> 男 </label> | 
<label> | 
<input name="sex" type="radio" value=" 女 " /> 女 </label> 
</fieldset> | 
【拓展 】 使 用 单 选 按钮 时 ， 应 该 注意 下 面 几 个 问题 。 
回 ” 单 选 按钮 必须 分 组 才能 够 完成 任务 。 多 个 单 选 按钮 通过 定义 相同 的 name 属性 拥 绑 在 一 起 。 | 
回 ”被 分 为 一 组 的 单 选 按钮 在 浏览 时 ， 只 能 有 一 个 可 以 选中 。 | 
加 ” 单 选 按钮 传递 的 值 一 般 都 比较 单纯 ， 建 议 不 要 在 单 选 按 钮 中 附加 过 多 的 信息 ， 最 好 是 连续 | 
的 数字 编号 或 者 风 辑 值 。 这 样 即 加快 数 据 的 传输 速度 ， 同 时 也 方便 服务 器 的 处 理 。 
5， 复 选 框 
复 选 框 传递 的 信息 也 比较 单一 ,但 是 当 多 个 复 选 框 捆绑 在 一 起 时 ， 可 以 设计 多 项 选择 ,方便 用 户 | 
快速 选择 ， 而 不 用 手动 输入 信息 。 | 
捆绑 复 选 框 的 方法 是 为 多 个 复 选 框 定义 相同 的 name 属性 值 ， 例 如 ， 下 面 代码 定义 了 一 个 复 选 框 | 
组 ， 效 果 如 图 17.9 所 示 。 
<ficldset data-role="controlgroup'> 
<legend> 兴 趣 </legend> 
<label> 
<input name="interest" type="checkbox" value=" 体 育 " /> 体育 </label> 
<label> 
<input name="interest" type="checkbox" value=" 音 乐 " /> 音乐 </label> 
<label> 
<input name="interest" type="checkbox" value=" 计 算 机 " /> 计算 机 </label> 
</fieldset> 


) 六 





< | Er Er 


复 选 框 组 





图 17.8 单 选 按钮 组 图 17.9 复 选 框 组 
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| 设计 复 选 框 时 ， 应 把 一 组 复 选 框 排列 在 一 起 ， 并 命名 为 有 规律 的 名 字 ， 以 方便 后 台 处 理 。 因 为 在 
| 脚本 中 需要 逐一 获取 每 个 复 选 框 传递 的 值 ， 并 根据 复 选 框 是 否 被 选中 来 决定 采用 哪些 选项 值 。 
| 6， 列表 菜单 
到 | 列表 框 与 单 和 按钮 和 复 选 框 一 样 才 是 属于 选择 性 表单 对 象 ， 所 接收 的 信息 一 般 都 是 固定 的 ， 通过 
en 但 是 它们 在 使 用 上 也 有 区 别 。 
Note | 单 选 按钮 和 复 选 框 能 够 在 页 面 中 显示 全 部 选项 ， 这 样 方便 浏览 ， 对 于 选项 比较 少时 ， 使 用 
| 单 选 按钮 或 复 选 框 会 比较 经 济 。 如 果 选 项 过 多 ， 就 会 占用 过 多 的 页 面 ， 而 浪费 空间 。 
列表 框 能 够 把 所 有 选项 包含 在 一 个 框 内 ， 可 以 隐藏 部 分 或 全 部 选项 。 这 对 于 选项 很 多 时 ， 
就 显得 很 实用 。 例 如 ， 在 选择 国籍 、 省 份 、 区 号 等 大 量 选 项 的 信息 时 ， 一 般 都 会 采用 下 拉 
菜单 来 设计 。 
列表 框 和 下 拉 菜单 同属 于 一 个 表单 元 素 (select)， 只 不 过 它们 的 显示 样式 不 同 。 
如 果 在 select 元 素 中 不 设置 size 属性 ， 则 该 元 素 会 显示 为 下 拉 菜 单 样式 ， 如 图 17.10 所 示 。 


<labe 户 学 历 
<select name="level’> 
<option value="levell "> 中 学 </option> 
<option value="leve]2 "> 专科 </option> 
<option value="leveB "> 本 科 </option> 
<option value="leveM4'"> 研 究 生 </option> 
</select> 








17.10 下 拉 菜 单 样式 


如 果 以 列表 框 形式 显示 ， 则 可 以 使 用 size 属 
性 指定 列表 框 的 高 度 ， 设 计 显示 几 个 选项 。 还 可 
以 通过 multiple 属性 定义 列表 框 是 否 为 多 选 ， 效 
果 如 图 17.11 所 示 。 

定义 multiple 属性 之 后 ， 列 表 框 与 复 选 框 功 
能 类 似 ;没有 指定 multiple 属性 或 者 没有 定义 size 
| 属性 ， 列 表 框 或 下 拉 菜 单 在 功能 上 与 单 选 按 钮 组 
| 相同 。select 包含 的 option 元 素 是 一 个 可 选 对 象 ， 图 17.11 列表 框 样式 
可 以 是 任意 多 个 选项 。 

7. 文件 域 
| 文件 域 是 一 个 复合 控件 ， 由 文本 框 和 浏览 按钮 组 成 ， 文 件 域 常用 来 传递 二 进 制 数据 流 ， 如 文件 、 
| 图 片 等 。 文 件 域 用 法 如 下 ， 效 果 如 图 17.12 所 示 。 
”EK 文件 
| <input name="file" type="file" /> 


<select name="level" size="4" 


multiple="multiple"> 





8. 按钮 
| 按钮 不 负责 接收 和 传递 数据 ， 仅 作为 执行 具体 操作 的 事件 。 单 击 按钮 时 将 触发 一 个 动作 ， 并 执行 
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| 

相应 的 行为 ， 以 完成 某 项 任务 。 按 钮 有 多 种 类 型 ， 例 如 : | 
负责 提交 表单 数据 的 提交 按钮 : | 
<input name="" type="submit" value=" 提 交 " /> 





负责 恢复 表单 域 的 默认 显示 的 重 设 按钮 : | 凶 
<input name="" type="reset" value=" 重 置 " /> 
没有 包含 特定 行为 的 普通 按钮 ; | 
<input name="" type="button" value= "普通 按钮 " 亡 | 
9， 图 像 域 

| 


图 像 域 实际 上 就 是 一 个 提交 按钮 ， 它 允许 用 户 选择 图 像 作为 按钮 的 显示 界面 ,因此 适合 设计 个 性 | 
按钮 样式 。 例 如 ， 下 面 代码 使 用 图 像 域 设计 一 个 提交 按钮 ， 效 果 如 图 17.13 所 示 。 

<input name="submit"” type="image" value=" 提 交 ”src="images/submit.gif" alt=" 提 交 " align="middle" height= 
ps 


ES m/c sc]smex | 


图 像 域 





| 选择 文件 | indexl pnp 








17.12 文件 域 17.13 ”图 像 域 设计 的 提交 按钮 


10， 隐藏 域 

隐藏 域 主要 用 来 在 表单 中 传递 固定 的 值 , 该 对 象 不 会 显示 在 页 面 中 , 但 是 其 值 可 以 在 网 页 源 代码 
中 查看 。 一 般 使 用 隐藏 域 来 传递 一 些 配置 信息 或 者 辅助 信息 ， 以 弥补 提交 表单 时 ， 很 多 数据 在 表单 中 
无 法 传递 的 问题 , 但 是 要 避免 使 用 隐藏 域 传递 个 人 隐私 信息 ,或 者 传递 一 些 完整 的 、 大 容量 信息 。 因 
为 这 样 既 不 安全 ， 也 给 数据 传输 增加 负荷 。 

隐藏 域 使 用 比较 简单 ， 代 码 格式 如 下 : 


<input 
name="id" <!-- 必 设 属性 ， 指 定 隐藏 域 的 名 称 --> 
type="hidden" <!-- 必 设 属性 ， 指 定 隐藏 域 的 类 型 --> 
value="100" <!-- 必 设 属性 ， 指 定 要 传递 的 值 -> 
户 


17.2 提交 数据 


提交 表单 数据 需要 考虑 提交 数据 类 型 的 设置 ， 选 择 提交 数据 的 方法 ， 设 置 后 台 接收 数据 的 文件 ， 
即 指定 表单 提交 数据 的 URL。 下 面 针 对 这 些 技术 难点 进行 详细 说 明 。 
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17.2.1 定义 传输 类 型 


为 了 正确 编码 和 解码 表单 数据 ，form 元 素 定义 一 个 enctype 属性 ， 该 属性 可 以 定义 表单 数据 的 编 
码 类 型 。 常 用 类 型 包括 两 种 ， 说 明 如 下 ， 另 外 还 可 以 设置 text/plain 类 型 ， 以 直接 字符 形式 进行 传递 ， 
该 类 型 不 常用 。 

application/x-www-form-URLencoded 

application/x-www-form-URLencoded 是 默认 编码 类 型 。 表 单数 据 被 编码 为 “名 / 值 ”对 的 形式 (这 





| 是 标准 的 编码 格式 )。 


这 种 编码 方式 将 空格 用 “+” 代 蔡 ， 非 字母 和 数字 字符 用 以 “%hh” 表 示 的 该 字符 的 ASCII 编码 
代 蔡 (汉字 就 是 这 种 形式 )， 而 变量 和 值 使 用 “=” 连接 在 一 起 ， 各 个 变量 和 值 对 之 间 使 用 “&” 连 接 。 
通过 这 种 方式 把 表单 中 输入 的 数据 进行 打包 ， 并 发 送 到 服务 器 端 ， 示 意图 如 图 17.14 所 示 。 

HITP 头 部 区 域 





图 17.14 URLencoded 编码 数据 传输 格式 


application/x-www-form-URLencoded 编码 方式 不 能 传递 二 进 制 数据 流 ， 不 适合 文件 上 传 ， 它 只 能 
提交 符合 ASCII 编码 的 文本 字符 串 。 

multipart/form-data 

multipart/form-data 编码 可 以 把 表单 数据 编码 为 多 条 消息 , 其 中 每 个 表单 域 对 应 一 个 消息 块 。 这 种 
方式 传输 的 消息 包含 了 一 系列 的 数据 块 , 每 一 个 数据 块 代表 表单 中 的 一 个 表单 域 变 量 , 并 且 数 据 块 的 
排列 顺序 与 页 面 中 表单 域 的 排列 顺序 是 一 一 对 应 的 。 数 据 块 与 数据 块 之 间 使 用 特殊 字符 分 隔 , 示意 图 
如 图 17.15 所 示 。 


HTTP 主体 部 分 
消 …。 
ee 量 服务 器 端 
济 星 久 脚本 文件 
表单 





图 17.15 form-data 编码 数据 传输 格式 
multipart/form-data 编码 方式 可 以 用 来 传输 二 进 制 数据 或 者 非 ASCII 字符 的 文本 〈 如 图 片 、 不 同 


| 格式 的 文件 等 )。 请 注意 ， 只 有 使 用 multipart/form-data 方式 ， 才 能 完整 地 传递 文件 数据 。 但 是 这 种 编 


码 方式 在 客户 端 和 服务 器 端 都 会 有 很 多 限制 。 
这 提示 : multipart/fomm-data 编码 方式 ， 必 须 使 用 POST 方法 ，GET 方法 无 法 处 理 这 样 的 表单 数据 。 
17.2.2 ”定义 提交 方法 

指定 表单 数据 的 编码 类 型 之 后 ， 还 需要 设置 表单 数据 的 发 送 方法 。form 元 素 通过 method 属性 定 
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义 发 送 表单 数据 的 方法 。method 属性 取 值 包括 get 和 post (默认 )。 这 两 种 方法 在 数据 传输 过 程 中 分 
别 对 应 于 http 协议 中 的 GET 和 POST 方法 。 这 两 种 方法 的 区 别 如 下 。 





GET 方法 是 将 表单 数据 作为 字符 串 附加 到 URL 后 面 ， 用 “?” 符 号 进行 区 分 ， 每 个 表单 域 | 


(名 / 值 对 ) 之 间 用 “& ”符号 隔 开 ， 然 后 把 整个 字符 串 发 送 到 服务 器 端 。 例 如 : 
http://www.baidu com/s?id=1 &method=get 


由 于 系统 环境 变量 的 长 度 限 制 了 输入 字符 串 的 长 度 ， 因 此 GET 方法 所 发 送 的 信息 不 能 太 长 , 一! 


般 在 4000 字符 左右 ， 而 且 不 能 含有 非 ASCII 码 字符 。 
由 于 GET 方法 通过 在 浏览 器 的 地 址 栏 中 以 显 式 方 式 传递 表单 数据 ， 也 带 来 信息 安全 性 问题 ， 因 
此 使 用 时 必须 要 小 心 。 
POST 方法 是 将 表单 数据 进行 加 密 ， 并 随 HTTP 数据 流 一 同 发 送 到 服务 器 。 这 种 方法 发 送 的 
数据 量 基本 上 没有 什么 限制 ， 因 此 在 表单 设计 中 作为 推荐 选项 进行 设置 。 如 果 设 计 上 传 文 
件 时 ， 必 须 设置 POST 方法 。 


17.2.3 ”定义 请 求 地 址 





提交 表单 后 ， 把 表单 数据 上 传 到 服务 器 ， 实 际 上 就 是 把 表单 数据 传递 给 另 一 个 文件 。 从 Web 开 | 


发 的 角度 来 分 析 ， 提 交 表 单 其 实 就 是 页 面 之 间 的 数据 传递 。 

在 表单 设计 中 必须 确定 数据 发 送 的 目标 ， 这 个 目标 可 能 就 是 准备 接收 表单 数据 的 PHP 文件 。 只 
有 这 样 网 页 交互 的 任务 才能 够 得 以 实现 。form 元 素 为 此 提供 了 action 属性 , 该 属性 可 以 定义 要 接收 表 
单数 据 的 页 面 。 例 如 : 

<form id="forml" name="forml" method="post" action="text.php"> 


</form> 


上 面 代码 定义 了 表单 数据 传递 给 同一 目录 中 的 text.php 文件 。 URL 可 以 是 相对 路 径 , 也 可 以 是 绝 
对 路 径 ， 具 体 设置 可 以 根据 需要 而 定 。 

另外 ， 还 可 以 定义 target 属性 ， 指 定 打开 目标 页 面 的 方式 ， 包 括 blank、_self、_parent 和 _top 4 
个 值 ， 简 单 说 明 如 下 。 

_blank: 表示 在 一 个 新 的 窗口 中 打开 指定 文件 。 

_self: 表示 在 当前 窗口 中 打开 指定 文件 。 

_parent: 表示 在 当前 框架 的 父 框架 窗口 中 打开 指定 文件 ， 如 果 没有 父 框架 ， 等 价 于 _self。 

_top: 表示 在 顶部 浏览 器 窗口 中 打开 指定 文件 ， 如 果 没 有 框架 ， 等 价 于 _self。 

action 属性 不 仅 可 以 指定 URL 字符 串 ， 也 可 以 是 一 个 电子 邮件 地 址 ， 采 用 电子 邮件 方式 时 ， 用 
action=mailto: 邮 件 地 址 来 表示 ， 例 如 : action="maito:zhangsan@163.com"。 


17.3 获取 表单 数据 


PHP 获取 客户 端 传 递 的 数据 主要 是 通过 预定 义 变量 $_POST 和 $_GET 来 实现 的 。 其 中 $_POST 变 | 


量 是 一 个 数据 集合 ， 负 责 存储 表单 以 POST 方法 提交 的 数据 ， 而 $_GET 变量 负责 存储 URL 字符 串 后 
面 附加 的 查询 字符 串 参数 值 。 本 节 将 详细 介绍 使 用 $_POST 获取 表单 数据 的 一 般 方法 ,在 17.4 节 再 详 
细 介 绍 $_GET 的 使 用 方法 。 


“625 


砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 





17.3.1 获取 文本 框 的 值 


表单 数据 被 准确 发 送 到 服务 器 端 后 ， 服 务 器 后 台 程序 就 可 以 捕获 、 接 收 这 些 数 据 了 ， 并 根据 需要 
人 鲜 | 对 这 些 数据 进行 各 种 处 理 , 例 如， 把 表单 数据 写 入 到 数据 库 , 或 者 对 数据 进行 简单 的 处 理 后 再 响应 给 
| 客户 端 浏览 器 ， 也 可 以 利用 表单 数据 进行 各 种 复杂 的 计算 ， 以 实现 Web 应 用 的 目的 。 
Note | 使 用 $_POST 获取 文本 框 值 很 简单 。 例 如 ， 在 本 地 站 点 根 目录 下 新 建 一 个 index.html 文件 ， 设 计 
| 一 个 表单 界面 ， 在 其 中 添加 一 个 文本 框 ， 同 时 定义 表单 的 action 属性 为 requestphp， 当 提交 数据 后 ， 
| requestphp 将 接收 数据 并 响应 给 用 户 ， 演 示 效 果 如 图 17.16 所 示 。 


SS rr ¢ |° EE EE ET 


获取 文本 框 的 信 获取 文本 枢 的 什 











提交 表单 响应 信息 
17.16 示例 效果 


【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver CC， 选 择 【 文 件 】| 【新建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 如 
| 图 17.17 所 示 。 在 该 对 话 框 中 选择 “空白 页 ”选项 ， 设 置 页 面 类 型 为 “HTML”， 设 置 文 档 类 型 为 
| “HTML5”， 然 后 单 击 【 确 定 】 按 钮 ， 完 成 文档 的 创建 操作 。 


布 同 | 
KE 
2 Hh, RM, NE 
3 了 放 ， 标 入 
rb 


[FE 


国 pikts 
































| 图 17.17 新 建 HIML5 类 型 文档 
第 2 步 ， 按 Ctrl+S 快捷 键 ， 保 存 文 档 为 mdex.html。 打 开 模 板 页 (orig.html)， 完 全 复制 该 页 面 的 


"826 


第 17 章 请 求 和 获取 信息 





代码 到 index.html 中 。 
第 3 步 ， 把 光标 置 于 插入 表单 的 具体 位 置 , 这 里 为 <div data-role="content"> 标 签 中 。 然后 选择 【 插 
入 】|【 表 单 】|【 表 单 】 命 令 ， 在 当前 光标 位 置 插入 一 个 表单 框 。 


第 4 步 ， 选 中 表单 框 <form> 标 签 ， 然 后 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 | 


文件 为 同 目录 下 的 request.php， 请 求 的 方式 为 POST， 设 置 如 图 17.18 所 示 。 
mcm | + 


VRS jewery mobilel 3.2 modile-l.2 于 
























定义 请 求 地 址 为 requestphp, 提交 
方法 为 POST 
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17.18 ”设置 <form> 标 签 属性 


第 5 步 ， 把 光标 置 于 <form> 标 签 内 ， 再 插入 一 个 文本 框 和 提交 按钮 ， 定 义 文本 框 的 name 属性 值 
为 user， 提 交 按 钮 的 value 属性 值 为 “提交 数据 ” 设计 完整 的 表单 结构 代码 如 下 : 

<form id="forml" name="form1" method="post" action="request.php"> 

<label> 用 户 名 
<input name="user" type="text" id="user" /></label> 
<input type="submit" value=" 提 交 数 据 " /> 

</form> 

第 6 步 , 选择 【文件 】 I 【另存 为 】 命令 , 把 index.html 另存 为 request.php。 在 request.php 文档 中 ， 
清除 表单 结构 ， 然 后 在 <div data-role="content"> 标 签 中 输入 文本 “欢迎 光临 ”， 在 【属性 】 面 板 中 设置 

“格式 ”为 一 级 标题 。 

第 7 步 ， 按 Enter 键 另 起 一 行 ， 设 置 格式 为 二 级 标题 。 选 择 【 插 入 】| PHP | 【表单 变量 】 命 令 ， 
插入 一 个 表单 变量 。 

第 8 步 ,切换 到 代码 视图 ,设置 表单 变量 的 名 称 为 user, 该 名 称 为 index.html 文档 中 文本 框 的 name 
属性 值 。 同时 在 表单 变量 前 面 输入 echo 命令 , 表示 在 页 面 中 输出 表单 变量 的 值 ， 如 图 17.18 所 示 。 完 
整 代码 如 下 : 

<div data-role—"content"> 

<hl> 欢 迎 光临 <hl> 
<h2><?php echo $ POST["user"]: ?></h2> 
</div> 





现 
) 六 





【拓展 】 在 某 些 PHP 版 本 中 ， 可 以 直接 使 用 $name 获取 表单 对 象 的 值 ， 但 是 需要 在 配置 文件 php.ini | 


中 设置 register_globals = on， 就 可 以 直接 使 用 Sname 获取 表单 元 素 的 值 。 
第 9 步 ， 在 浏览 器 中 预览 index.html 页 面 ， 然 后 在 表单 中 输入 信息 ， 单 击 【 提 交 数 据 】 按 钮 提交 
表单 ， 则 在 打开 的 requestphp 页 面 中 立即 显示 刚 输 入 的 信息 ， 如 图 17.19 所 示 。 
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图 17.19 编写 PHP 接收 表单 数据 脚本 
17.3.2 ”获取 复 选 框 的 值 


当 多 个 复 选 框 绑 在 一 起 ， 组 成 一 个 复 选 框 组 ， 获 取 它们 的 值 和 方法 就 略 有 不 同 。 下 面 示例 将 演示 
| 如 何 快速 获取 复 选 组 中 被 选中 的 值 ， 演 示 效果 如 图 17.20 所 示 。 
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响应 信息 
17.20 示例 效果 


【操作 步骤 】 

第 1 步 ， 打 开 模板 页 (orig.html)， 另 存 为 index.html。 

第 2 步 ， 把 光标 置 于 <div data-role="content"> 标 签 ， 然 后 选择 【插入 】| 【表单 】| 【表单 】 命 令 ， 
在 当前 光标 位 置 插入 一 个 表单 框 。 

第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 
| 为 同 目录 下 的 request.php， 请 求 的 方式 为 POST。 
| 第 4 步 ， 把 光标 置 于 <form> 标 签 内 ， 插 入 3 个 复 选 框 和 一 个 提交 按钮 ， 定 义 复 选 框 的 name 属性 
| 值 都 为 interest[]， 而 value 属性 值 分 别 为 “体育 “音乐 ”和 “计算 机 ?”:， 定义 提交 按钮 的 value 属性 
| 值 为 “提交 数据 ”设计 完整 的 表单 结构 代码 如 下 : 
| <fom id-"foml" name="forml" method="post" action="request php"> 
| <fieldset data-role="controleroup"> 
| <legend> 兴 趣 </legend> 
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<Jabel><input name="interest[]" type="checkbox" value=" 体 育 " 请 体育 <llabel> 
<label><input name="interest[]" type="checkbox" value=" 音 乐 " 上 > 音乐 </label> 
<label><input name="interest[]" type="checkbox" value=" 计 算 机 " /> 计算 机 </label> 
</fieldset> 
<input type="submit" value=" 提 交 数 据 " /> 
</form> 
容 提示 : 在 复 选 框 组 和 单 选 按钮 组 中 ， 其 name 属性 值 必须 定义 为 数组 类 型 ， 即 名 称 后 面 要 加 一 个 
中 括号 ， 表 示 该 变量 为 一 个 数组 类 型 ， 这 样 才能 够 存储 多 个 值 。 | 


第 5 步 , 选择 【文件 1【 另 存 为 ] 命令， 把 index html 另存 为 requestphp。 在 requestphp 文档 中 ， | 
清除 表单 结构 。 然 后 在 <div data-role="content"> 标 签 中 输入 文本 “您 的 兴趣 是 : ”， 在 【属性 】 面 板 中 | 
设置 “格式 ”为 一 级 标题 。 | 

第 6 步 ， 按 Enter 键 另 起 一 行 ， 设 置 格式 为 二 级 标题 。 选 择 【 插 入 】| PHP | 【表单 变量 】 命 令 ， 
插入 一 个 表单 变量 。 

第 7 步 ， 切 换 到 代码 视图 ， 设 置 表单 变量 的 名 称 为 interest， 该 名 称 为 index.html 文档 中 文本 框 的 
name 属性 值 。 同 时 在 表单 变量 前 面 输入 echo 命令 ， 表 示 在 页 面 中 输出 表单 变量 的 值 。 完 整 代码 如 下 : 

<div data-role="content"> 

<hl> 您 的 兴趣 是 : </hl> 
<h2><?php echo $_ POST["interest"]: ?></h2> 

</div> 

容 提示 : 此 时 在 浏览 器 中 进行 测试 ， 会 发 现 如 图 17.21 所 示 的 效果 ， 说 明 还 不 能 够 直接 使 用 表单 变 | 
量 $ POST["interest"] 获 取 完 整 的 用 户 选择 信息 。 
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图 17.21 获取 不 完整 的 信息 


如 果 要 获取 用 户 完整 的 选择 操作 的 信息 , 则 可 以 把 $ POST["interest"] 视 为 一 个 数组 ， 然 后 
第 8 步 ， 切 换 到 代码 视图 ， 重 新 编写 代码 ， 使 用 countO 函 数 计算 $_ POST["interest] 数 组 的 大 小 ， 
结合 for 循环 语句 就 可 以 输出 所 有 被 选中 的 复 选 框 的 值 了 ， 完 善后 的 脚本 如 下 : 
<div data-role="content"> 


<hl> 您 的 兴趣 是 : <hl> 


<h2><?php 
$interest = $_POST["interest"]: 
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if($interest !{= nulD{ 
for($i=0:$i<count($interest):$i++) 
echo Sinterest[$i]."<br />" ; 


} 
?></h2> 
</div> 
这 提示 :使 用 POST 变量 获取 复 选 框 组 的 值 时 ， 必 须 设置 name 值 为 interest， 而 不 是 interestl， 否 则 
将 不 识别 复 选 框 组 的 值 . 


第 9 步 ， 在 浏览 器 中 预览 index.html 页 面 ， 然 后 在 表单 中 选中 复 选 框 ， 单 击 【 提 交 数 据 】 按 钮 提 
交 表 单 ， 则 在 打开 的 request.php 页 面 中 立即 显示 所 有 被 选中 的 复 选 框 信息 ， 如 图 17.20 所 示 。 


17.3.3 ”获取 下 拉 菜 单 的 值 


获取 下 拉 菜 单 的 值 与 文本 框 获取 方法 完全 相同 , 下 面 示例 演示 了 如 何 快速 获取 用 户 表单 中 下 拉 菜 
单 的 选取 值 ， 演 示 效 果 如 图 17.22 所 示 。 
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17.22 示例 效果 


【操作 步骤】 

第 1 步 ， 打 开 模板 页 (orig.html)， 另 存 为 index.html。 

第 2 步 ， 把 光标 置 于 <div data-role="content"> 标 签 ， 然 后 选择 【插入 】|【 表 单 】|【 表 单 】 命 令 ， 
在 当前 光标 位 置 插入 一 个 表单 框 。 

第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 
为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 

第 4 步 ， 把 光标 置 于 <form> 标 签 内 ， 插 入 一 个 下 拉 菜 单 和 一 个 提交 按钮 ， 定 义 下拉 菜 单 的 name 
属性 值 为 interest， 下 拉 菜 单 选项 的 value 属性 值 分 别 为 “周一 ”"、“ 周 二 ”、“ 周 三 ”、“ 周 四 ”和 “ 周 五 ”， 


| 为 了 避免 没有 安排 ， 再 添加 一 个 空 选项 ;定义 提交 按钮 的 value 属性 值 为 “提交 数据 ”设计 完整 的 
| 表单 结构 代码 如 下 : 


<div data-role="content"> 
<form id="forml" name="forml" method="post" action="request.php"> 
<label for="interest">PHP 编程 兴趣 班 安排 在 周 几 ? </label> 
<select name="interest" id="interest"> 
<option value=""></option> 
<option value=" 周 一 "> 周一 </option> 
<option value=" 周 二 "> 周二 </option> 
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<option value=" 周 三 "> 周三 </option> 
<option value=" 周 四 "> 周 四 </option> 
<option value=" 周 五 "> 周 五 </option> 
</select> 
<input type="submit" value=" 提 交 数 据 " /> | 图 
</form> | 二 
本 
第 5 步 ， 选 择 【 文 件 】 人 另存 为 】 命 令 ， 把 index.html 另存 为 request.php。 在 requestphp 文档 中 ， | 
清除 表单 结构 。 然 后 在 <div data-role="content"> 标 签 中 输入 文本 “PHP 编程 兴趣 班 安排 ?， 在 【属性 】 | 
面板 中 设置 “格式 ”为 一 级 标题 。 
第 6 步 ， 按 Enter 键 另 起 一 行 ， 设 置 格式 为 二 级 标题 。 切 换 到 代码 视图 ， 重 新 编写 代码 ， 结 合计 
条 件 语句 对 下 拉 菜 单 的 值 进行 判断 ， 最 后 输出 响应 信息 ， 完 善后 的 脚本 如 下 : 
<div data-role="content"> 
<h1>PHP 编程 兴趣 班 安排 <hl> 
<h2><?php 
Sinterest = $ POST["interest"]: 
if($interest != nulD{ 
echo S$interest; 





} 
else{ 
echo "没有 安排 "; 
} 
7></h2> 
</div> 
第 7 步 ， 在 浏览 器 中 预览 ndex.html 页 面 ， 然 后 在 下 拉 菜单 中 选择 一 个 选项 ， 单 击 【 提 交 数 据 】 按 
钮 提交 表单 ， 则 在 打开 的 requestphp 页 面 中 立即 显示 用 户 在 下 拉 菜 单 中 的 选择 信息 ， 如 图 17.22 所 示 。 


17.3.4 获取 列表 框 的 值 


获取 下 拉 菜 单 的 值 与 获取 文本 框 的 值 完 全 相同 , 由 于 列表 框 允许 多 选 , 所 以 在 获取 列表 框 的 值 时 ， 
可 以 模仿 复 选 框 组 的 方法 获取 用 户 提交 的 值 。 下 面 示例 演示 如 何 快速 获取 用 户 提 交 的 列表 框 值 ， 并 以 
按钮 的 形式 显示 出 来 ， 效 果 如 图 17.23 所 示 。 
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17.23 示例 效果 
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| 【操作 步骤 】 

| 第 1 步 ， 打 开 模 板 页 (orig html)， 另 存 为 ndex html。 

| 第 2 步 ， 把 光标 置 于 <div class="container"> 标 签 中 ， 然 后 选择 【插入 】|【 表 单 】|【 表 单 】 命 令 ， 

| 在 当前 光标 位 置 插入 一 个 表单 框 。 
第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 

el 为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 

| 第 4 步 ， 把 光标 置 于 <form> 标 签 内 ， 揪 入 一 个 列表 框 和 一 个 提交 按钮 ， 定 义 列 表 框 的 name 属性 

| 值 为 interest[]， 定 义 列表 选项 的 属性 值 分 别 为 “体育 ”” “音乐 ””“ 计 算 机 ”和 “英语 ”定义 提交 按 
钮 的 value 属性 值 为 “提交 数据 ” 如 图 17.24 所 示 。 
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图 17.24 设计 列表 框 
第 5 步 ， 切 换 到 代码 视图 ， 可 以 看 到 设计 完整 的 表单 结构 代码 如 下 : 
<div class="container"> 
<form id="forml" name="form1" method="post" action="request.php"> 
<label for="interest"> 兴 趣 </label> 
‘<select name="interest[]" id="interest" size="4" multiple class="form-control"> 
<option value=" 体 育 "> 体育 </option> 
<option value=" 音 乐 "> 音乐 </option> 
<option value=" 计 算 机 "> 计算 机 </option> 
<option value=" 英 语 "> 英语 </option> 
</select><br> 
<input type="submit" value=" 提 交 数 据 " class="btn btn-success btn-block" /> 
</form> 
</div> 
第 6 步 , 选择 【文件 】I 【另存 为 命令 , 把 index.html 另存 为 request.php。 在 request.php 文档 中 ， 
清除 表单 结构 。 然 后 在 <div class="container"> 标 签 中 输入 文本 “您 的 兴趣 是 : ”， 在 【 属性】 面板 中 设 
置 “格式 ”为 三 级 标题 。 
第 7 步 ， 按 Enter 键 另 起 一 行 ， 切 换 到 代码 视图 ， 编 写 PHP 脚本 ， 使 用 $_POST["interest"] 读 取 用 
| 户 选 择 的 值 ， 结 合 for 循环 语句 就 可 以 输出 所 有 被 选中 的 选项 值 ， 完 成 后 的 脚本 如 下 : 


| <div class="btn-group-vertical"> 
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Sinterest = $_POST["interest"]: 


if($interest != nulD){ // 济 断 列表 框 的 返回 值 是 否 为 空 
for($i=0;$i<count($interest):$i++) // 通 过 for 循环 输出 选中 的 列表 框 的 值 
echo ‘<div class="btn btn-primary">".$interest[$i].'</div>"; | pp 
} | 鳃 


?> 
< 
第 8 步 ， 在 浏览 器 中 预览 ndex.html 页 面 ， 然 后 在 列表 框 中 选中 多 个 选项 ， 单 击 【提交 数据 】 按 | 

钮 提交 表单 ， 则 在 打开 的 request.php 页 面 中 立即 显示 所 有 被 选择 的 列表 项 目 ， 如 图 17.23 所 示 。 | 


17.3.5 获取 密码 域 和 隐藏 域 的 什 


获取 密码 域 和 隐藏 域 的 值 的 方法 与 获取 文本 框 的 值 方法 相同 ， 都 是 直接 通过 name 属性 快速 读 取 | 

值 。 下 面 示例 演示 了 如 何 获 取 用 户 提交 的 用 户 名 和 密码 ， 并 根据 隐藏 域 提交 的 值 进行 适当 提示 ,演示 | 
效果 如 图 17.25 所 示 。 | 
| 

! 
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图 17.25 示例 效果 


【操作 步 又】 
第 1 步 ， 打 开 模板 页 (orig.html)， 另 存 为 index.html。 
第 2 步 ， 把 光标 置 于 <div class="container"> 标 签 中， 然后 选择 【插入 】|【 表 单 】|【 表 单 】 命 令 ，| 
在 当前 光标 位 置 插入 一 个 表单 框 。 | 
第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 | 
为 同 目录 下 的 request.php， 请 求 的 方式 为 POST。 | 
第 4 步 , 把 光标 置 于 <form> 标 签 内 , 插入 一 个 文本 框 、 一 个 密码 域 、 一 个 隐藏 域 和 一 个 提交 按钮 ， 
定义 输入 文本 域 的 name 属性 值 分 别 为 user、pass 和 grade; 定义 提交 按钮 的 value 属性 值 为 “提交 数据 ”。 
第 5 步 ， 切 换 到 代码 视图 ， 可 以 看 到 设计 完整 的 表单 结构 代码 如 下 : 
<div class="container"> 
<fom id="form1" name="form1l" method="post" action="request php"> 
<div class="input-group input-group-lg "> 
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
<input type="text" name="user" class="form-control" placeholder=" 请 输入 用 户 名 "> 
</div><br> 
<div class="input-group input-group-le"> 
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<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> 
<input type="password" name="pass" class="form-control" placeholder=" 请 输入 密码 "> 
</div><br> 
<input name="grade" type="hidden" value="1" /> 
全] <input type="submit" value=" 提 交 数 据 " class="btn btn-success btn-block" /> 
~ /form> 
“Nite 有 
| 第 6 步 , 选择 【文件 】 1 【另存 为 】 命令 , 把 index.html 另存 为 request.php。 在 requestphp 文档 中 ， 
| 清除 表单 结构 。 然 后 在 <div class="container"> 标 签 中 输入 下 面 HTML 代码 和 内 容 ， 并 使 用 $_POST 方 
法 在 标签 中 嵌入 从 客户 端 获取 的 输入 域 的 值 。 
<div class="container"> 
<h2><?php echo $_POST["user"] ?>， 您 好 </h2> 
<p> 你 的 密码 是 <span class="btn bmn-primary"><?php echo $_ POST["pass"] ?></span>， 请 牢记 。</p> 
<p> 你 目前 是 <code><?php echo $_ POST["grade"] ?></code> 级 用 户 ， 请 继续 努力 。</p> 
</div> 


| 
| 第 7 步 , 在 浏览 器 中 预览 index.html 页 面 ， 然 后 输入 用 户 信息 , 单 击 【提交 数据 】 按 钮 提交 表单 ， 
| 则 在 打开 的 requestphp 页 面 中 立即 显示 如 图 17.25 所 示 的 效果 。 


17.3.6 “获取 单 选 按钮 的 值 


| 单 选 按钮 虽然 可 以 以 组 的 形式 出 现 ， 有 多 个 可 供 选择 的 值 ， 但 是 在 同一 个 时 间 内 只 能 够 选择 一 个 
| 值 ， 所 以 获取 单 选 按钮 值 的 方法 与 获取 文本 框 的 值 方法 相同 ， 都 是 直接 通过 name 属性 快速 读 取 值 。 
| 下 面 示例 为 用 户 提供 一 个 单 选 操 作 ， 当 用 户 提交 不 同 的 选项 后 , 后 台 服务 器 将 显示 不 同 风格 的 图 
| 片 效果 ， 如 图 17.26 所 示 。 
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提交 表单 响应 信息 
图 17.26 示例 效果 





| 【操作 步骤 】 
| 第 1 步 ， 打 开 模 板 页 (orig.html)， 另 存 为 index.html。 
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第 2 步 ， 把 光标 置 于 <div data-role="content"> 标 签 ， 然 后 选择 【插入 】|【 表 单 】|【 表 单 】 命 令 ， 
在 当前 光标 位 置 插入 一 个 表单 框 。 
第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 | 
为 同 目录 下 的 requestphp， 请 求 的 方式 为 POST。 | 国 
第 4 步 ， 把 光标 置 于 <form> 标 签 内 ， 插 入 一 个 单 选 按 钮 组 和 一 个 提交 按钮 ， 定 义 单 选 按钮 组 的 name 鸭 
属性 值 为 sex， 选 项 的 value 属性 值 分 别 为 men 和 women， 设 计 完 整 的 表单 结构 代码 如 下 : 


<div data-role="content"> 
<form id="form!1" name="forml1" method="post" action="request.php"> 
<fieldset data-role="controlgroup" data-type="horizontal"> | 
<legend> 选 择 外 套 风格 </legend> | 
<label> | 
<input name="sex" type="radio" value="men" checked /> 男 款 </label> 
<label> 
<input name="sex" type="radio" value="women" /> 女 款 </label> 
</fieldset> 
<input type="submit" value=" 提 交 数 据 " 上 > 
</form> 
</div> 


第 5 步 , 选择 【文件 】 | 【另存 为 】 命令 , 把 index.html 另存 为 request.php。 在 request.php 文档 中 ， 
清除 表单 结构 。 然 后 切换 到 代码 视图 ， 编 写 PHP 脚本 代码 : 


<2php 
Sinterest = $ POST["sex"]: 
if($interest — "men"){ 
echo '<hl> 男 款 外 套 </h1>': 
echo ‘<img src="images/3.jpg" alt=""/>"; 
} 
else{ 
echo '<hl> 女 款 外 套 </h1>'; 
echo ‘<img src="images/2.ipe" alt=""/>"; 
} 


) 六 





?> 


第 6 步 ,在 浏览 器 中 预览 ndex.html 页 面 ， 然 后 在 单 选 按钮 组 中 选择 一 个 选项 ， 单 击 【提交 数据 】 | 
按钮 提交 表单 ， 则 在 打开 的 requestphp 页 面 中 立即 显示 不 同 风格 的 外 套图 片 ， 如 图 17.26 所 示 。 


17.3.7 ”获取 文件 域 的 值 


文件 域 的 作用 是 实现 文件 上 传 ， 文 件 域 有 一 个 特有 的 属性 accept， 用 于 指定 上 传 文件 的 类 型 ， 如 | 
果 要 限制 上 传 文件 的 类 型 ， 则 可 以 通过 设置 该 属性 完成 。 

下 面 示例 为 用 户 提供 简单 的 文件 上 传 操作 ， 当 用 户 上 传 文件 后 , 后 台 服 务 器 将 以 响应 的 方式 显示 
用 户 提交 的 文件 名 ， 如 图 17.27 所 示 。 

【操作 步骤 】 

第 1 步 ， 打 开 模板 页 (orig.html)， 另 存 为 index.html。 

第 2 步 ， 把 光标 置 于 <div data-role="content"> 标 签 ， 然 后 选择 【插入 】|【 表 单 】|【 表 单 】 命 令 ， 
在 当前 光标 位 置 插 入 一 个 表单 框 。 
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提交 表单 响应 信息 
图 17.27 示例 效果 


第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 
为 同 目 录 下 的 requestphp， 请 求 的 方式 为 POST。 
第 4 步 ， 把 光标 置 于 <form> 标 签 内 ， 插 入 一 个 文件 域 和 一 个 提交 按钮 ， 定 义 文件 域 的 name 属性 
值 为 fle， 提交 按钮 的 value 属性 值 为 “提交 数据 ”设计 完整 的 表单 结构 代码 如 下 : 
<form action="request.php" data-ajax="false" method="post"” name="forml" id="forml"> 
<label> 选 择 照片 
<input name="file" type="file" /> 
</label> 
<input type="submit" data-theme="e" data-icon="check" value=" 提 交 数 据 " /> 
</form> 
第 5 步 , 选择 【文件 】 | 【另存 为 ] 命令 , 把 index.html 另存 为 request.php。 在 requestphp 文档 中 ， 
清除 表单 结构 。 然 后 切换 到 代码 视图 ， 编 写 PHP 脚本 代码 : 
<?php 
$file=$ POST["file"]: 
echo "你 上 传 的 文件 是 :"; 
echo Sfile: 





?> 


第 6 步 ， 在 浏览 器 中 预览 ndex.html 页 面 ， 然 后 单 击 【 浏 览 】 按 钮 ， 选 择 一 个 本 地 文件 ， 单 击 【 提 
交 数 据 】 按 钮 提交 表单 , 则 在 打开 的 request.php 页 面 中 立即 显示 用 户 选择 的 文件 名 , 如 图 17.27 所 示 。 

【拓展 】 本 示例 仅 演示 了 如 何 获取 文件 域 中 的 值 ， 但 是 没有 真正 获取 用 户 上 传 的 图 片 ， 如 果 要 获 
取 用 户 上 传 的 文件 ， 还 需要 设置 表单 的 编码 类 型 为 enctype="multipart/form-data"。 

如 果 要 获取 用 户 上 传 的 文件 ， 需 要 使 用 全 局 变量 $_FILES (在 PHP 4.1.0 以 前 版 本 中 用 $HTTP_ 
POST_FILES 蔡 代 )。 此 数组 包含 所 有 上 传 的 文件 信息 ，$_FILES 数组 的 内 容 如 下 所 示 ， 其 中 serfile' 
| 表示 文件 域 的 名 称 。 
$ FILES[userfile][mame']: 客户 端 机 器 文件 的 原名 称 。 
$_ FILES[mserfile][type]: 文件 的 MIME 类 型 ， 如 “image/gif”。 
$_FILES[mserfile]['size]: 已 上 传 文件 的 大 小 ， 单 位 为 字 节 。 
$ FILES[mserfile'][tmp_name']: 文件 被 上 传 后 在 服务 端 存储 的 临时 文件 名 。 
$ FILES[mserfile]['error]: 和 该 文件 上 传 相关 的 错误 代码 。 
| 文件 被 上 传 后 ， 默 认 会 被 存储 到 服务 端的 默认 临时 目录 中 ， 可 以 在 php.ini 中 的 upload_tmp_dir 
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设置 存储 路 径 。 
17.4 获取 查询 字符 串 


如 果 在 表单 中 设置 method 属性 的 值 为 GET 方法 ， 则 表单 数据 将 通过 URL 附加 的 查询 字符 串 把 
数据 传递 给 服务 器 ， 此 时 使 用 $_GET 来 获取 用 户 提交 的 数据 。 本 节 将 详细 介绍 查询 字符 串 的 使 用 ， 
以 及 使 用 $_GET 获取 表单 数据 的 一 般 方法 。 


17.4.1 认识 查询 字符 串 


查询 字符 串 由 一 个 或 多 个 “名 / 值 ”对 的 字符 串 组 成 ， 多 个 “名 / 值 ”对 之 间 通 过 特殊 字符 〈&) 
连接 在 一 起 ， 构 成 一 长 串 的 字符 串 ， 常 被 用 来 传递 一 些 简单 的 参数 。 其 语法 格式 如 下 : 
namel=valuel &name2=value2&...&namen=valuen 


其 中 namel=valuel 就 表示 一 个 “名 / 值 ”对 。 在 所 有 参数 中 ，name 表示 查询 字符 串 的 参数 名 称 ， 
而 value 表示 查询 字符 串 的 参数 值 。 指 定 其 中 参数 的 名 称 就 可 以 获取 该 参数 的 值 。 

查询 字符 串 附加 在 URL 后 面 ， 存 储 在 HTTP 请 求 的 头 部 区 域 ， 因 此 所 传输 的 数据 结构 就 比较 简 
单 ， 不 能 够 存储 大 容量 的 信息 ， 一 般 能 够 发 送 最 大 数量 约 为 2000 个 字符 ， 作 为 查询 字符 串 的 一 部 分 
发 送 的、 超过 这 个 数目 的 其 他 数据 将 不 会 被 处 理 。 

查询 字符 串 与 URL 通过 问号 〈?) 连接 在 一 起 。 这 样 PHP 脚本 就 能 够 准确 获取 查询 字符 串 的 内 
容 ， 而 URL 也 能 够 正确 定位 到 指定 目标 。 例 如 : 

<a href="detail.php?id=1&class=3&subclass=24&key=li"> 显 示 查 询 信息 </a> 


上 面 的 超 链 接 中 就 提供 了 4 个 参数 ，detail.php 页 面 通过 这 4 个 参数 可 以 在 数据 库 中 查询 到 指定 
信息 的 记录 。 

查询 字符 串 中 的 参数 可 以 同名 , 但 HTTP 请 求 仍然 能 够 把 所 有 参数 传递 出 去 ， 不 管 这 些 参数 名 是 
否 重复 。 例 如 : 

<a href="detail. php?id=1 &class=3&subclass=24&key=li& id=3&class=2&subclass=21&key=wang "> 显示 查询 信 
息 </a> 


17.4.2 ”获取 查询 字符 串 的 值 


使 用 $_GET 预定 义 变量 可 以 获取 查询 字符 串 的 值 ， 其 用 法 与 $_ POST 相同 。 下 面 示例 演示 了 如 何 
使 用 $_GET 变量 获取 用 户 提交 的 用 户 名 和 密码 ， 演 示 效 果 如 图 17.28 所 示 。 

【操作 步骤 】 

第 1 步 ， 打 开 模板 页 (orig.html)， 另 存 为 index.html。 

第 2 步 ， 把 光标 置 于 <div class="container"> 标 签 中 ， 然 后 选择 【插入 】| 【表单 】| 【表单 】 命 令 ， 
在 当前 光标 位 置 插入 一 个 表单 框 。 





第 3 步 ， 选 中 表单 框 <form> 标 签 ， 在 【属性 】 面 板 中 设置 action 和 metho 属性 值 ， 定 义 请 求 文件 | 


为 同 目录 下 的 requestphp， 请 求 的 方式 为 GET。 
第 4 步 ， 把 光标 置 于 <form> 标 签 内 ,插入 一 个 文本 框 、 一 个 密码 和 一 个 提交 按钮 ， 定 义 输入 文本 
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域 的 name 属性 值 分 别 为 user 和 pass; 定义 提交 按钮 的 value 属性 值 为 “提交 数据 ”。 


在 URL 的 尾部 可 以 看 到 附加 


的 查询 字符 串 信 息 : ?user= 
9%6E99687969196E49%0B89%08996E 
8%83%96&pass=12345678 





提交 表单 响应 信息 
图 17.28 示例 效果 


第 5 步 ， 切 换 到 代码 视图 ， 可 以 看 到 设计 完整 的 表单 结构 代码 如 下 : 


<form id="form1" name="form1" method="get" action="request.php"> 
<div class="input-group input-group-lg"> 
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
<input type="text" name="user" class="form-control" placeholder=" 请 输入 用 户 名 "> 
</div><br> 
<div class="input-group input-group-lg"> 
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> 
<input type="password" name="pass" class="form-control" placeholder=" 请 输入 密码 "> 
</div><br> 
<input type="submit" value=" 提 交 数 据 " class="btn btn-success btn-block" /> 
</form> 


第 6 步 , 选择 【文件 】|【 另 存 为 】 命令 , 把 index.html 另存 为 request.php。 在 request.php 文档 中 ， 
| 清除 表单 结构 。 然 后 在 <div class="container"> 标 签 中 输入 下 面 HTML 代码 和 内 容 ， 并 使 用 $_GET 方 
| 法 在 标签 中 嵌入 从 客户 端 获取 的 输入 域 的 值 。 
<div class="container"> 
<h2><?php echo $_GET["user"] ?>， 您 好 </h2> 
<p> 你 的 密码 是 <span class="btn btn-primary"><?php echo $_GET["pass"] ?></span>， 请 牢记 。</p> 
</div> 
第 7 步 ， 在 浏览 器 中 预览 index.html 页 面 ， 然 后 输入 用 户 信息 ， 单 击 【提交 数据 】 按 钮 提交 表单 ， 
则 在 打开 的 requestphp 页 面 中 立即 显示 如 图 17.28 所 示 的 效果 。 
【拓展 】 也 可 以 在 超 链接 尾部 附加 一 个 字符 串 信 息 。 例 如 : 
<a hre 全 "request.php?id=1"> 显 示 查 询 信息 </a> 
然后 在 request.php 文件 中 输入 下 面 代码 就 可 以 获取 这 个 值 。 
<?PHP 
$id = $_GET["id"]: 
echo "当前 编号 是 :": 
echo Sid: 
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| 
最 后 , 在 浏览 器 中 预览 页 面 , 然后 单 击 超 链接 , 则 在 打开 的 requestphp 文件 中 立即 显示 用 户 上 传 | 
的 id 编 号 值 。 | 


17.4.3 ”查询 字符 串 编码 


通过 17.4.2 节 示 例 可 以 发 现 ，URL 参数 在 传输 过 程 中 被 处 理 过 ， 即 参数 被 编码 。 在 接收 页 面 的 | 
地 址 栏 中 显示 如 下 的 URL 查询 字符 串 : 


http://localhost:8080/request.php?user=%E9%87%91%E4%B8%89%ES%83%968pass=12345678 


在 上 面 的 查询 字符 串 中 , 所 有 双 字 节 的 汉字 全 部 被 编码 显示 。 但 对 于 ASCII 字符 则 不 进行 编码 处 
理 。 查 询 字符 串 未 被 解析 之 前 ， 以 编码 形式 呈现 在 浏览 器 中 的 地 址 文本 框 中 ， 这 在 一 定 程度 上 可 以 防 
止 双 字 节 字 符 信息 被 直接 看 到 ， 当 然 这 不 是 加 密 ， 自 然 无 法 保护 查询 字符 串 的 信息 安全 。 

实际 上 ,在 查询 字符 串 中 有 几 个 特殊 的 字符 ， 了 解 这 些 字符 所 代表 的 意思 ， 可 以 准确 获取 查询 字 | 
符 串 中 的 参数 信息 ， 如 表 17.3 所 示 。 


表 17.3 ”查询 字符 串 中 特殊 字符 列表 
说 明 

该 字符 在 查询 字符 串 中 表示 “与 ”的 意思 ， 用 来 描述 附加 在 QueryString 数据 集合 内 的 独立 “名 / 
值 ”对 ， 通 俗 说 就 是 多 个 参数 的 连 字 符 
该 字符 在 查询 字符 串 中 表示 起 始 的 意思 ， 它 附加 在 客户 URL 中 被 请 求 的 文件 扩展 名 之 后 
该 字符 用 来 对 其 他 特殊 字符 进行 编码 ， 一 般 用 于 对 双 字 节 字符 进行 编码 。 例 如 ，%CD%F5 就 
表示 汉字 “ 王 ” 的 编码 ， 其 中 CD 和 F5 表示 十 六 进 制 的 数字 ， 用 来 表示 “ 王 ”字符 在 字符 编 
码 表 中 的 坐标 位 置 
该 字符 在 查询 字符 串 中 表示 一 个 空格 


在 PHP 中 对 字符 串 进行 编码 可 以 通过 urlencode0 函 数 实现 。 

例如 ， 在 下 面 示例 中 有 两 条 超 链接 ， 使 用 urlencode() 函 数 对 在 URL 中 的 查询 字符 串 进行 编码 ， 
一 个 是 经 过 编码 , 一 个 没有 经 过 编码 , 则 在 传输 过 程 中 可 以 看 到 地 址 栏 中 不 同 的 显示 效果 , 如 图 17.29 
和 图 17.30 所 示 。 

<a href="request.php?name= 这 是 秘密 信息 ， 需 编码 " data-role="button"> 未 编码 信息 </a> 


<a hre 全 "requestphp?name=<?PHP echo URLencode(" 这 是 秘密 信息 ， 需 编码 传输 "): ?>" data-role="button"> 编 
码 信息 </a> 


现 
) 六 








查 痢 字符 串 ，00000W0D0000 


未 经 编码 后 传递 的 中 文字 
符 被 接收 后 显示 为 乱码 








17.29 未 经 编码 的 查询 字符 串 
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查询 宇 谷 中， 这 是 秘 军 信 和 息 ， 寡 纺 码 传输 


yote a 经 编码 后 传递 的 中 文字 符 
被 接收 后 正常 显示 





hepy/localhost ee/reauest php mame = CE NFO CE mAF- 


图 17.30 ”经 编码 的 查询 字符 串 





17.4.4 查询 字符 串 解码 


对 于 URL 传递 的 参数 直接 使 用 $_GET 方法 获取 ， 而 对 于 进行 URL 加 密 的 查询 字符 串 ， 则 需要 
使 用 urlencode0) 函 数 对 获取 的 字符 串 进行 解码 。 例 如 : 

<a href="request.php?name=<?PHP echo urlencode(" 这 是 秘密 信息 ， 需 编码 传输 "); ?>" data-role="button"> 显 示 
查询 信息 </a> 

然后 ， 在 request.php 文件 中 输入 下 面 脚本 。 

<?PHP 

$name = urldecode($ GET["name"]); 

echo "查询 字符 串 :"; 

echo $name:; 

?> 


运行 结果 如 图 17.31 所 示 。 


> rn Er rr Er 


可 询 宁 符 囊 解码 查询 字符 囊 编码 


音 询 字符 路， 这 是 秘密 信息 ， 需 编码 传输 





hpy/localhosr8080/requestphpzname= 尖 ES%6BFX9S39E6%98YWAP3NET3%- 


图 17.31 经 解码 的 查询 字符 串 
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第 /| 章 


响应 和 处 理 信息 
( 名 视频 讲解 ，80 分 钟 ) 


在 网 站 中 会 存在 大 量 的 数据 需要 传递 ， 有 些 数 据 需要 在 整个 网 站 内 共享 ， 还 有 些 数据 仅 供 
用 户 个 人 使 用 , 其 他 用 户 不 可 分 享 ,还 有 很 多 数据 需要 在 用 户 系统 中 长 期 存储 等 ,如果 仅 靠 PHP 
脚本 中 自 定义 变量 ， 是 无 法 完成 这 些 任务 的 。 而 HTTP 协议 是 无 状态 的 ， 服务器 是 不 会 记录 用 
户 足 迹 的 ， 要 想 跟 踪 用 户 访问 足迹 和 用 户 系统 、 配 置 ， 都 需要 PHP 提供 一 些 预定 义 变量 ， 帮 助 
用 户 完成 这 些 数据 存储 和 传输 任务 

另外 ， 用 户 经 常 需要 处 理 表单 ， 如 表单 验证 、 输 入 字符 串 修 剪 、 把 表单 数据 输入 到 数组 中 
进行 存储 等 操作 。 只 有 熟练 字符 串 、 数 组 和 正则 表达 式 的 基本 用 法 ， 才 能 够 在 Web 开发 中 熟练 
驾驭 客户 端 信息 处 理 。 本 章 主要 介绍 PHP 中 Cookie、 会 话 变量 的 使 用 ， 以 及 信息 处 理 的 各 种 方 
法 和 技巧 。 


【 学 习 重 点 】 

呈 会 话 管理 

处 理 Cookioe 信息 

处 理 字 符 串 信息 

处 理 数 组 信息 

使 用 正则 表达 式 处 理 复 杂 信息 


至 吾 至 至 





砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


18.1 会 话 管 理 


HTTP 协议 是 一 种 无 状态 的 协议 ， 对 于 服务 器 来 说 ， 每 个 用 户 的 访问 就 是 一 个 新 的 请 求 ， 请 求 之 
后 , 就 不 再 保持 联系 。 如果 用 户 在 Web 站 点 内 访问 , 服务 器 根本 无 法 获知 用 户 的 已 经 驻 留 信息 。 Session 
技术 的 引入 正 是 弥补 这 个 缺陷 ， 当 用 户 在 Web 站 点 的 多 个 页 面 切换 时 ， 使 用 Session 变量 可 以 记录 该 


| 用 户 的 一 些 有 用 信息 ，Web 应 用 程序 就 是 利用 这 些 信息 来 跟踪 用 户 在 站 内 的 活动 。 


18.1.1 认识 会 话 变量 


PHP 会 话 变量 在 Dreamweaver 中 被 称 为 阶段 变量 。Session 中 文 翻译 为 会 话 、 会 议 的 意思 ， 其 本 
义 是 指 有 始 有 终 的 一 系列 动作 或 消息 。 在 PHP 中 Session 代表 服务 器 与 客户 端 之 间 的 一 个 会 话 ， 它 从 
用 户 点 击 进入 站 点 开始 , 直到 该 用 户 离 开 网 站 , 当然 也 可 以 使 用 PHP 提前 结束 这 个 会 话 , 终止 Session 
对 象 的 运行 。 

Session 会 话 具 有 针对 性 ， 不 同 的 用 户 拥有 不 同 的 会 话 内 容 。 一 旦 用 户 进入 网 站 ，PHP 都 会 自动 
为 该 用 户 建立 一 个 Session 对 象 ，Session 对 象 之 间 通 过 SessionID 属性 进行 标识 和 区 别 ，SessionID 属 
性 值 是 一 个 永远 都 不 会 重复 的 随机 值 。 用 户 在 网 站 内 的 不 同 页 面 切换 时 ， 只 能 访问 自己 的 Session 变 
量 ， 而 不 能 访问 其 他 用 户 的 Session 变量 。 

一 般 利 用 Session 可 以 存储 用 户 的 访问 信息 ， 如 用 户 姓名 、 访 问 时 间 、 访 问 页 面 、 用 户 的 客户 端 
信息 等 ， 以 及 在 每 个 页 面 的 停留 时 间 等 ， 通 过 这 些 基本 信息 能 够 挖掘 出 很 多 有 价值 的 参考 信息 ， 如 浏 
览 者 操作 习惯 、 个 人 兴趣 爱好 等 。Session 还 可 以 存储 用 户 的 会 话 信 息 ， 例 如 ， 当 在 网 上 商城 购物 时 ， 
利用 Session 可 以 作为 购物 车 ， 用 来 存储 用 户 已 选 购 的 每 件 商品 。 

由 于 Session 能 够 详细 记录 用 户 的 隐私 ， 对 于 网 站 来 说 虽然 很 方便 ， 但 是 用 户 的 隐私 也 在 不 知 不 
觉 中 被 网 站 获取 ， 对 于 个 人 信息 安全 构成 了 一 定 的 威胁 ， 因 此 对 于 Session 技术 的 引入 也 备 受 争 议 。 


18.1.2 ”启动 会 话 


在 PHP 配置 文件 (php.ini) 中 ， 有 一 组 与 Session 相关 的 配置 选项 。 通 过 对 一 些 选 项 重新 设置 新 
值 ， 就 可 以 对 Session 进行 配置 ， 否 则 使 用 默认 的 Session 配置 。 

Session 的 设置 不 同 于 Cookie， 必 须 先 启动 ， 在 PHP 中 必须 调用 session_start0 函 数 ， 以 便 让 PHP 
核心 程序 ， 将 与 Session 相关 的 内 建 环境 变量 预先 载 入 至 内 存 中 。session_start0 函 数 的 语法 格式 如 下 : 

Bool session start (void ) // 创 建 Session， 开 始 一 个 会 话 ， 进 行 Session 初始 化 


函数 Session start0) 有 两 个 作用 : 一 是 开始 一 个 会 话 ， 二 是 返回 已 经 存在 的 会 话 。 这 个 函数 没有 
参数 ， 且 返回 值 均 为 tue。 

如 果 使 用 基于 Cookie 的 Session， 在 使 用 该 函数 开启 Session 之 前 ， 不 能 有 任何 输出 的 内 容 。 因 
为 基于 Cookie 的 Session 是 在 开启 的 时 候 ， 调 用 session_startO 函 数 会 生成 一 个 唯一 的 Session ID， 需 
要 保存 在 客户 端 电脑 的 Cookie 中 ， 和 setCookie0 函 数 一 样 ， 调 用 之 前 不 能 有 任何 的 输出 ， 空 格 或 空 
行 也 不 行 。 如 果 已 经 开启 过 Session, 再 次 调用 session_start0 函 数 时 , 不 会 再 创建 一 个 新 的 Session ID 。 
因为 当 用 户 再 次 访问 服务 器 时 ， 该 函数 会 通过 从 客户 端 携带 过 来 的 Session ID ， 返 回 已 经 存在 的 
Session。 所 以 在 会 话 期 间 ， 同 一 个 用 户 在 访问 服务 器 上 任何 一 个 页 面 时 ,都 是 使 用 同一 个 Session ID。 
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如 果 不 想 在 每 个 脚本 都 使 用 session_start0 函 数 来 开启 Session， 可 以 在 php.ini 中 设置 “session. 
auto_start=1”, 则 无 须 每 次 使 用 Session 之 前 都 要 调用 session_start0 函 数 。 但 启用 该 选项 也 有 一 些 限制 ， 


则 不 能 将 对 象 放 入 Session 中 ， 因 为 类 定义 必须 在 启动 Session 之 前 加 载 。 所 以 不 建议 使 用 php.ini 中 | 


的 session.auto_start 属性 来 开启 Session。 
18.1.3 ”注册 和 读 取 会 话 


在 PHP 中 使 用 Session 变量 ， 除 了 必须 要 启动 之 外 ， 还 要 经 过 注册 的 过 程 。 注 册 和 读 取 Session 
变量 ， 都 要 通过 访问 $_SESSION 数组 完成 。 

自 PHP 6.1.0 起 ，$_SESSION 如 同 $ POST、$_GET 或 $_COOKIE 等 一 样 成 为 超级 全 局 数组 ， 但 
必须 在 调用 session start0 函 数 开 启 Session 之 后 才能 使 用 。 与 SHTTP_SESSION_VARS 不 同 ， 
$_SESSION 总 是 具有 全 局 范围 ， 因 此 不 要 对 $_SESSION 使 用 global 关键 字 。 在 $_SESSION 关联 数组 
中 的 键 名 具有 和 PHP 中 普通 变量 名 相同 的 命名 规则 。 

【 示例】 注册 Session 变量 代码 如 下 : 


<2php 

session start(: /启动 Session 的 初始 化 
$_SESSION["username"]="skygao": /注册 Session 变量 ， 赋 值 为 一 个 用 户 的 名 称 
$_SESSION["password"]="123456"; /注册 Session 变量 ， 赋 值 为 一 个 用 户 的 密码 
?> 


执行 该 脚本 后 ， 两 个 Session 变量 就 会 被 保存 在 服务 器 端的 某 个 文件 中 。 该 文件 的 位 置 是 通过 php.ini 





文件 ， 在 session.save_path 属性 指定 的 目录 下 ， 为 这 个 访问 用 户 单独 创建 的 一 个 文件 ， 用 来 保存 注册 的 | 


Session 变量 。 例 如 ， 某 个 保存 Session 变量 的 文件 名 为 “sess_040958e2514bf112d61a03ab8adc8c74” 文 
件 名 中 含 Session ID， 所 以 每 个 访问 用 户 在 服务 器 中 都 有 自己 保存 Session 变量 的 文件 。 而 且 这 个 文 
件 可 以 直接 使 用 文本 编辑 器 打开 ， 该 文件 的 内 容 结构 如 下 : 

变量 名 | 类 型 :长 度 : 值 ; // 每 个 变量 都 使 用 相同 的 结构 保存 


本 例 在 Session 中 注册 了 两 个 变量 , 如 果 在 服务 器 中 找到 为 该 用 户 保存 Session 变量 的 文件 , 打开 
后 可 以 看 到 如 下 内 容 : 


Usernamels:6:"skygao":passwordls:6:"123456": 。“// 保 存 某 用 户 Session 中 注册 的 两 个 变量 内 容 
18.1.4 ”注销 和 销毁 会 话 

当 完成 一 个 会 话 后 ， 可 以 删除 Session 变量 ， 也 可 以 将 其 销毁 。 如 果 用 户 想 退 出 网 站 ， 就 需要 提 
供 一 个 注销 的 功能 ， 把 所 有 信息 在 服务 器 中 销毁 。 


可 以 调用 session_destroy0 函 数 结束 当前 的 会 话 ， 并 清空 会 话 中 的 所 有 资源 。 该 函数 的 语法 格式 | 


如 下 : 

bool session destroy (void ) /销毁 和 当前 Session 有 关 的 所 有 资料 

相对 于 session_start0 函 数 ， 该 函数 用 来 关闭 Session 的 运作 ， 如 果 成 功 则 传 回 tue， 销 毁 Session 
资料 失败 则 返回 false。 

该 函数 并 不 会 释放 和 当前 Session 相关 的 变量 , 也 不 会 删除 保存 在 客户 端 Cookie 中 的 Session ID 。 
因为 $ SESSION 数组 和 自 定 义 的 数组 在 使 用 上 是 相同 的 ， 不 过 可 以 使 用 unsetO 函 数 来 释放 在 Session 
中 注册 的 单个 变量 。 如 下 所 示 : 


. 643 . 


eg 网 向 计 与 网 站 填 设 从 和 门 天皇 首 


| unset($_SESSION["usermame"]): // 删 除 在 Session 中 注册 的 用 户 名 变量 
| unset($_SESSION["passwrod"]): // 删 除 在 Session 中 注册 的 用 户 密码 变量 
| my 
| 窒 提示 : 不 要 使 用 unset($_SESSION) 删 除 整个 8$_ SESSION 数组 ， 这 样 将 不 能 再 通过 $ SESSION 超 
全 局 数组 注册 变量 了 。 但 如 果 想 把 某 个 用 户 在 Session 中 注册 的 所 有 变量 都 删除 ， 可 以 直 
| 接 将 数组 变量 $9 SESSION 赋 上 一 个 空 数 组 。 如 下 所 示 : 
Note | $_SESSION=array():; // 将 某 个 用 户 在 Session 中 注册 的 变量 全 部 清除 


PHP 默认 的 Session 是 基于 Cookie 的 ，Session ID 被 服务 器 存储 在 客户 端的 Cookie 中 ， 
所 以 在 注销 Session 时 也 需要 清除 Cookie 中 保存 的 Session ID, 而 这 就 必须 借助 setCookie0 
函数 完成 。 
【示例 】 清 除 客户 端 Cookie 中 保存 的 会 话 信息 。 
在 Cookie 中 , 保存 Session ID 的 Cookie 标识 名 称 就 是 Session 的 名 称 ， 这 个 名 称 是 在 php.ini 中 ， 
通过 session.name 属性 指定 的 值 。 在 PHP 脚本 中 ， 可 以 通过 调用 session_name() 函 数 获取 Session 名 
称 。 删 除 保存 在 客户 端 Cookie 中 的 Session ID， 代 码 如 下 : 


<2php 
if (isset($ COOKIE[session_ nameO]) { // 判 断 Cookie 中 是 否 保存 Session ID 
Setcookie(session name0.",time0-3600./): /删除 包含 Session ID 的 Cookie 
四 
?> 
通过 前 面 的 介绍 可 以 总 结 出 来 , Session 的 注销 过 程 共 需 要 4 个 步骤 。 在 下 面 的 脚本 文件 destroyphp 
中 ， 提 供 完整 的 4 个 步骤 代码 ， 运 行 该 脚本 就 可 以 关闭 Session 并 销毁 与 本 次 会 话 有 关 的 所 有 资源 。 
代码 如 下 : 


<2php 
// 第 一 步 : 开启 Session 并 初始 化 
session start(); 
// 第 二 步 : 删除 所 有 Session 的 变量 ， 也 可 用 unset($_SESSION[xxx]) 逐 个 删除 
$_SESSION = array(): 
// 第 三 步 ， 如 果 使 用 基于 Cookie 的 Session， 使 用 setCooike0 删 除 包含 Session ID 的 Cookie 
if (isset($_COORIE[session nameO])) { 
setcookie(session_name(). ". time0-42000. "/): 


} 

// 第 四 步 : 最 后 彻底 销毁 Session 
session destroyO: 

3 


18.1.5 ”传递 会 话 


| 使 用 Session 跟踪 一 个 用 户 ,是 通过 在 各 个 页 面 之 间 传 递 唯一 的 Session ID， 并 通过 Session ID 提 
| 取 这 个 用 户 在 服务 器 中 保存 的 Session 变量 。 常 见 的 Session ID 传送 方法 有 以 下 两 种 。 

| 加 ”基于 Cookie 的 方式 传递 Session ID， 这 种 方法 更 优化 ， 但 由 于 不 总 是 可 用 ， 因 为 用 户 在 客 
! 户 端 可 以 屏蔽 Cookie。 

| 通过 URL 参数 进行 传递 ， 直 接 将 会 话 ID 嵌入 到 URL 中 去 。 

| 在 Session 的 实现 中 通常 都 是 采用 基于 Cookie 的 方式 ,客户 端 保存 的 Session ID 就 是 一 个 Cookie。 
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当 客 户 禁用 Cookie 时 , Session ID 就 不 能 再 在 Cookie 中 保存 , 也 就 不 能 在 页 面 之 间 传 递 , 此 时 Session 
失效 .不 过 PHP 5 在 Linux 平 台 可 以 自动 检查 Cookie 状态 ,如 果 客户 端 将 它 禁 用 , 则 系统 自动 把 Session 
ID 附加 到 URL 上 传送 。 而 使 用 Windows 系统 作为 Web 服务 器 则 无 此 功能 。 


1. 通过 Cookie 传递 Session ID 


如 果 客 户 端 没有 禁用 Cookie， 则 在 PHP 脚本 中 通过 session_start0 函 数 进行 初始 化 后 ， 服 务 器 会 | 
自动 发 送 HTTP 标 头 将 Session ID 保存 到 客户 端 电脑 的 Cookie 中 。 类 似 于 下 面 的 设置 方式 : 


setCookie(session_ name(). session id0. 0, "") /虚拟 向 Cookie 中 设置 Session ID 的 过 程 


在 第 一 个 参数 中 调用 session_name0 函 数 ， 返 回 当前 Session 的 名 称 作为 Cookie 的 标识 名 称 。 
Session 名 称 的 默认 值 为 PHPSESSID， 是 在 php.ini 文件 中 由 session.name 选项 指定 的 值 。 也 可 以 在 调 
用 session_name() 函 数 时 提供 参数 改变 当前 Session 的 名 称 。 

在 第 二 个 参数 中 调用 session_id0 函 数 ， 返 回 当前 Session ID 作为 Cookie 的 值 。 也 可 以 通过 调用 
session id0 函 数 时 提供 参数 设 定 当前 Session ID。 

第 三 个 参数 的 值 0, 是 通过 在 php.ini 文件 中 由 session.cookie lifetime 选项 设置 的 值 。 默认 值 为 0， 
表示 Session ID 将 在 客户 机 的 Cookie 中 延续 到 浏览 器 关闭 。 

最 后 一 个 参数 “/， 也 是 通过 PHP 配置 文件 指定 的 值 ， 在 php.ini 中 由 session.cookie_path 选项 设 
置 的 值 。 默 认 值 为 “/”， 表 示 在 Cookie 中 要 设置 的 路 径 在 整个 域内 都 有 效 。 

如 果 服 务 器 成 功 将 Session ID 保存 在 客户 端的 Cookie 中 ， 当 用 户 再 次 请 求 服务 器 时 ， 就 会 把 
Session ID 发 送 回 来 .所 以 当 在 脚本 中 再 次 使 用 session_start0 函 数 时 ,就 会 根据 Cookie 中 的 Session ID 
返回 已 经 存在 的 Session 。 


2. 通过 URL 传递 Session ID 


如 果 客 户 浏览 器 支持 Cookie， 就 把 Session ID 作为 Cookie 保存 在 浏览 器 中 。 但 如 果 客 户 端 禁 止 
Cookie 的 使 用 , 浏览 器 中 就 不 存在 作为 Cookie 的 Session ID,， 因此 在 客户 请 求 中 不 包含 Cookie 信息 。 
如 果 调 用 session_start0 函 数 时 , 无 法 从 客户 端 浏览 器 中 取得 作为 Cookie 的 Session ID, 则 又 创建 了 一 | 
个 新 的 Session ID, 也 就 无 法 跟踪 客户 状态 。 因 此 ,每 次 客户 请 求 支 持 Session 的 PHP 脚本 , session_startQ | 
函数 在 开启 Session 时 都 会 创建 一 个 新 的 Session， 这 样 就 失去 了 跟踪 用 户 状态 的 功能 。 | 

在 PHP 中 提出 了 跟踪 Session 的 另 一 种 机 制 , 如 果 客 户 浏览 器 不 支持 Cookie, PHP 则 可 以 重 写 客 | 
户 请 求 的 URL， 把 Session ID 添加 到 URL 信息 中 。 可 以 手动 地 在 每 个 超 链接 的 URL 中 都 添加 一 个 
Session ID。 如 下 所 示 : 

<2php 

Session_startO: 

echo '<a hre 人 "demo php?'session_name0.=',session id0." > 链接 演示 </a>': 

?> 

【示例 】 本 例 中 使 用 两 个 脚本 程序 ， 演 示 了 Session ID 的 传送 方法 。 在 第 一 个 脚本 testl php 中 ， 
输出 链接 时 将 SID 常量 附加 到 URL 上， 并 将 一 个 用 户 名 通过 Session 传递 给 目标 页 面 输出 。 如 下 所 示 : 





<a hre 全 "test2.php?<?php echo SID ?>"> 通 过 URL 传递 Session ID</a> ”<!-- 在 URL 中 附加 SID--> 


<2php | 
session _start(: /开启 Session | 
$_SESSION["rusermname"]="admin": /注册 一 个 Session 变量 ， 保 存 用 户 名 | 
echo "Session ID: ".session_ idO."<br>"; // 在 当前 页 面 输出 Session ID | 
> | 
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在 脚本 test2.php 中 ， 输 出 testl.php 脚本 在 Session 变量 中 保存 的 一 个 用 户 名 。 又 在 该 页 面 中 输出 
一 次 Session ID, 通过 对 比 可 以 判断 两 个 脚本 是 否 使 用 同一 个 Session ID。 另外 , 在 开启 或 关闭 Cookie 
时 ， 注 意 浏览 器 地 址 栏 中 URL 的 变化 。 代 码 如 下 : 


<2php 

session start(); /开启 Session 

echo $_ SESSION["usemame"]."<br>"; // 输 出 Session 变量 的 值 
echo "Session ID: ".session id0."<br>": /| 输出 Session ID 

?> 





如 果 把 客户 端的 Cookie 禁用 ， 单 击 testl php 页 面 中 的 超 链接 会 出 现下 面 的 结果 ， 在 地 址 栏 中 会 
把 Session ID 以 session_ name=session id 的 格式 添加 到 URL 上 。 

如 果 客 户 端的 Cookie 可 以 使 用 ， 则 会 把 Session ID 保存 到 客户 端的 Cookie 中 ， 而 SID 就 成 为 一 
个 空 字符 串 ， 不 会 在 地 址 栏 中 的 URL 后 面 显示 。 启 用 客户 端的 Cookie， 重 复 前 面 的 操作 。 


18.1.6 ”设置 会 话 有 效 期 


在 大 多 数 网 站 和 应 用 程序 中 需要 限制 会 话 的 时 间 ， 如 12 个 小 时 、 一 个 星期 、 一 个 月 等 ， 这 时 就 
需要 设置 Session 会 话 的 有 效 期 限 ， 过 了 有 效 期 限 ， 用 户 会 话 就 被 关闭 。 

1. 客户 端 没 有 禁止 Cookie 

使 用 session_set_cookie_params() 设 置 Session 的 失效 时 间 ， 此 函数 是 Session 结合 Cookie 设置 失 
效 时 间 ， 如 果 设 置 Session 在 1 分 钟 后 失效 ， 则 实现 的 代码 如 下 : 

<2php 

Stime = 60; 

session set_cookie params($time); 

session start(): 

$_SESSION["unsename"] = "Mr'; 

> 

session_set_cookie_params() 必 须 在 session_start() 之 前 调用 。 不 过 不 推荐 使 用 该 函数 ， 此 函数 在 浏 
览 器 上 会 出 现 问 题 ， 所 以 一 般 手 动 设置 失效 时 间 。 

【示例 1】 手动 设置 失效 时 间 的 代码 如 下 : 

<?php 

session start():; 

Stime = 60; 

setcookie(session_name(),session_id(),timeO+$time,"/"); // 手 动 设置 会 话 失效 时 间 

$_SESSION["unsename"] = "Mr': 

2 


session_name 表示 Session 的 名 称 ，session_id 表示 客户 端 用 户 的 标识 ， 因 为 session_id 是 随机 产 
生 的 唯一 名 称 ， 所 以 Session 是 相对 安全 的 ， 失 效 时 间 和 Cookie 的 失效 时 间 一 样 ， 最 后 一 个 参数 为 可 
选 参数 ， 是 放置 Cookie 的 路 径 。 

2. 客户 端 禁 止 Cookie 

当 客 户 端 禁用 Cookie 时 ，Session 页 面 间 传递 会 失效 ， 解 决 这 个 问题 有 4 种 方法 。 

回 “在 登录 之 前 提醒 用 户 必须 开启 Cookie， 这 是 很 多 论坛 的 做 法 。 
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设置 php.ini 文件 中 的 session.use_trans_ sid=1, 或 者 编译 时 打开 -enable-trans-sid 选项 ,让 PHP 
自动 跨 页 传递 session_id。 | 
通过 GET 方法 ， 使 用 隐藏 域 传递 session id。 
使 用 文件 或 者 数据 库存 储 session id， 在 页 面 传递 中 手动 调用 。 | 
第 二 种 情况 比较 被 动 ， 因 为 普通 开发 者 是 无 法 修改 服务 器 中 的 php.ini 配置 文件 ， 第 三 种 情况 就 | 
不 可 以 使 用 Cookie 设置 保存 时 间 ， 但 是 登录 情况 没有 变化 ， 第 四 种 情况 比较 重要 ， 特 别 是 在 企业 级 
开发 中 经 常 使 用 到 。 
【示例 2】 下 面 代码 演示 了 以 第 三 种 方法 使 用 GET 方式 进行 传递 : 
<form method="post" action="sessionl.php?<?=session+name():?>=<?=session id0:?>"> 
用 户 名 : <input type="text" name="user" size="20"><br /> 
密 ” 码 ;<input type="password" name="password" size="20"><br /> 





<input type="submit" value=" 提 交 " /> 

</form> | 
| 
然后 ， 在 session1.php 文件 中 设置 要 接收 session_id 值 ， 并 进行 处 理 ， 示 例 代码 如 下 : | 
<?php | 
$sess_name = session_name(); // 获 取 Session 名 称 | 
S$sess id= $ GET[$sess name]: /以 GET 方式 获取 session id | 
session id(Ssess_ id): /把 session id 值 存储 到 Session 对 象 中 | 
session start(); | 
$ SESSION["admin"] = "Mr"; | 

?> 


18.1.7 ”会话 安全 


PHP 不 能 保证 会 话 信息 只 能 被 会 话 者 看 到 。 根据 其 存放 的 数据 , 还 需要 采取 更 多 措施 来 主动 保护 
会 话 的 完整 性 。 当 然 这 些 做 法 会 降低 用 户 的 方便 程度 。 

下 面 行为 都 会 将 会 话 ID 泄露 给 第 三 方 ， 使 第 三 方 能 够 访问 所 有 与 指定 ID 相关 联 的 资源 。 

加 ”URL 携带 会 话 ID。 如 果 连 接 到 外 部 站 点 ， 包 含有 会 话 IJD 的 URL 可 能 会 被 存在 外 部 站 点 的 

引用 日 志 中 。 

如 果 会 话 了 D 未 加 密 ， 以 明文 方式 在 网 络 中 传输 ， 就 很 容易 被 第 三 方 监听 到 。 | 

在 默认 情况 下 ， 所 有 与 特定 会 话 相关 的 数据 都 被 存储 在 由 配置 选项 session.save_path 指定 的 目录 | 
下 的 一 个 文件 中 。 对 每 个 会 话 会 建立 一 个 文件 。 这 是 由 于 每 打开 一 个 会 话 即 建立 一 个 文件 ， 不论 是 否 
有 数据 写 入 到 该 文件 中 。 

为 此 用 户 需要 学 习 和 使 用 会 话 加 密 方法 ， 有 具体 说 明 如 下 。 

session_encode: 对 Session 信息 进行 编码 。 

string session_encode(void): 

该 函数 返回 的 字符 串 中 包含 全 局 变量 中 各 变量 的 名 称 与 值 ， 如 als:12:"it is a test";c|s:4:"lala";。a 
是 变量 名 ，s:12 代表 变量 a 的 值 "it is a test" 的 长 度 是 12， 变 量 间 用 分 号 “;” 分 隔 。 

加 ”session_decode: 对 Session 信息 进行 解码 。 

boolean session_decode (string data) 


该 函数 可 对 Session 信息 进行 解码 ， 成 功 则 返回 逻辑 值 tue。PHP 5 不 再 使 用 session id， 而 是 把 
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它 变 成 一 个 常量 SID， 并 保存 在 Cookie 中 。 如 果 客 户 端 禁用 了 Cookie，PHP 会 自动 通过 URL 自动 传 
动 SID， 其 条 件 是 设置 php.ini 中 的 session.use_ trans_sid = 1。 最 后 使 用 strip_tags0 输 出 SID， 以 避免 
XSS 相关 的 攻击 。 
全 | 很 多 PHP 开发 人 员 喜 欢 使 用 Session 会 话 变量 , 大 量 使 用 会 话 变量 能 够 帮助 你 设计 更 多 人 性 化 的 
”| 功能。 仔细 分 析 原 因 : 
Note | 回 “传递 简单 。 在 Web 应 用 程序 内 的 页 面 间 传递 一 个 变量 值 , 使 用 Session 变量 要 比 通过 查询 字 
| 符 串 传递 变量 值 更 简单 。 
使 用 方便 。 读 者 可 以 在 任何 时 候 直接 使 用 Session 变量 。 
更 容易 设计 出 针对 不 同 用 户 的 设计 体验 。Web 设计 的 趋势 就 是 要 以 用 户 体验 为 中 心 ， 自 然 
使 用 Session 变量 是 最 佳 选择 。 
但 是 当初 学 者 逐渐 掌握 Session 的 使 用 时 , 也 应 该 注意 几 个 问题 , 避免 在 开发 中 乱用 Session 变量 。 
Session 过 于 依赖 进程 Session 状态 存储 在 服务 器 的 进程 中 。 所 以 当 inetinfo.exe 进程 崩溃 时 ， 
Session 会 话 信息 就 会 全 部 丢失 。 
回 。 Session 过 于 依赖 Cookie。 用 户 会 话 信息 都 存储 在 Cookie 中 , 如 果 客 户 端 完全 禁用 掉 了 Cookie 
功能 ，Session 提供 的 功能 也 就 自然 失效 了 。 
Session 作用 域 的 局 限 性 。 用 户 会 话 信息 不 能 够 实现 应 用 程序 之 间 迁 移 。 例 如 ， 百 度 网 站 的 
Web 服务 器 可 能 不 止 一 个 ， 当 用 户 登 录 其 中 一 个 频道 之 后 ， 可 能 需要 去 各 个 频道 中 浏览 ， 
但 是 每 个 频道 都 在 不 同 的 服务 器 上 , 如 果 想 在 这 些 Web 服务 器 共享 Session 会 话 信息 就 是 一 
个 很 麻烦 的 问题 。 
任何 变量 和 对 象 都 会 占用 系统 资源 。Session 变量 同样 需要 有 单独 的 运行 时 间 和 存储 空间 。 
过 多 地 使 用 Session 变量 就 会 导致 大 量 代码 元 余 ， 并 且 使 服务 器 运行 成 本 提高 。 
当 一 个 用 户 访问 某 个 页 面 时 ， 每 个 Session 变量 的 运行 环境 便 自动 生成 ， 这 些 Session 变量 
可 能 会 在 用 户 离开 该 页 面 后 仍然 保留 ， 直 到 有 效 期 过 后 。 这 必然 构成 对 用 户 安全 的 威胁 。 
同时 ， 如 果 在 Session 中 存储 较 大 的 对 象 ( 如 ADO 组 件 中 的 Recordsets、Connections 对 象 
等 ) ， 当 站 点 访问 量 增 大 时 ， 服 务 器 将 会 因此 而 无 法 正常 运行 。 
由 于 创建 Session 变量 比较 随意 ， 可 随时 调用 ， 不 需要 开发 者 去 声明 ， 所 以 过 度 使 用 Session 
变量 将 会 导致 代码 阅读 性 差 ， 而 且 不 好 维护 。 
鉴于 PHP 提供 的 Session 变量 存在 很 多 局 限 性 , 使 得 PHP 中 Session 成 为 了 一 个 更 加 强大 的 功能 。 
但 是 在 PHP 中 ， 个 人 建议 你 要 少 用 Session， 只 有 在 必要 时 选择 使 用 ， 以 简化 Web 开发 。 


18.2 Cookie 管理 


Session 对 象 是 利用 Cookie 技术 来 实现 会 话 信息 的 处 理 ， 当 用 户 向 服务 器 发 出 请 求 时 ， 服 务 器 会 
同时 在 客户 端 浏览 器 中 创建 一 个 Cookie， 并 把 Cookie 信息 保存 在 用 户 本 地 计算 机 中 。 当 这 个 Session 
结束 时 ， 这 个 Cookie 信息 也 将 同时 过 期 并 被 清除 。 


18.2.1 认识 Cookie 


Cookie 也 称 为 小 甜 饼 ， 它 是 存储 在 客户 端 计算 机 中 的 一 个 文本 文件 ,文本 中 包含 一 组 字符 串 。 每 
当 用 户 访问 包含 Cookie 的 页 面 时 ，PHP 页 面 就 会 在 用 户 的 计算 机 上 建立 一 个 文本 文件 ， 并 把 一 些 相 
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关 信 息 保存 到 该 文本 文件 中 。 这 就 意味 着 每 当 一 个 用 户 访问 网 站 ,网 站 就 可 以 秘密 地 在 用 户 的 本 地 硬 | 
盘 上 建立 并 保存 相关 信息 。 该 文件 可 以 包含 任何 设置 信息 ， 如 用 户 个 人 信息 、 站 点 状态 和 用 户 操作 习 | 


惯 等 。 


套 机 制 只 允许 客户 端 Cookie 被 创建 它 的 域 所 存 取 , 其 他 浏览 器 或 网 站 都 无 法 存 取 同 一 个 Cookie 文件 。 
例如 ，www.baidu.com 只 能 访问 baidu.com 创建 的 Cookie。 


Cookie 信息 存在 潜在 的 风险 ， 它 可 能 被 黑客 读 取 。 为 了 防止 类 似 问题 的 发 生 ，Cookie 设置 了 一 | 


万 ) 
) 六 


有 了 Cookie, 网 站 就 不 用 担心 用 户 的 去 留 , 每 当 用 户 进入 网 站 时 ,服务 器 就 会 自动 从 客户 端 计算 | 


机 中 读 取 该 站 的 Cookie， 并 据 此 对 Cookie 信息 进行 分 析 和 判断 ， 例 如 ， 己 访问 时 间 、 访 问 日 志 、 用 
户 的 个 人 信息 等 。 如 果 没 有 发 现 Cookie， 就 可 以 判断 该 用 户 是 新 用 户 ， 并 执行 相应 的 操作 。 

所 有 Cookie 都 被 存放 在 客户 端 临 时 文件 夹 中 ， 存 放 Cookie 的 文本 文件 命名 规则 为 : 用 户 名 @ 网 
站 名 .txt。 

例如 ， 访 问 百度 网 站 之 后 ， 则 在 Cookies 目录 下 就 会 发 现 “zhu@baidu[1].txt” 的 文本 文件 。 有 些 
文件 可 能 会 使 用 IP 地 址 来 描述 网 站 ， 如 “zhu@220.1518.60.111[1].txt”。 

这 些 Cookie 文本 文件 可 以 被 任何 文本 编辑 器 打开 ， 打 开 后 会 显示 类 似 如 图 18.1 所 示 的 一 长 串 字 
符 串 。 

这 些 文本 文件 有 的 是 临时 文件 ,用 来 跟 


文才 (D。 济 蝇 (日 ” 个 式 (D) 下 看 (V) 加 鳃 (F) 


踪 用 户 的 进程 ,直到 用 户 离开 网 站 时 就 被 自 BAIDUID7F7939D26FFF48FC49107FEFED2A8320:FG=Ibaida. 2om/ 


102433841318430414121264758516350540695* 


动 删 除 。 还 有 一 些 文件 是 长 久保 存 的 ， 该 文 
件 可 以 根据 所 设置 的 Cookie 有 效 期 长 久保 
存 ， 当 用 户 再 次 登录 网 站 时 ， 又 可 以 进行 读 
取 操 作 。 


822 创建 Cookie 图 18.1 Cookie 文本 文件 

在 PHP 中 通过 setcookie0 函 数 创建 Cookie。 使 用 setcookie0 函 数 的 前 提 是 客户 浏览 器 支持 Cookie， 
如 果 客 户 禁 用 Cookie，setcookie() 将 返回 false。 语 法 格式 如 下 : 

setcookie(name.value.expire.path.domain.secure) 

setcookie0 函 数 向 客户 端 发 送 一 个 HITP cookie。 如 果 成 功 ， 则 该 函数 返回 tue， 和 否则 返回 false。 
setcookie0 函 数 的 参数 说 明 如 表 18.1 所 示 。 


表 18.1 setcookie() 函 数 参数 说 明 























参数 说 明 

name 必需 。 定 义 cookie 的 名 称 

value 必需 。 定 义 cookie 的 值 

expire 可 选 。 定 义 cookie 的 有 效 期 

path 可 选 。 定 义 cookie 的 服务 器 路 径 

domain 可 选 。 定 义 cookie 的 域名 

secure 可 选 。 定 义 是 否 通过 安全 的 HTTPS 连接 来 传输 cookie 
【示例 1】 如 何 设置 并 发 送 cookie。 


<2php 
$value = "my cookie value": 
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砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


/发 送 一 个 简单 的 cookie 
Se ie("TestCookie".$value): 
?> 


< 所 注意 : 在 发 送 cookie 时 ，cookie 的 值 会 自动 进行 URL 编码 。 接 收 时 会 进行 URL 解码 。 如 果 不 
需要 这 样 ， 可 以 使 用 setrawcookie() 函 数 进行 代替 。 
【示例 2】 设 置 一 个 24 小 时 有 效 期 的 cookie。 

<?php 

$value = "my cookie value":; 

// 发 送 一 个 24 小 时 过 期 的 cookie 

setcookie("TestCookie", $value, time()+3600*24); 

?> 

如 果 要 把 cookie 保存 为 浏览 器 进程 , 即 浏览 器 关闭 后 就 失效 。 那么 可 以 直接 把 expiretime 设 为 0。 如 : 

<?php 

S$value = "my cookie value"; 

// 发 送 一 个 关闭 浏览 器 即 失 效 的 cookie 

setcookie("TestCookie", $value, 0): 

?> 

参数 path 表示 Web 服务 器 上 的 目录 ， 默 认为 被 调用 页 面 所 在 目录 ， 这 里 还 有 一 点 要 说 明 的 ， 如 
果 网 站 有 几 个 不 同 的 目录 ， 如 一 个 购物 目录 、 一 个 论坛 目录 等 ， 那 么 如 果 只 用 不 带路 径 的 Cookie 的 
话 ， 在 一 个 目录 下 的 页 面 里 设置 的 Cookie 在 另 一 个 目录 的 页 面 里 是 看 不 到 的 ， 也 就 是 说 ，Cookie 是 
面向 路 径 的 。 实 际 上 ， 即 使 没有 指定 路 径 ，Web 服务 器 会 自动 传递 当前 的 路 径 给 浏览 器 的 ， 指 定 路 径 
会 强制 服务 器 使 用 设置 的 路 径 。 

解决 这 个 问题 的 办 法 是 在 调用 setcookie0 函 数 时 加 上 路 径 和 域名 , 域名 的 格式 可 以 是 “http://www. 
phpusercomn/”， 也 可 以 是 “.phpusercom ”。 

参数 domain 可 以 使 用 的 域名 ， 默 认为 被 调用 页 面 的 域名 。 这 个 域名 必须 包含 两 个 “.”， 所 以 如 果 


| 指定 顶级 域名 ， 则 必须 使 用 “.mydomain.com”。 设 定 域名 后 ， 必 须 采用 该 域名 访问 网 站 cookie 才 有 效 。 


如 果 使 用 多 个 域名 访问 该 页 ， 那 么 这 个 地 方 可 以 为 空 或 者 访问 这 个 cookie 的 域名 都 是 一 个 域 下 面 的 。 
参数 secure 如 果 设 为 “1”， 表 示 cookie 只 能 被 用 户 的 浏览 器 认为 是 安全 的 服务 器 所 记 住 。 

< 所 注意 : value、path、domain 3 个 参数 可 以 用 空 字符 囊 "" 代 换 ， 表 示 没 有 设置 。expire 和 secure 
两 个 参数 是 数值 型 的 ， 可 以 用 0 表示 。expire 参数 是 一 个 标准 的 UNIX 时 间 标 记 ， 可 以 用 
time0 或 mktimeO 函 数 取 得 ， 以 秒 为 单位 。secure 参数 表示 这 个 Cookie 是 否 通过 加 密 的 
HTTPS 协议 在 网 络 上 传输 。 
httponly 参数 如 果 设 为 1， 则 表示 cookie 只 能 被 HTTP 协议 所 使 用 ， 任 何 脚本 语言 都 不 能 
获取 PHP 所 创建 的 cookie， 这 就 有 效 削 弱 了 来 自 XSS 的 攻击 。 
当前 设置 的 Cookie 不 是 立即 生效 的 ， 而 是 要 等 到 下 一 个 页 面 或 刷新 后 才能 看 到 。 这 是 由 
于 在 设置 的 这 个 页 面 里 Cookie 由 服务 器 传递 给 客户 浏览 器 ， 在 下 一 个 页 面 或 刷新 后 浏览 
器 才能 把 Cookie 从 客户 的 机 器 里 取出 传 回 服务 器 的 原因 。 


18.2.3 读 取 Cookie 
在 PHP 中 可 以 通过 $_ COOKIE 变量 读 取 浏 览 器 端的 Cookie 值 。 
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【示例 】 读 取 Cookie 值 。 

<2php 

if(!isset($ COOKIE["vtime"]){ // 如 果 Cookie 不 存在 
setcookie("vtime".date("y-m-d Hi:s")): // 设 置 一 个 Cookie 变量 
echo "第 一 次 访问 "."<br>"; // 输 出 字符 串 

jelsef // 如 果 Cookie 存在 
echo "上 次 访问 时 间 为 : ".$_COOKIE["vtime"]; /| 输出 上 次 访问 网 站 的 时 间 
echo "<br>"; 
setcookie("vtime",.date("y-m-d H:i:s").timeQ+60); // 设 置 带 Cookie 失效 时 间 的 变量 

} 

echo "本 次 访问 时 间 为 : ".date("y-m-d H:i:s"); /输出 当前 的 访问 时 间 

?> 


在 上 面 示例 中 ， 首 先 检测 Cookie 文件 是 否 存在 ， 如 果 不 存在 ， 则 新 建 一 个 Cookie; 如 果 存 在 ， 
则 读 取 Cookie 值 ， 并 显示 用 户 上 次 访问 时 间 。 


18.2.4 删除 Cookie 


创建 Cookie 之 后 ， 如 果 没 有 设置 它 的 失效 时 间 ， 则 Cookie 文件 在 关闭 浏览 器 时 会 被 自动 删除 ， 
如 果 在 关闭 浏览 器 之 前 删除 Cookie， 可 以 有 两 种 方法 。 
(1) 使 用 setcookie0 函 数 删除 ， 只 要 将 该 函数 的 第 二 个 参数 设置 为 空 ， 将 第 三 个 参数 设置 为 小 
于 当前 系统 时 间 即 可 ， 例 如 : 
setcookie("vime"."",date("y-m-d H:i:s").time()-1): 
如 果 把 第 三 个 参数 设置 为 0， 则 表示 直接 删除 Cookie 值 。 
(2) 在 正 浏 览 器 中 ,选择 【工具 】|【Intemet 选项 】 命令 , 打开 【Internet 选项 】 对 话 框 , 在 【 常 
规 】 选 项 卡 中 单 击 【 删 除 Cookie】 按 钮 即 可 。 


18.3 字符 串 处 理 


在 Web 编程 中 ， 字 符 串 总 是 被 大 量 地 生成 和 处 理 。 例 如 ， 获 取 字 符 串 的 长 度 、 提 取 字 符 串 中 指 
定位 置 的 字符 等 。 正 确 地 使 用 和 处 理 字符 串 ， 对 于 PHP 开发 者 来 说 越 来 越 重要 。 

本 节 从 最 简单 的 字符 串 定义 一 直 引 导读 者 到 高 层 字符 串 处 理 技巧 , 希望 读者 通过 学 习 ， 了 解 和 掌 
握 PHP 字符 串 ， 达 到 举一反三 的 目的 ， 为 了 解 和 学 习 其 他 的 字符 串 处 理 技巧 打 好 基础 。 


18.3.1 格式 化 字符 串 

通常 ， 在 使 用 用 户 输入 的 字符 串 〈 通 常 来 自 HIML 表单 界面 ) 之 前 ， 必 须 对 它们 进行 整理 。 整 
理 字符 串 的 第 一 步 是 清理 字符 串 中 多 余 的 空格 。 虽然 这 一 步 操 作 不 是 必需 的 , 但 如 果 要 将 字符 串 存 入 
一 个 文件 或 数据 库 中 ， 或 者 将 它 和 别 的 字符 串 进行 比较 ， 这 就 是 非常 有 用 的 。 为 了 实现 该 功能 ，PHP 


提供 了 3 个 非常 有 用 的 函数 .在 脚本 的 开始 处 , 当 给 表单 输入 变量 定义 简短 变量 名 称 时 , 可 以 使 用 trim0 
函数 来 整理 用 户 输入 的 数据 ， 如 下 所 示 : 
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trim0 函 数 可 以 除去 字符 串 开始 位 置 和 结束 位 置 的 空格 ， 并 将 结果 字符 串 返 回 。 默 认 情 况 下 ， 除 


| 去 的 字符 是 换行 符 和 回 车 符 〈 和 \r)、 水 平和 垂直 制 表 符 〈\t 和 \v)、 字 符 串 结束 符 〈\0) 和 空格 。 除 


了 这 个 默认 的 过 滤 字 符 列表 外 ,也 可 以 在 该 函数 的 第 二 个 参数 中 提供 要 过 滤 的 特殊 字符 。 根据 特 定 用 
途 ， 可 能 会 希望 使 用 ltrim0 函 数 或 rrim0 函 数 。 

这 两 个 函数 的 功能 都 类 似 于 trim0 函 数 ， 它 们 都 以 需要 处 理 的 字符 串 作 为 输入 参数 ， 然 后 返回 经 
过 格式 化 的 字符 串 。 这 3 个 函数 的 不 同 之 处 在 于 trim0 将 除去 整个 字符 串 前 后 的 空格 ， 而 ltrimO 只 从 
字符 串 的 开始 处 《〈 左 边 ) 除去 空格 ，rtrimO 只 从 字符 串 的 结束 处 〈 右 边 ) 除去 空格 。 

PHP 具有 一 系列 可 供 使 用 的 函数 来 重新 格式 化 字符 串 ， 这 些 函数 的 工作 方式 是 各 不 相同 的 。 

回 HTML 格式 化 

nl2br0 函 数 将 字符 串 作为 输入 参数 ， 用 HTML 中 的 <br> 标 记 代 蔡 字 符 串 中 的 换行 符 。 这 对 于 将 
一 个 长 字符 串 显 示 在 浏览 器 中 是 非常 有 用 的 。 例 如 ,使 用 这 个 函数 来 格式 化 顾客 反馈 信息 并 将 它 返 回 
到 浏览 器 中 : 

<p><? php echo nl2br($text); ?> </p> 
浴 提示 : HTML 将 忽略 纯 空格 ， 所 以 如 果 不 使 用 nl2br0 函 数 来 过 滤 这 个 输出 结果 ， 那 么 它 看 上 去 

就 是 单独 的 一 行 。 

打印 格式 化 

常用 echo 命令 将 字符 串 输出 到 浏览 器 。PHP 也 支持 print0 函 数 , 它 实现 的 功能 与 echoe 命令 相同 ， 
但 具有 返回 值 ， 总 是 返回 1。 

使 用 函数 printf0 和 sprintf0), 还 可 以 实现 一 些 更 复杂 的 格式 .它们 的 工作 方式 基本 相同 , 只 是 printf0 
函数 是 将 一 个 格式 化 的 字符 串 输出 到 浏览 器 中 ， 而 sprintf0 函 数 是 返回 一 个 格式 化 了 的 字符 串 。 

这 两 个 函数 的 基本 语法 如 下 : 


string sprintf (string format [. mixed args...]) 
int printf (string format [, mixed args...]) 


传递 给 这 两 个 函数 的 第 一 个 参数 都 是 字符 串 格式 , 它们 使 用 格式 代码 而 不 是 变量 来 描述 输出 字符 
串 的 基本 形状 。 其 他 参数 是 用 来 替换 格式 字符 串 的 变量 。 

【示例 】 在 使 用 echo 时 ， 把 要 用 的 变量 直接 打印 至 该 行 中 ， 如 下 所 示 : 

echo "总 订单 数量 是 : S$total."; 

要 使 用 printftO 函 数 得 到 相同 的 结果 ， 应 该 使 用 如 下 语句 : 

printf (" 总 订单 数量 是 : %s.", $total): 

格式 化 字符 串 中 的 %s 是 转换 说 明 。 它 的 意思 是 用 一 个 字符 串 来 代替 。 在 这 个 例子 中 ， 它 会 被 已 
解释 成 字符 串 的 $total 代替 。 如 果 保 存在 $total 变量 中 的 值 是 12.4， 这 两 种 方法 都 将 它 打印 为 12.4。 

printtO 函 数 的 优点 在 于 它 可 以 使 用 更 有 用 的 转换 说 明 来 指定 Stotal 为 一 个 浮 点 数 ， 它 的 小 数 点 后 
面 应 该 有 两 位 小 数 ， 如 下 所 示 : 

printf ("总 订单 数量 是 : %.2f", $total); 

经 过 这 行 代码 的 格式 化 处 理 ， 存 储 在 $total 中 的 12.4 将 打印 为 12.40。 
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| 
可 以 在 格式 化 字符 串 中 使 用 多 个 转换 说 明 。 如果 有 n 个 转换 说 明 ， 在 格式 化 字符 串 后 面 就 应 该 带 | 
有 个 参数 。 每 个 转换 说 明 都 将 按 给 出 的 顺序 被 一 个 重新 格式 化 过 的 参数 代替。 | 
Printf (总 订单 数量 是 ，%.2f( 含 运费 96.2D "Stotal Stotal shipping): 
在 这 里 ， 第 一 个 转换 说 明 将 使 用 变量 Stotal， 而 第 二 个 转换 说 明 将 使 用 变量 Stotal shipping。 
每 一 个 转换 说 明 都 遵循 同样 的 格式 ， 如 下 所 示 : 
%[padding character][-][width][.precision]type | 
所 有 转换 说 明 都 以 % 开 始 。 如 果 想 打印 一 个 “%” 符 号 ， 必须 使 用 “%%”。 参数 padding_character | 
是 可 选 的 。 它 将 被 用 来 填充 变量 直至 所 指定 的 宽度 。 该 参数 的 作用 就 像 使 用 计算 器 那样 在 数字 前 面 加 | 
零 。 默 认 的 填充 字符 是 一 个 空格 ， 如 果 指 定 了 一 个 空格 或 0， 就 不 需要 使 用 “” 作 为 前 缀 。 对 于 任何 | 





其 他 填充 字符 ， 必 须 指 定 “'” 作 为 前 级 。 
字符 “-” 是 可 选 的 。 它 指明 该 域 中 的 数据 应 该 左 对 齐 ， 而 不 是 默认 的 右 对 齐 。 
参数 width 告诉 printf0 函 数 在 这 里 为 将 被 蔡 换 的 变量 留 下 多 少 空间 按 字符 计算 )。 | 
参数 precision 表示 必须 是 以 一 个 小 数 点 开始 。 它 指明 了 小 数 点 后 面 要 显示 的 位 数 。 | 
转换 说 明 的 最 后 一 部 分 是 一 个 类 型 码 。 其 支持 的 所 有 类 型 码 如 表 18.2 所 示 。 | 


表 18.2 转换 说 明 的 类 型 码 

类 型 说 了 明 

解释 为 整数 并 作为 二 进 制 数 输出 

解释 为 整数 并 作为 字符 输出 

解释 为 整数 并 作为 小 数 输出 

解释 为 双 精 度 并 作为 浮 点 数 输出 

解释 为 整数 并 作为 八进制 数 输出 

解释 为 字符 串 并 作为 字符 串 输出 

解释 为 整数 并 作为 非 指 定 小 数 输出 

解释 为 整数 并 作为 带 有 小 字母 a-f 十 六 进 制 数 输出 
解释 为 整数 并 作为 带 有 大 字母 a-f 十 六 进 制 数 输出 


当 在 类 型 转换 代码 中 使 用 printf0) 函 数 时 ， 参 数 的 顺序 并 不 一 定 要 与 转换 说 明 中 的 顺序 相同 。 
字符 串 大 小 写 

可 以 重新 格式 化 字符 串 中 的 字母 大 小 写 。 例 如 ， 如 果 电 子 邮 件 中 的 主题 行 字 符 串 是 以 $subject 开 
始 ， 可 以 通过 几 个 函数 来 改变 它 的 大 小 写 。 这 些 函 数 的 功能 概要 如 表 18.3 所 示 。 该 表 的 第 一 列 显示 
了 函数 名 ， 第 二 列 描 述 了 它 的 功能 ， 第 三 列 显示 了 如 何在 字符 串 Ssubject 中 使 用 它 ， 最 后 一 列 显示 了 
该 函数 的 返回 值 。 
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表 18.3 ”字符 串 大 小 写 函 数 和 它们 的 效果 














转换 为 大 写 


函数 说 明 使 用 返 回 值 
strtoupperO | 将 字符 串 转 换 为 大 写 strtoupper($subject) | FEEDBACK FROM WEB SITE 
strtolower() 将 字符 串 转换 为 小 写 Strtolower($subject feedback from web site | 
ucfirstO 的 全 和 生生 生生 于 ucfirst($subject) Feedback from web site | 
就 将 该 字符 转换 为 大 写 | 
将 字符 串 每 个 单词 的 第 一 个 字母 _ | 
UcwordsO Ucwords($subject) Feedback From Web Site ! 
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到 下 统 计 和 与 网 站 过 役 从 入 门 到 将 通 

除了 使 用 字符 串 函 数 来 重新 格式 化 一 个 可 见 的 字符 串 之 外 , 也 可 以 使 用 其 中 的 一 些 函数 来 重新 格 
式 化 字符 串 ， 以 便 将 其 存 入 数据 库 。 对 于 字符 串 来 说 ， 某 些 字符 肯定 是 有 效 的， 但 是 当 将 数据 插入 到 
数据 库 中 时 可 能 会 引起 一 些 问题 ， 因 为 数据 库 会 将 这 些 字符 解释 成 控制 符 。 这 些 有 问题 的 字符 就 是 引 
号 〈 单 引 和 双 引 )、 反 斜 本 (\) 和 NULL 字符 。 

需要 找到 一 种 标记 或 是 转 义 它们 的 办 法 。 以 便 使 像 MySQL 这 样 的 数据 库 能 够 理解 所 表示 的 是 有 
实际 意义 的 特殊 文本 字符 ， 而 不 是 控制 序列 。 为 了 将 这 些 字符 进行 转 义 处 理 ， 可 以 在 它们 前 面 加 一 个 
反 斜 本 。 例 如 ，"”( 双 引号 ) 就 变 成 %〈 反 斜 杠 双 引号 )，\《〈 反 和 斜 杠 ) 就 变 成 \( 反 斜 杠 反 斜 杠 )。 这 个 


| 规则 对 所 有 特殊 字符 都 通用 ， 所 以 如 果 在 字符 串 中 存在 \ 字 符 ， 就 需要 用 \ 进 行 蔡 换 。 


PHP 提供 了 两 个 专门 用 于 转 义 字符 串 的 函数 。 在 将 任何 字符 串 写 到 数据 库 之 前 ， 如 果 PHP 的 默 
认 配 置 还 没有 启用 该 功能 ， 读 者 应 该 使 用 addSlashesO 函 数 将 它们 重新 格式 化 ， 例 如 : 
S$feedback = addSlashes($feedback); 


与 许多 其 他 字符 串 函 数 一 样 ，addSlashes0 函 数 需要 一 个 字符 串 作 为 输入 参数 ， 经 过 该 函数 处 理 ， 
将 返回 一 个 重新 格式 化 后 的 字符 串 。 

如 果 设 置 了 PHP 的 配置 参数 magic_quotes_gpc， 则 PHP 将 自动 添加 或 去 除 反 斜 枉 。 在 PHP 新 版 
本 的 默认 安装 情况 下 ， 该 指令 是 启用 的 。gpe 表示 GET、POST 和 cookie， 是 第 一 个 字母 的 组 合 。ii 
就 意味 着 ， 来 自 这 些 方法 或 方式 的 变量 将 被 自动 包括 在 引号 内 。 使 用 get_ magic_quotes_gpc0 函 数 ， 
可 以 检查 系统 上 的 这 个 指令 是 否 已 经 启用 ,如 果 来 自 这 些 方 法 的 变量 被 自动 引用 在 引号 中 , 该 函数 将 
返回 tue。 如 果 系 统 上 该 指令 为 启用 的 ， 在 显示 用 户 数据 之 前 ， 必 须 调用 stripslashes0 函 数 ， 否则 ， 
这 些 反 斜 杠 会 被 显示 出 来 。 


18.3.2 连接 和 分 割 字符 串 


一 般 地 ， 如 果 想 查看 字符 串 的 各 个 部 分 。 例 如 ， 查 看 句子 中 的 单词 (如 在 拼写 检查 时 )， 或 者 要 
将 一 个 域名 或 电子 邮件 地 址 分 割 成 一 个 个 的 组 件 部 分 。 PHP 提供 了 几 个 字符 串 函 数 (和 一 个 正则 表达 
式 函 数 ) 来 实现 此 功能 。 

explode(0) 函 数 能 够 劈 开 字符 串 ， 具 体 语法 如 下 : 

array explode(string separator. string input, int limit): 

这 个 函数 带 有 一 个 输入 字符 串 作 为 参数 , 并 根据 一 个 指定 的 分 隔 符 字符 串 将 字符 串 本 身分 割 为 小 
块 ， 将 分 割 后 的 小 块 返回 到 一 个 数组 中 。 可 以 通过 可 选 的 参数 limit 来 限制 分 成 字符 串 小 块 的 数量 。 

【示例 1】 如 果 通 过 顾客 的 电子 邮件 地 址 获得 域名 ， 可 以 使 用 如 下 所 示 的 代码 : 

Semail array =explode("@". Semail): 

在 这 里 ， 调 用 函数 explode0 将 顾客 的 电子 邮件 地 址 分 割 成 两 部 分 : 用户 名 称 ， 它 保存 于 Semail_ 
array[0] 中 ， 而 域名 保存 在 Semail_array[1] 中 。 现 在 ， 就 可 以 测试 域名 来 判断 顾客 的 来 源 ， 分 别 进行 不 
同 的 反馈 处 理 。 

if ($email array[]] 一 "bigcustomercom'") 

S$toaddress = "bob@bobsdomain.com": 
else 
S$toaddress = "feedback@bobsdomain.com": 
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4 全 注意 : 如 果 域 名 是 大 写 的 或 者 大 小 写 混合 的 ， 这 个 函数 就 无 法 正常 使 用 。 这 时 可 以 通过 将 域名 转 
换 成 全 是 大 写 或 小 写 的 方法 来 避免 这 个 问题 ， 然 后 再 按 如 下 所 示 方 法 进行 检查 是 否 匹 配 。 | 
if (strtolower($email array[1])—"bigcustomer.com") | 
S$toaddress = "bobQ@bobsdomain com'": 
else 
$toaddress = "feedback(@bobsdomain.com"; 
使 用 implode0 或 join0 函 数 可 以 实现 与 函数 explode() 相 反 的 效果 ， 这 两 个 函数 的 效果 是 一 致 的 。 
例如 : 
Snew_email = implode("@", $email array); 
以 上 代码 是 从 $email array 中 取出 数组 元 素 ， 然 后 用 第 一 个 传 入 的 参数 字符 将 它们 连接 在 一 起 。 
这 个 函数 的 调用 同 explode0 十 分 相似 ， 但 效果 却 相反 。 
与 函数 explode0 每 次 都 将 一 个 字符 串 全 部 分 割 成 若干 小 块 不 同 , strtok0 函 数 一 次 只 从 字符 串 中 取 
出 一 些 片段 ,对 于 一 次 从 字符 串 中 取出 一 个 单词 的 处 理 来 说 , strtokO 函 数 比 explode0 函 数 的 效果 更 好 。 
strtok0 〇 函数 的 基本 语法 如 下 : 
string strtok(string input, string separator); 
分 隔 符 可 以 是 一 个 字符 ， 也 可 以 是 一 个 字符 串 ， 但 是 ， 需 要 注意 的 是 ， 输 入 的 字符 串 会 根据 分 隔 
符 字 符 串 中 的 每 个 字符 来 进行 分 割 ， 而 不 是 根据 整个 分 隔 字 符 串 来 分 隔 。 
调用 函数 strtok0 并 不 是 那么 简单 。 为 了 从 字符 串 中 得 到 第 一 个 片段 ， 可 以 调用 strtok0 函 数 ， 并 
带 有 两 个 输入 参数 : 一 个 是 要 进行 片段 化 处 理 的 字符 串 ， 还 有 一 个 就 是 分 隔 符 。 为 了 从 字符 串 中 得 到 
片段 序列 ， 可 以 只 用 一 个 参数 〈 分 隔 符 )， 该 函数 会 保持 它 自己 的 内 部 指针 在 字符 串 中 的 位 置 。 如 果 
想 重 置 指针 ， 可 以 重新 将 该 字符 串 传 给 这 个 函数 。 
【示例 2】 使 用 strtok0 函 数 获 取 字 符 串 片段 。 
$token = strtok($feedback, " "): 
echo $token."<br>"; 
while ($token!="){ 
$token = strtok(" "); 
echo $token."<br>"; 





号 
通常 ， 使 用 像 empty0 这 样 的 函数 来 检查 顾客 是 否 在 表单 中 真正 输入 了 反馈 信息 。 在 上 面 代码 中 ， 
将 顾客 反馈 中 的 每 个 片段 打印 在 每 一 行 上 ， 并 一 直 循环 到 不 再 有 字符 片段 。 在 这 个 过 程 中 ， 空 字符 串 
将 被 自动 跳 过 。 | 
使 用 substr0 函 数 可 以 访问 一 个 字符 串 给 定 起 点 和 终点 的 子 字符 串 。 当 需要 得 到 某 个 固定 格式 字 | 
符 串 中 的 一 部 分 时 ， 它 会 非常 有 用 。substr0 函 数 的 基本 语法 如 下 : 
string substr(string string, int start, int [length] ): 
这 个 函数 将 返回 字符 串 的 子 字符 串 副本 。 
【示例 3】 使 用 substr0 函 数 截 取 字符 串 。 


Stest = "Your customer service is excellent": 
substr(Stest 1): 
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如 果 只 用 一 个 正 数 作为 子 字符 串 起 点 来 调用 这 个 函数 ， 将 得 到 从 起 点 到 字符 串 结束 的 整个 字符 串 。 
上 面 示例 将 返回 “our customer service is excellent”。 注 意 ， 字 符 串 的 起 点 和 数组 一 样 是 从 零 开 始 的 。 

【示例 4】 如 果 只 用 一 个 负数 作为 子 字符 串 起 点 来 调用 它 ， 将 得 到 一 个 原 字符 串 尾部 的 一 个 子 字 
符 串 ， 字 符 个 数 等 于 给 定 负数 的 绝对 值 。 例 如 : 

Stest = "Your customer service is excellent"; 

substr($test, -9): 

上 面 代码 将 返回 “excellent”。 

length 参数 可 以 用 于 指定 返回 字符 的 个 数 〈 如 果 它 是 正 数 )， 或 是 字符 串 序列 的 尾部 〈 如 果 它 是 
负数 )。 例 如 : 

substr(Stest, 0, 4): 

将 返回 字符 串 的 前 4 个 字符 ， 即 “Your”。 下 面 的 代码 : 

echo substr(Stest, 4. -13): 


将 返回 从 第 4 个 到 倒数 第 13 个 字符 ， 即 “customer service”， 第 1 个 字符 的 位 置 为 0， 因此 位 置 
5 就 是 第 6 个 字符 。 


18.3.3 比较 字符 串 


一 般 常 用 一 运算 符 来 比较 两 个 字符 串 是 否 相等 。 使 用 PHP 可 以 进行 一 些 更 复杂 的 比较 。 这 些 比 
较 分 为 两 类 : 部 分 匹配 和 其 他 情况 。 

在 比较 字符 串 之 前 ， 先 看 看 字符 串 排序 函数 : strcmpO、strcasecmp(0 和 stmatcmp0。 它 们 可 用 于 
字符 串 的 排序 。 当 进行 数据 排序 时 ， 这 些 函 数 是 非常 有 用 的 。 

stremp0 〇 函数 的 基本 用 法 如 下 : 

int stremp(string strl, string str2); 

该 函数 需要 两 个 进行 比较 的 参数 字符 串 。 如 果 这 两 个 字符 串 相等 ， 该 函数 就 返回 0， 如 果 按 字典 
顺序 strl 在 str2 后 面 ( 大 于 str2) 就 返回 一 个 正 数 ， 如 果 strl 小 于 str2 就 返回 一 个 负数 。 这 个 函数 是 
区 分 大 小 写 的 。 

函数 strcasecmp0O 除 了 不 区 分 大 小 写 之 外 ， 其 他 用 法 和 stremp0 一 样 。 

函数 stmatcmpO 也 不 区 分 大 小 写 ， 但 将 按 “ 自 然 排序 ”比较 字符 串 ， 所 谓 自然 排序 是 按 人 们 习惯 
的 顺序 进行 排序 。 例 如 ，stremp0 会 认为 2 大 于 12， 因 为 按 字 典 顺 序 2 要 大 于 12， 而 stmatcmpO 函 数 


























则 是 相反 。 关 于 自然 排序 可 以 访问 http:/www.linuxcare.com.au/projects/natsort/ 网 页 了 解 更 多 信息 。 


使 用 strlen0 函 数 可 以 检查 字符 串 的 长 度 .如 果 传 给 它 一 个 字符 串 ,这 个 函数 将 返回 字符 串 的 长 度 。 


| 例如 ， 如 下 所 示 的 代码 将 返回 5: 


echo strlen("hello") 
这 个 函数 可 以 用 来 验证 输入 的 数据 。 
【示例 】 检 验 一 个 保存 在 Semail 变量 中 的 电子 邮件 地 址 的 基本 方法 就 是 检查 它 的 长 度 。 根 据 推理 ， 
如 果 一 个 国家 的 代码 没有 二 级 域名 ,只 有 一 个 字母 的 服务 器 名 称 和 一 个 字母 的 电子 邮件 地 址 ,那么 它 
的 最 小 长 度 是 6 个 字符 ， 如 a@ a.to。 因 此 ， 如 果 一 个 地 址 没有 达到 这 个 长 度 就 会 提示 错误 。 
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让 (strlen(SemaiD < 6){ 
echo "邮箱 地 址 非法 "; 
exit; /退出 PHP 程序 

} 


很 明显 ， 这 是 一 个 验证 信息 是 否 有 效 的 非常 简单 的 方法 。 
18.3.4 ”匹配 字符 串 


3) 





通常 , 需要 检查 一 个 更 长 的 字符 串 中 是 否 含有 一 个 特定 的 子 字符 串 。 这 种 部 分 匹配 通常 比 测试 字 | 


符 串 的 完全 等 价 更 有 用 处 。 

在 智能 表单 例子 中 ， 和 希望 根据 反馈 信息 中 的 一 些 关键 词 将 它们 发 送 到 适当 的 部 门 。 例 如 ， 如 果 希 
望 将 关于 Bob 商店 的 信件 发 到 销售 经 理 那里 , 就 需要 知道 消息 中 是 否 出 现 了 单词 shop 或 它 的 派生 词 。 

在 了 解 了 前 面 所 介绍 的 函数 后 ， 就 可 以 使 用 函数 explode0 和 strtok0 在 消息 中 检索 每 个 单词 ， 然 
后 通过 运算 符 一 或 函数 stremp0 对 它们 进行 比较 。 

然而 , 还 可 以 调用 一 个 字符 串 函数 或 正则 表达 式 匹配 函数 来 完成 相同 的 操作 。 这 些 函 数 可 以 用 于 
在 一 个 字符 串 中 搜索 一 个 模式 。 

为 了 在 一 个 字符 串 中 查找 另 一 个 字符 串 ， 读 者 可 以 使 用 函数 strstr0、strchr0、strrchr0 和 stristrO0 
中 的 任意 一 个 。 

函数 strstr0 是 最 常见 的 ， 它 可 以 用 于 在 一 个 较 长 的 字符 串 中 查找 匹配 的 字符 串 或 字符 。 注 意 ， 在 
PHP 中 ， 函 数 strchr0 和 strstr0 完 全 一 样 ， 虽 然 其 函数 名 的 意思 是 在 一 个 字符 串 中 查找 一 个 字符 ， 类 
似 于 C 语言 中 的 同样 函数 。 在 PHP 中 ， 这 两 个 函数 都 可 用 于 在 字符 串 中 查找 一 个 字符 串 ， 包 括 查找 
只 包含 一 个 字符 的 字符 串 。 

strstr() 函 数 的 基本 用 法 如 下 : 


string strstr(string haystack., string needle);; 


在 调用 时 ， 必 须 向 函数 传递 一 个 要 被 搜索 的 子 字符 串 参数 和 一 个 目标 关键 字 字 符 串 参数 。 如 果 找 | 


到 了 目标 关键 字 的 一 个 精确 匹配 , 函数 会 从 目标 关键 字 前 面 返回 被 搜索 的 字符 串 , 否则 返回 值 为 false。 
如 果 存 在 多 个 目标 关 健 字 ， 返 回 的 字符 串 从 出 现 第 一 个 目标 关键 字 的 位 置 开 始 。 
【示例 1】 在 智能 表单 应 用 程序 中 ， 可 以 按 如 下 方式 决定 将 邮件 送 到 哪里 : 
if (strstr(Sfeedback. "shop")) 
S$toaddress = " shop@mysite.com": 
else if (strstr($feedback. "delivery")) 
S$toaddress = " delivery@mysite.com": 
else 让 (strstr($feedback "bill")) 
S$toaddress = " bill@mysite.com": 
首先 ， 这 上段 代码 将 检查 反馈 信息 中 特定 的 关键 字 ， 然 后 将 邮件 发 送 给 适当 的 人 。 函 数 strstr0 有 两 
个 变 体 。 第 一 个 变 体 是 stristr0， 它 几乎 和 strstr0 一 样 ， 其 区 别 在 于 不 区 分 字符 大 小 写 。 对 于 智能 表单 
应 用 程序 来 说 ， 这 个 函数 非常 有 用 ， 因 为 用 户 可 以 输入 delivery、Delivery 或 DELIVERY， 以 及 其 他 
大 小 写 混合 的 情况 。 第 二 个 变 体 是 strchr0， 它 与 strstr0 一 样 ， 但 strrchr0 会 查找 指定 字符 在 字符 串 中 
最 后 一 次 出 现 的 位 置 。 
函数 sttpos0 和 strrposO 的 操作 和 strstr0 类 似 ， 但 它 不 是 返回 一 个 子 字符 串 ， 而 是 返回 目标 关键 字 
子 字符 串 在 被 搜索 字符 串 中 的 位 置 。 更 有 趣 的 是 ， 现 在 的 PHP 手册 建议 使 用 stposO 函 数 蔡 代 strstr0 
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函数 来 查看 一 个 子 字符 串 在 一 个 字符 串 中 出 现 的 位 置 ， 因 为 前 者 的 运行 速度 更 快 。 

函数 strpos0 的 基本 语法 如 下 : 

int strpos(string haystack, string needle, int [offset] ); 

返回 的 整数 代表 被 搜索 字符 串 中 第 一 次 出 现 目标 关键 字 子 字符 串 的 位 置 。 通常 ， 第 一 个 字符 是 
位 置 。 

例如 ， 下 面 代 码 将 会 在 浏览 器 中 显示 数值 4。 

Stest = "Hello world"; 

echo strpos(Stest, "0"): 

在 这 个 例子 中 ,只 是 用 一 个 字符 作为 目标 关键 字 参 数 , 实际 上 目标 关键 字 参 数 可 以 是 任意 长 度 的 
字符 串 。 

该 函数 的 可 选 参数 offset 是 用 来 指定 被 搜索 字符 串 的 开始 搜索 位 置 。 例 如 : 

echo strpos($test, "0", 5); 

以 上 代码 会 在 浏览 器 中 显示 数值 7， 因 为 PHP 是 从 位 置 5 开始 搜索 字符 “0” 的， 所 以 就 看 不 到 
位 置 4 上 的 那个 字符 。 

【示例 2】 函 数 strrpos0 与 strpos0 是 一 样 的 ， 但 返回 的 是 被 搜索 字符 串 中 最 后 一 次 出 现 目 标 关 键 
字 子 字符 串 的 位 置 。 在 任何 情况 下 , 如 果 目 标 关键 字 不 在 字符 串 中 ,strpos0 或 strrpos0 都 将 返回 false， 
因此 ， 这 就 可 能 带 来 新 的 问题 ， 因 为 false 在 一 个 如 PHP 这 样 的 弱 类 型 语言 中 等 于 0， 也 就 是 说 字符 
串 的 第 一 个 字符 。 可 以 使 用 运算 符 = 一 来 测试 返回 值 ， 从 而 避免 这 个 问题 。 

$result = strpos($test, "H"):; 


让 (Sresult — false) 
echo "没有 发 现 "; 




















echo "发 现 位 置 ".$result: 


查找 替换 功能 在 字符 串 中 非常 有 用 。 可 以 使 用 查找 替换 从 而 通过 PHP 生成 个 性 化 文档 。 例 如 ， 
用 人 名 来 替换 <name>， 用 地 址 来 蔡 换 <address>。 也 可 以 使 用 这 项 功能 来 删改 特定 的 术语 ， 例 如 在 一 
个 论坛 应 用 程序 中 ,或 是 在 智能 表单 应 用 程序 中 。 需 要 再 次 提 到 的 是 ， 可 以 用 字符 串 函数 或 者 正则 表 
达 式 函数 来 实现 此 功能 。 

进行 替换 操作 最 常用 的 字符 串 函 数 是 str_replace0。 该 函数 的 基本 语法 如 下 : 

string str_replace(string needle. string new_needle, string haystack): 

这 个 函数 用 new_needle 蔡 换 所 有 haystack 中 的 needle。 并 且 返 回 haystack 蔡 换 后 的 结果 。 可 选 的 
第 四 个 参数 是 count， 它 包含 了 要 执行 的 蔡 换 操作 次 数 。 

读者 可 以 以 数组 的 方式 传递 所 有 参数 ， 该 函数 可 以 很 好 地 完成 替换 。 可 以 传递 一 个 要 被 蔡 换 单 词 
的 数组 ， 一 个 替换 单词 的 数组 ， 以 及 应 用 这 些 规则 的 目标 字符 串 数 组 。 这 个 函数 将 返回 替换 后 的 字符 
串 数 组 。 

例如 ， 因 为 人 们 使 用 智能 表单 来 投诉 ， 所 以 可 能 会 用 一 些 具有 感情 色彩 的 单词 。 作 为 程序 员 ， 通 
过 使 用 一 个 包含 了 带 有 感情 色彩 单词 的 数组 Soffeolor， 蔡 换 掉 一 些 不 文明 的 用 语 ， 如 下 所 示 的 代码 就 
是 在 str_replace0 函 数 中 使 用 数组 的 例子 。 

S$feedback = str_replace($offcolor, "%!@*", $feedback): 
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函数 substr replaceO0 则 用 来 在 给 定位 置 中 查找 和 蔡 换 字符 串 中 特定 的 子 字符 串 。 基 本 用 法 如 下 : 
string substr replace(string string, string eplacement int start int [length] ): 


这 个 函数 使 用 字符 串 replacement 蔡 换 字符 串 string 中 的 一 部 分 。 具 体 是 哪 一 部 分 则 取决 于 起 始 | 


位 置 值 和 可 选 参数 length 的 值 。 


start 的 值 代表 要 蔡 换 字符 串 位 置 的 开始 偏 移 量 。 如 果 它 为 0 或 是 一 个 正 值 , 就 是 一 个 从 字符 串 开 


始 处 计算 的 偏 移 量 。 如 果 它 是 一 个 负 值 ， 就 是 从 字符 串 末尾 开始 的 一 个 偏 移 量 。 
【示例 3】 如 下 代码 会 用 X 蔡 换 $test 中 的 最 后 一 个 字符 : 


Stest = substr_replace(S$test, "X", -1); 


参数 length 是 可 选 的 , 它 代表 PHP 停止 蔡 换 操作 的 位 置 。 如 果 不 给 定 它 的 值 ， 它 会 从 字符 串 start 
位 置 开 始 一 直到 字符 串 结束 。 





如 果 length 为 零 ， 葵 换 字符 串 实际 上 会 插入 到 字符 叫 中 而 覆盖 原 有 的 字符 串 。 一 个 正 的 leng 也 表 | 


示 要 用 新 字符 串 蔡 换 掉 的 字符 串 长 度 。 一 个 负 的 length 表示 从 字符 串 尾部 开始 到 第 length 个 字符 停止 
蔡 换 。 


18.4 使 用 数组 


在 PHP 中 ， 变 量 都 是 标量 变量 ， 这 些 变量 只 能 存储 单个 数值 。 而 数组 是 一 个 可 以 存储 一 组 或 一 
系列 数值 的 变量 。 一 个 数组 可 以 具有 许多 个 元 素 。 每 个 元 素 有 一 个 值 ， 如 文本 、 数 字 或 另 一 个 数组 。 
一 个 包含 其 他 数组 的 数组 称 为 多 维 数组 。 

PHP 支持 数字 索引 数组 和 相关 数组 。 如 果 曾 经 使 用 过 某 种 编程 语言 ,读者 可 能 会 很 熟悉 数字 索引 
的 数组 ， 但 是 如 果 没 有 使 用 过 PHP 或 Perl， 可 能 就 从 来 没有 见 过 相关 数组 。 相 关 数 组 允许 用 户 使 用 


更 有 意义 的 数据 作为 索引 。 每 个 元 素 除了 可 以 使 用 数字 索引 外 , 还 可 以 使 用 字符 串 或 其 他 有 意义 的 信 | 


息 作为 索引 。 
18.4.1 认识 PHP 数组 


一 个 标量 变量 就 是 一 个 用 来 存储 数值 的 命名 区 域 。 同 样 ， 一 个 数组 就 是 一 个 用 来 存储 一 系列 变量 | 


值 的 命名 区 域 ， 因 此 ， 可 以 使 用 数组 组 织 标量 变量 。 例 如 ， 定 义 一 个 按 数组 格式 存储 的 3 种 产品 的 列 
表 ， 数 组 变量 的 名 称 为 gproducts， 它 保存 了 3 个 变量 值 。 
拥有 数组 信息 后 ， 就 可 以 用 它 完成 很 多 有 用 的 事情 。 使 用 循环 结构 ， 可 以 完成 针对 数组 中 每 个 值 


的 相同 操作 ， 这 样 就 可 以 节省 许多 工作 。 数 组 信息 的 整个 集合 可 以 作为 一 个 单元 进行 移动 。 通 过 这 种 | 


方式 ， 只 要 使 用 一 行 代码 ， 所 有 的 数值 就 可 以 传递 给 一 个 函数 。 例 如 ， 按 字母 顺序 对 产品 进行 排序 。 
要 完成 此 操作 ， 可 以 将 整个 数组 传递 给 PHP 的 sort0 函 数 。 

存储 在 数组 中 的 值 称 为 数组 元 素 。 每 个 数组 元 素 有 一 个 相关 的 索引 也 称 为 关键 字 )， 它 可 以 用 
来 访问 元 素 。 在 大 多 数 编程 语言 中 ， 数 组 都 具有 数字 索引 ， 而 且 这 些 索引 通常 是 从 0 或 1 开始 的 。 


PHP 允许 使 用 数字 或 字符 串 作为 数组 的 索引 。 可 以 将 数组 的 索引 设置 为 传统 的 数字 型 ， 也 可 以 将 | 


索引 设置 为 任何 所 希望 的 索引 ,这 样 可 以 使 得 索引 更 有 意义 和 有 用 。 根据 是 否 使 用 标准 数字 索引 数组 
或 更 有 趣 的 索引 值 的 不 同 ， 编 程 方法 也 各 不 相同 。 
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18.4.2 ”定义 数字 索引 数组 

大 多 数 编程 语言 都 支持 数字 索引 数组 。 在 PHP 中 ， 数 字 索 引 的 默认 值 是 从 0 开始 的 ， 当 然 也 可 
以 改变 它 。 要 创建 一 个 数组 ， 可 以 使 用 如 下 所 示 的 代码 : 

$products = array("Tires", "Oil", "Spark Plugs"); 

以 上 代码 将 创建 一 个 名 为 $products 的 数组 ， 它 包含 3 个 值 : Tires、Oil 和 Spark Plugs。 注 意 ， 就 
像 echo 语句 一 样 ，array0 实 际 上 是 一 个 语言 结构 ， 而 不 是 一 个 函数 。 

根据 对 数组 内 容 的 需求 不 同 ， 可 能 不 需要 再 像 以 上 例子 一 样 对 它们 进行 手工 的 初始 化 操作 。 如 果 
所 需 数据 保存 在 另 一 个 数组 中 ， 可 以 使 用 运算 符 = 简 单 地 将 数组 复制 到 另 一 个 数组 。 


【示例 1】 如 果 需 要 将 按 升 序 排列 的 数字 保存 在 一 个 数组 中 ， 可 以 使 用 rangeO 函 数 自动 创建 这 个 
数组 。 如 下 这 行 代码 将 创建 一 个 从 1 到 10 的 数字 数组 : 


$numbers = range(1. 10): 


range0) 函 数 具有 一 个 可 选 的 第 三 个 参数 ， 这 个 参数 允许 设 定 值 之 间 的 步 幅 。 例 如 ， 如 需 建 立 一 个 
1 到 10 之 间 的 奇数 数组 ， 可 以 使 用 如 下 代码 : 


$odds = range(1, 10, 2); 

range() 函 数 也 可 以 对 字符 进行 操作 ， 如 下 例 所 示 : 

Sletters = range("a", "2"): 

如 果 信息 保存 在 磁盘 文件 中 ,可 以 从 这 个 文件 直接 载 入 到 数组 中 。 如 果 数 组 中 使 用 的 数据 保存 在 


| 数据 库 中 ， 可 以 从 数据 库 中 直接 载 入 数组 。 还 可 以 使 用 不 同 的 函数 来 提取 数组 中 的 一 部 分 数据 ， 或 对 


数组 进行 重新 排序 。 
要 访问 一 个 变量 的 内 容 ， 可 以 直接 使 用 其 名 称 。 如 果 该 变量 是 一 个 数组 ， 可 以 使 用 变量 名 称 和 关 
键 字 或 索引 的 组 合 来 访问 其 内 容 。 关 键 字 或 索引 将 指定 要 访问 的 变量 。 索 引 在 变量 名 称 后 面 用 方 括号 
【示例 2】 使 用 $products[0]、$products[1]、S$products[2]， 就 可 以 访问 数组 $products 的 内 容 了 。 
在 默认 的 情况 下 ，0 元 素 是 数组 的 第 一 个 元 素 。 这 和 C 语言 、C++、Java 以 及 许多 其 他 编程 语言 的 计 
数 模式 是 相同 的 。 如 果 你 对 这 些 内 容 很 陌生 ， 就 应 该 先 熟悉 一 下 。 像 其 他 变量 一 样 ， 使 用 运算 符 = 可 
以 改变 数组 元 素 的 内 容 。 如 下 代码 将 使 用 “Fuses” 蔡 换 第 一 个 数组 元 素 中 的 “Tires”。 


$products[0] = "Fuses" : 


而 如 下 代码 可 以 增加 一 个 新 的 元 素 “Fuses” 到 数组 末尾 ， 这 样 ， 可 以 得 到 一 个 具有 4 个 元 素 的 
数组 : 


Sproducts[3] = "Fuses" : 
要 显示 其 内 容 ， 可 以 使 用 如 下 代码 : 
echo "$products[0] $products[1] $products[2]": 


| 名 注意 : 虽然 PHP 的 字符 囊 解析 功能 非常 强大 和 智能 ， 但 是 可 能 会 引起 混 清 。 当 将 数组 或 其 他 变 


量 谈 入 双 引 号 中 的 字符 串 时 ， 如 果 不 能 正确 解释 它们 ， 可 以 将 它们 放置 在 双 引号 之 外 。 以 
上 的 echo 语句 是 没有 语法 错误 的 ， 但 是 在 更 复杂 的 例子 中 ， 读 者 将 发 现 变量 被 放置 在 双 
引号 之 外 更 安全 。 
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【示例 3】 就 像 PHP 的 其 他 变量 一 样 ， 数 组 不 需要 预先 初始 化 或 创建 。 在 第 一 次 使 用 它们 时 ， 它 们 
会 自动 创建 。 如 下 代码 创建 了 一 个 与 前 面 使 用 arrayO 语 句 创建 的 Sproducts 数组 相同 的 数组 : 
S$products[0] = "Tires": 
Sproducts[1] = "Oil"; 
Sproducts[2] = "Spark Plugs"; 
如 果 $products 并 不 存在 ， 第 一 行 代码 将 创建 一 个 只 有 一 个 元 素 的 数组 。 而 后 续 代码 将 在 这 个 数 
组 中 添加 新 的 数值 。 数组 的 大 小 将 根据 所 增加 的 元 素 多 少 动态 地 变化 。 这 种 大 小 调整 功能 并 没有 在 其 
他 大 多 数 编程 语言 中 应 用 。 
【示例 4】 由 于 数组 使 用 有 序 的 数字 作为 索引 ， 所 以 使 用 一 个 for 循环 就 可 以 很 容易 地 显示 数组 
的 内 容 。 
for($i= 0; $i< 3; $i++) 
echo "$products[$i]"; 
以 上 循环 语句 将 给 出 类 似 于 前 面 的 结果 , 但 是 , 相对 于 通过 手工 编写 代码 来 操作 一 个 大 数组 来 说 ， 
这 样 做 需要 手工 输入 的 代码 更 少 。 使 用 一 个 简单 的 循环 就 可 以 访问 每 个 元 素 是 数字 索引 数组 的 一 个 非 
常 好 的 特性 。 也 可 以 使 用 foreach 循环 ， 这 个 循环 语句 是 专门 为 数组 而 设计 的 。 在 这 个 例子 中 ， 可 以 | 
按 如 下 所 示 的 方式 使 用 它 : 


foreach( $products as $current) 
echo "$current"; 


以 上 代码 将 依次 将 $products 数组 中 每 个 元 素 的 值 保 存 到 $current 变量 中 ， 并 且 打 印 它们 。 
18.4.3 ”使 用 不 同 索引 的 数组 


在 $products 数组 中 ， 人 允许 PHP 为 每 个 元 素 指定 一 个 默认 的 索引 。 这 就 意味 着 ， 所 添加 的 第 一 个 
元 素 为 元 素 0， 第 二 个 为 元 素 1 等 。PHP 还 支持 相关 数组 。 在 相关 数组 中 ， 可 以 将 每 个 变量 值 与 任何 | 
关键 字 或 索引 关联 起 来 。 

【示例 1】 创 建 一 个 以 产品 名 称 作为 关键 字 、 以 价格 作为 值 的 相关 数组 。 代 码 如 下 : 

S$prices = array("Tires" =>100, "Oil"=>10, "Spark Plugs"=>4); 


关键 字 和 值 之 间 的 符号 只 是 一 个 在 大 于 号 之 前 的 等 于 符号 。 同 样 ,可 以 使 用 变量 名 称 和 关键 字 来 | 
访问 数组 的 内 容 ， 因 此 就 可 以 通过 如 下 方式 访问 保存 在 prices 数组 中 的 信息 。 

$prices["Tires"]; 

$prices[ "Oil ]: 

S$prices["Spark Plugs"]; 

【示例 2】 创 建 一 个 与 Sprices 数组 相同 的 数组 。 这 种 方法 并 不 是 创建 一 个 具有 3 个 元 素 的 数组 ， | 
而 是 创建 一 个 只 有 一 个 元 素 的 数组 ， 然 后 再 加 上 另外 两 个 元 素 。 代 码 如 下 : | 

Sprices = array("Tires" =>100): | 

S$prices["Oil"] = 10: 

Sprices["Spark Plugs"] = 4: 

与 下 面 这 段 代码 有 些 不 同 , 但 其 功能 与 以 上 代码 是 等 价 的 。 在 这 种 方法 中 ， 并 没有 明确 地 创建 一 
个 数组 。 数 组 是 在 向 这 个 数组 加 入 第 一 个 元 素 时 创建 的 。 
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Sprices["Tires"] = 100; 

Sprices["Oil"] = 10; 

$prices["Spark Plugs"] = 4: 

因为 相关 数组 的 索引 不 是 数字 , 因此 无 法 在 for 循环 语句 中 使 用 一 个 简单 的 计数 器 对 数组 进行 操作 。 


| 但 是 可 以 使 用 foreach 循环 或 list0 和 each0 结 构 。 当 使 用 foreach 循环 语句 对 相关 数组 进行 操作 时 ，foreach 


循环 具有 不 同 的 结构 。 可 以 在 前 面 的 例子 中 使 用 这 个 循环 语句 ， 也 可 以 按 如 下 方式 使 用 关键 字 。 


foreach( $prices as $key => $value) 
echo $key.=>".$value.'<br />"; 


【示例 3】 也 可 以 使 用 each0 打 印 $prices 数组 的 内 容 ， 代 码 如 下 : 


‘while($element = each($prices)){ 
echo $element['key’]: 
echo =>"; 
echo $element['value’]; 
echo '<br />"; 


以 上 脚本 段 的 输出 结果 如 图 18.2 所 示 。 











图 18.2 使 用 each0 遍 历数 组 


eachO 函 数 能 够 返回 数组 的 当前 元 素 ， 并 将 下 一 个 元 素 作为 当前 元 素 。 因 为 在 while 循环 中 调用 
each0 函 数 ， 它 将 按 顺序 返回 数组 中 每 个 元 素 ， 并 且 当 它 到 达 数 组 末尾 时 ， 循 环 操作 将 终止 。 
在 上 面 这 段 代 码 中 ， 变 量 $element 是 一 个 数组 。 当 调用 eachO 时 ， 它 将 返回 一 个 带 有 4 个 数值 和 





| 4 个 指向 数组 位 置 的 索引 的 数组 。 位 置 key 和 0 包含 了 当前 元 素 的 关键 字 ， 而 位 置 value 和 1 包含 了 


当前 元 素 的 值 。 虽 然 这 与 选 哪 一 种 方法 没什么 不 同 ， 但 选择 了 使 用 命名 位 置 ， 而 不 是 数字 索引 位 置 。 

此 外 , 还 有 一 种 更 为 高 级 和 常见 的 方式 来 完成 相同 的 操作 。 函数 list0 可 以 用 来 将 一 个 数组 分 解 为 
一 系列 的 值 。 可 以 按照 如 下 方式 将 函数 each0 返 回 的 两 个 值 分 开 : 

list($product. $price) = each($prices): 

以 上 代码 使 用 eachO 从 $prices 数组 中 取出 当前 元 素 ， 并 且 将 它 作为 数组 返回 ,然后 再 指向 下 一 个 
元 素 。 它 还 使 用 list0 将 从 each0 返 回 的 数组 中 所 包含 0、1 两 个 元 素 变 为 两 个 名 为 $product 和 $price 的 
新 变量 。 可 以 循环 遍历 整个 $prices 数组 ， 使 用 如 下 所 示 的 简短 脚本 显示 它 的 内 容 : 

Whiledist($product $price) = each($prices)) 
echo "$product => $price<br />": 
这 段 代码 的 输出 结果 与 前 面 脚本 的 输出 结果 相同 ,但 它 更 容易 阅读 , 因为 list0 人 允许 为 新 变量 命名 。 


| 需要 注意 的 一 点 是 ， 当 使 用 each0 函 数 时 ， 数 组 将 记录 当前 元 素 。 如 果 希 望 在 相同 的 脚本 中 两 次 使 用 


该 数组 ， 就 必须 使 用 函数 reset0 将 当前 元 素 重新 设置 到 数组 开始 处 。 要 再 次 遍历 prices 数组 ， 可 以 使 
用 如 下 所 示 的 代码 : 
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Teset($prices) : 
while(list($product, $price) = each($prices)) 
echo "$product => $price<br />"; 
以 上 代码 可 以 将 当前 元 素 重新 设置 到 数组 开始 处 ， 再 次 遍历 数组 。 


18.4.4 ”数组 操作 符 


只 有 一 个 特殊 的 操作 符 集 适 用 于 数组 。 这 个 集合 中 的 大 多 数 操作 符 都 有 与 之 对 应 的 标量 操作 符 ， 
如 表 18.4 所 示 。 


表 18.4 数组 操作 符 
使 用 说 明 


如 果 $a 和 $b 只 有 相同 的 元 素 以及 相同 的 大 返回 tue， 和 否 
则 返回 false 


如 果 $a 和 Sb 不 是 恒 等 的 ， 返 回 tue， 否 则 返回 false 


非 等 价 如 果 $a 和 $b 不 是 等 价 的 ， 返 回 mue， 否 则 返回 false 
这 些 操 作 符 通常 都 是 非常 直观 的 ， 但 是 联合 需要 进一步 解释 一 下 。 联 合 操作 符 尝试 将 8b 中 的 元 





现 
) 六 





素 添加 到 $a 的 末尾 。 如 果 $b 中 的 元 素 与 $a 中 的 一 些 元 素 具有 相同 的 索引 ， 它 们 将 不 会 被 添加 。 即 $a | 


中 的 元 素 将 不 会 被 覆盖 。 

在 表 18.4 中 还 可 以 看 出 ， 所 有 等 价 操作 符 都 适用 于 标量 变量 。 只 要 记 住 了 ，+ 对 标量 类 型 执行 加 
法 操作 ， 而 联合 对 数组 执行 加 法 操作 ， 即 使 你 对 集合 算术 不 感 兴趣 ， 其 行为 还 是 明了 的 。 通 常 ， 不 能 
将 数组 与 标量 类 型 进行 比较 。 
18.4.5 “多维 数组 


数组 不 一 定 就 是 一 个 关键 字 和 值 的 简单 列表 , 一 数组 中 的 每 个 位 置 还 可 以 保存 另 一 个 数组 。 使 用 


这 种 方法 ， 可 以 创建 一 个 二 维 数组 。 可 以 把 二 维 数组 当成 一 个 矩阵 ， 或 者 是 一 个 具有 宽度 和 高 度 或 者 | 


行 和 列 的 网 格 。 
【示例 1】 如 果 希 望 保存 Bob 产品 的 多 个 数据 ， 可 以 使 用 二 维 数组 。 使 用 一 个 二 维 数组 显示 了 
Bob 的 产品 ， 每 一 行 代 表 一 种 产品 ， 每 一 列 代表 一 个 产品 属性 。 使 用 PHP， 可 以 编写 如 下 代码 来 建立 
二 维 数组 。 
Sproducts =array(array( TIR "Tires'. 100). 
array( 'OIL’. ‘oil', 10). 
array( 'SPK'. 'Spark Plugs'. 4)): 
从 这 个 定义 中 可 以 看 出 $products 数组 包含 3 个 子 数 组 。 
前 面 介绍 过 , 访问 一 维 数 组 中 的 数据 时 ， 需 要 使 用 数组 的 名 称 和 元 素 的 索引 。 除 了 一 个 元 素 具 有 
两 个 索引 〈 行 和 列 ) 外， 二 维 数组 和 一 维 数组 是 类 似 的 (最 上 边 的 是 第 0 行 ， 最 左边 的 是 第 0 列 )。 
【示例 2】 要 显示 这 个 数组 的 内 容 ， 可 以 使 用 代码 按 顺 序 手动 访问 每 个 元 素 。 
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as OO 
| 


echo .Sproducts[OJ[O].T.$products[O][1] ,Sproducts[OJ[2].1<br />"; 
echo .Sproducts[1][0]..$products[1][1].".S$products[1][2].|<br />": 
echo Sproducts[2][o] .lSproducts[2][1]..Sproducts[2][21.1<br />"; 


会 内 | 【示例 3】 还 可 以 使 用 双重 for 循环 来 实现 同样 的 效果 。 
| for(Srow=0 :Srow<3:Srow+H{ 
Note | for($colum=0: Scolum<3: Scolumt-Df 
| echo 小 Sproducts[Srowj[Scolum]: 
: 9 
| echo |<br /> 
} 








| 
| 以 上 两 种 代码 都 可 以 在 浏览 器 中 产生 相同 的 输 
| 出 ， 如 图 18.3 所 示 。 

这 两 个 例子 唯一 的 区 别 就 是 ， 如 果 对 一 个 大 数 
组 使 用 第 二 种 代码 ， 那 么 代码 将 简洁 得 多 。 

【示例 4】 一 般 用 户 更 喜欢 创建 列 名 称 来 代 蔡 | 
数字 ， 要 保存 产品 的 相同 集合 ， 可 以 使 用 如 下 所 示 国 183 “二 维 数组 输出 
的 代码 : 

$products = array(array(Code' => 'TIR', 

‘Description' => 'Tires', 
‘Price’ => 100), 
array('Code' => 'OIL', 
‘Description' => 'oil', 
"Price' =>10), 
array(Code' => 'SPK'. 
‘Description' => 'Spark Plugs', 
‘Price =>4)); 

如 果 希 望 检索 单个 值 ， 那 么 使 用 这 个 数组 会 容易 得 多 。 注意, 将 所 描述 的 内 容 保 存 到 用 它 的 名 称 
命名 的 列 中 ， 与 将 其 保存 到 所 谓 的 第 一 列 中 相 比 ， 前 者 更 容易 记忆 。 使 用 描述 性 索引 ， 不 需要 记 住 某 
个 元 素 是 存放 在 [x][y] 位 置 的 。 使 用 一 对 有 意义 的 行 和 列 的 名 称 作为 索引 可 以 很 容易 找到 所 需 的 数据 ， 
但 是 却 不 能 使 用 一 个 简单 的 for 循环 按 顺 序 遍历 每 一 列 。 

【示例 5】 使 用 如 下 代码 可 以 显示 这 个 数组 内 容 : 

for ( $row = 0; $row < 3; $row++ ){ 

echo 小 Sproducts[$row]['Code']. 
小 Sproducts[$row][Description']. 
小 $products[Srow][Price].|<BR>': 











} 
【示例 6】 使 用 for 循环 遍历 外 部 的 数字 索引 数组 Sproducts。$products 数组 的 每 一 行 都 是 一 个 具 
有 描述 性 索引 的 数组 。 在 while 循环 中 使 用 eachO0 和 list0 函 数 ， 可 以 遍历 整个 内 部 数组 。 因 此 ， 需 要 
一 个 内 嵌 有 while 循环 的 for 循环 。 


| for($row=0:$row<3: $row++ ){ 

| while ( list( $key. $value ) = each( $products[ $row ] ) ){ 
| echo "|$value": 

| 

! 
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echo "|<BR>"; 
上 
不 必 局 限 在 二 维 数组 上 ， 按 同样 的 思路 ， 数 组 元 素 还 可 以 包含 新 数组 ， 这 些 新 的 数组 又 可 以 再 包 | 
含 新 的 数组 。 三 维 数组 具有 高 、 宽 、 深 的 概念 。 如 果 能 轻松 地 将 一 个 二 维 数组 想象 成 一 个 有 行 和 列 的 图 
表格 ， 那 么 就 可 以 将 三 维 数组 想象 成 一 堆 像 这 样 的 表格 。 每 个 元 素 可 以 通过 层 、 行 和 列 进行 引用 。 ” 
【示例 7】 下 面 代码 定义 了 一 个 三 维 数组 ， 三 维 数组 是 一 个 包含 了 数组 的 数组 的 数组 。 
Scategories = array( array ( array( "TIR", "Tires", 100 ), 
array( "OIL", "Oil", 10 ). 
array( "SPK", "Spark Plugs". 4) | 
» | 
array ( arTay( "TIR"、"Tires", 100 ), | 
array( "OIL", "Oil", 10 ). 
array( "SPK" "Spark Plugs". 4 ) 


) 六 








蜂 | 
array ( array( "TIR "Tires", 100 ), | 
array( "OIL", "Oil", 10 )， | 
array( "SPK" "Spark Plugs" 4 ) 
站 
x 


【示例 8】 因 为 这 个 数组 只 有 数字 索引 ， 可 以 使 用 赚 套 的 for 循环 来 显示 它 的 内 容 ， 代 码 如 下 : 


for ( $layer = 0:; $layer < 3: $layer++ ) { 

echo "Layer $layer<BR>"; 

for ( $row = 0; $row < 3; $row++ ) { 
for ( $column = 0; $column < 3; $column++ ) { 

echo "|".Scategories[$layer][Srow][$column]: 

} 
echo "|<BR>"; 

} 


E 
根据 创建 多 维 数组 的 方法 ， 可 以 创建 四 维 、 五 维 或 六 维 数组 。 在 PHP 中 ， 并 没有 设置 数组 维 数 
的 限制 , 但 一 般 很 难 设想 一 个 多 于 三 维 的 数组 。 大 多 数 的 实际 问题 在 逻辑 上 只 需要 使 用 三 维 或 者 更 少 
维 的 数组 结构 就 可 以 了 。 以 上 代码 在 浏览 器 中 输出 效 Ba Gs 
果 如 图 18.4 所 示 。 Pe je” ml | 
| 
} 


18.4.6 ”数组 排序 lil" 


对 保存 在 数组 中 的 相关 数据 进行 排序 是 一 件 非常 
有 意义 的 事情 。 使 用 并 且 排 序 一 个 一 维 数组 是 非常 简 
单 的 。 




















| [rl Pluss|d| 


【示例 1】 常 用 sort0 函 数 进行 排序 。 下 面 代码 可 图 184 三维 数 组 给 出 
以 将 数组 按 字母 升序 进行 排序 。 

$products = array( "Tires". "Oil". "Spark Plugs" ): 

sort($products): 
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现在 ， 数 组 $products 所 包含 元 素 的 顺序 是 : Oil、Spark Plugs、Tires。 
【示例 2】 还 可 以 按 数字 顺序 进行 排序 。 如 果 具 有 一 个 包含 了 Bob 产品 价格 的 数组 ， 就 可 以 按 数 
字 升 序 进行 排序 ， 如 下 所 示 : 


Sprices = array( 100, 10. 4); 
sort($prices): 


现在 ， 产 品 价格 的 顺序 将 变 成 : 4、10、100。 
< 轴 注意 : sort0 函 数 是 区 分 字母 大 小 写 的 。 所 有 的 大 写字 母 都 在 小 写字 母 的 前 面 。 所 以 A 小 于 Z， 
而 Z 小 于 a。 


sort0 函 数 的 第 二 个 参数 是 可 选 的 。 这 个 可 选 参数 可 以 传递 SORT_REGULAR (默认 值 )、SORT_ 
NUMERIC 或 SORT_STRING。 指 定 排序 类 型 的 功能 是 非常 有 用 的 ， 例 如 ， 当 要 比较 可 能 包含 有 数字 


| 2 和 12 的 字符 串 时 。 从 数字 角度 看 ，2 要 小 于 12， 但 是 作为 字符 串 ，"12" 却 要 小 于 "2"。 


也 可 以 使 用 asortO 函 数 和 ksort0 函 数 对 相关 数组 进行 排序 。 如 果 用 相关 数组 存储 各 个 项 目 和 它们 
的 价格 ， 就 需要 用 不 同 的 排序 函数 使 关键 字 和 值 在 排序 时 仍然 保持 一 致 。 

【示例 3】 创 建 一 个 包含 3 个 产品 及 价格 的 数组 ， 然 后 将 它们 按 价格 的 升序 进行 排序 。 代 码 如 下 : 

S$prices = array( "Tires"=>100, "Oil"=>10, "Spark Plugs"=>4 ): 

asort(Sprices); 

函数 asort0 根 据 数 组 的 每 个 元 素 值 进行 排序 。 在 这 个 数组 中 , 元 素 值 为 价格 而 关键 字 为 文字 说 明 。 
如 果 不 是 按 价格 排序 而 要 按说 明 排 序 ， 就 可 以 使 用 ksort0 函 数 ， 它 是 按 关键 字 排 序 而 不 是 按 值 排序 。 
这 段 代码 会 让 数组 的 关键 字 按 字母 顺序 排列 : Oil、Spark Plugs、Tires。 

S$prices = array( "Tires"=>100, "Oil"=>10, "Spark Plugs"=>4 ): 

ksort(Sprices); 

sortO、asort0 和 ksort0 这 3 个 不 同 的 排序 函数 都 使 数组 按 升序 排序 。 同 时 它们 每 个 都 对 应 有 一 个 
反 向 排序 的 函数 ， 可 以 将 数组 按 降序 排序 。 实 现 反 向 排序 的 函数 是 rsortD、arsort0 和 krsort()。 

反 向 排序 函数 与 排序 函数 的 用 法 相同 。 函 数 rsort0 将 一 个 一 维 数字 索引 数组 按 降 序 排序 。 函 数 
arsort0 将 一 个 一 维 相关 数组 按 每 个 元 素 值 的 降序 排序 。 函 数 krsort0 将 根据 数组 元 素 的 关键 字 将 一 维 
数组 按照 降序 排序 。 

对 多 于 一 维 的 数组 进行 排序 ， 或 者 不 按 字母 和 数字 的 顺序 进行 排序 ， 要 复杂 得 多 。PHP 知道 如 何 
比较 两 个 数字 或 字符 串 ， 但 在 多 维 数组 中 ， 每 个 元 素 都 是 一 个 数组 。PHP 不 知道 如 何 比较 两 个 数组 ， 
所 以 需要 建立 一 个 比较 它们 的 方法 。 在 大 多 数 情况 下 ， 单 词 和 数字 的 顺序 是 显而易见 的 ， 但 对 于 复杂 
的 对 象 ， 问 题 就 会 多 一 些 。 

【示例 4】 下 面 的 示例 定义 了 一 个 二 维 数 组 。 这 个 数组 存储 了 3 种 产品 的 代码 、 说 明和 价格 。 

Sproducts = array( array( "TIR", "Tires". 100 )、 

array( "OIL". "Oil". 10 ). 
array( "SPK" "Spark Plugs". 4 ) ): 

如 果 对 这 个 数组 进行 排序 ， 最 后 的 顺序 会 是 怎样 呢 ? 因为 知道 各 个 数组 内 容 所 代表 的 意义 ， 所 以 
至 少 会 有 两 种 有 用 的 排序 方法 。 可 能 对 产品 的 说 明 按 字母 排序 ， 或 者 对 价格 按 大 小 排序 。 两 种 结果 都 有 
可 能 ， 但 需要 用 函数 usort0 告 诉 PHP 如 何 比较 各 个 元 素 。 要 实现 此 功能 ， 需 要 编写 自己 的 比较 函数 。 

【示例 5】 下 面 代码 对 订单 数组 中 的 第 二 列 说 明 ， 按 字母 进行 排序 : 
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function compare($x, $y){ 

ff( $x[1] =— $y[1] ) 
Teturmn 0; 

clse if ( $x[1] < $y[1] ) 
Tetum -1; 

else 
Tetum 1; 

b 

usort($products, "compare"): 

在 这 个 例子 中 ， 函 数 被 命名 为 compare0。 许 多 函数 都 带 有 参数 。compare0 函 数 有 两 个 参数 : 一 
个 为 Sx， 另 一 个 为 8y。 该 函数 的 作用 是 比较 两 个 值 的 大 小 。$x 和 $y 将 是 主 数组 中 的 两 个 子 数 组 ， 分 
别 代 表 一 种 产品 。 因 为 计数 是 从 0 开始 的 ， 说 明 字段 是 这 个 数组 的 第 二 个 元 素 ， 所 以 为 了 访问 数组 $x 
的 说 明 字段 ， 需 要 输入 $x[1] 和 $y[1] 来 比较 两 个 传递 给 函数 的 数组 的 说 明 字段 。 

当 一 个 函数 结束 时 ， 它 会 给 调用 它 的 代码 一 个 答复 。 该 答复 称 为 返回 值 。 为 了 返回 一 个 值 ， 在 函 
数 中 使 用 关键 词 retum。 例 如 ，return 1; 该 语句 将 数值 1 返回 给 调用 它 的 代码 。 

为 了 能 够 被 usort0 函 数 使 用 ，compare0 函 数 必须 比较 $x 和 $y。 如 果 $x 等 于 Sy， 该 函数 必须 返回 
0; 如 果 $x 小 于 $y， 该 函数 必须 返回 负数 ， 而 如 果 $x 大 于 $y， 则 返回 一 个 正 数 。 根 据 $x 和 $y 的 值 ， 
该 函数 将 返回 0、1 或 -1。 

以 上 代码 的 最 后 一 行 语句 调用 了 内 置 函数 usort0， 该 函数 使 用 的 参数 分 别 是 希望 保存 的 数组 
(Sproducts) 和 比较 函数 的 名 称 字符 串 。 

【示例 6】 如 果 要 让 数组 按 另 一 种 顺序 存储 ， 只 要 编写 一 个 不 同 的 比较 函数 即 可 。 要 按 价格 进行 
排序 ， 就 必须 查看 数组 的 第 三 列 ， 从 而 创建 如 下 所 示 的 比较 函数 。 

function compare($x, $y){ 

if( $x[2] =— $y[2] ) 
return 0; 

else if ( $x[2] < $y[2] ) 
retum -1; 

else 
retum 1; 

} 

当 调 用 usort($products, "compare") 时 ， 数 组 将 按 价格 的 升序 来 排序 。 

usort0 中 的 “u” 代 表 “user”， 因 为 这 个 函数 要 求 传 入 用 户 定义 的 比较 函数 。asort 和 ksort 对 应 的 
版 本 uasort0 和 uksort0 也 要 求 传 入 用 户 定义 的 比较 函数 。 

类 似 于 asort0， 当 对 非 数字 索引 数组 的 值 进行 排序 时 ，uasortO 才 会 被 使 用 。 如 果 值 是 简单 的 数字 
或 文本 ， 则 可 以 使 用 asort。 如 果 要 比较 的 值 像 数 组 一 样 复杂 ， 可 以 定义 一 个 比较 函数 ， 然 后 使 用 
uasort(O 。 

类 似 于 ksort0， 当 对 非 数字 索引 数组 的 关键 字 进 行 排序 时 才 使 用 uksort0。 如 果 值 是 简单 的 数字 
或 文本 就 使 用 ksort。 如 果 要 比较 的 对 象 像 数 组 一 样 复杂 ， 可 以 定义 一 个 比较 函数 ,然后 使 用 uksortO 。 

sort0、asort0 和 ksort0 函 数 都 分 别 对 应 一 个 带 字母 “r” 的 反 向 排序 函数 。 用 户 定义 的 排序 没有 反 
向 变 体 , 但 可 以 对 一 个 多 维 数 组 进行 反 向 排序 。 由 于 用 户 应 该 提供 比较 函数 ， 因 此 可 以 编写 一 个 能 够 
返回 相反 值 的 比较 函数 。 

【示例 7】 要 进行 反 向 排序 ，S$x 小 于 $y 时 函数 需要 返回 1，$x 大 于 $y 时 函数 需要 返回 -1， 这 样 
就 做 成 了 一 个 反 向 排序 。 














"667 *» 








~ 避 贡 设计 与 网 站 建设 从 入 门 到 精通 


function reverseCompare($x, $y){ 
f( $x[2] — $y[2] ) 
Teturmn 0; 
elseif ( $x[2] < $y[2] ) 


8 | retum 1: 
于 丰 | else 


| } 


| 
调用 usort($products, "reverseCompare") 时 ， 数 组 会 按 价格 的 降序 来 排序 。 
在 一 些 应 用 程序 中 ， 可 能 希望 按 男 一 种 方式 式 对 数组 排序 。 函 数 shuffle0 将 数组 各 元 素 进行 随机 
排序 。 函 数 array_reverse0 给 出 一 个 原来 数组 的 反 向 排序 。 


18.4.7 数组 其 他 操作 


前 面 已 经 提 到 ， 每 个 数组 都 有 一 个 内 部 指针 指向 数组 中 的 当前 元 素 。 当 使 用 函数 eachO 时 ， 就 间 
接地 使 用 了 这 个 指针 ， 但 是 也 可 以 直接 使 用 和 操作 这 个 指针 。 
如 果 创 建 一 个 新 数组 ， 那 么 当前 指针 就 将 被 初始 化 ， 并 指向 数组 的 第 一 个 元 素 。 调 用 current 
($array_name) 将 返回 第 一 个 元 素 。 
调用 next0 或 each0 将 使 指针 前 移 一 个 元 素 。 调 用 each($array_name) 会 在 指针 前 移 一 个 位 置 之 前 返 
回 当前 元 素 。next0 函 数 则 有 些 不 同 ， 调 用 next(Sarray_name) 是 将 指针 前 移 ， 然 后 再 返回 新 的 当前 元 素 。 
使 用 reset0 函 数 将 返回 指向 数组 第 一 个 元 素 的 指针 。 类 似 地 ， 调 用 end($array_name) 可 以 将 指针 
移 到 数组 末尾 。reset0 和 end0 可 以 分 别 返 回 数 组 的 第 一 个 元 素 和 最 后 一 个 元 素 。 
要 反 向 遍历 一 个 数组 ,可 以 使 用 end0 和 prev0 函 数 。prev0 函 数 和 nextO 函 数 相反 ， 它 是 将 当前 指 
针 往 回 移 一 个 位 置 然后 再 返回 新 的 当前 元 素 。 
【示例 1】 如 下 所 示 的 代码 将 反 向 显示 一 个 数组 的 内 容 。 
S$value = end ($array): 
while ($value){ 
echo "$value<br>"; 
$value = prev($array): 














} 

如 果 $array 数组 的 声明 如 下 : 

Sarray = array(1. 2. 3): 

在 这 个 例子 中 ， 浏 览 器 中 的 输出 结果 就 会 是 : 3、2、1。 

使 用 eachO0、currentO、reset0、end0、nextO0、pos0 和 prev0， 可 以 编写 出 自己 的 、 能 按 任 何 顺序 
浏览 数组 的 代码 。 

有 时 候 ， 读 者 可 能 希望 以 相同 方式 使 用 或 者 修改 数组 中 的 每 一 个 元 素 。array_walk0 函 数 允 许 进 
行 这 样 的 操作 。 函 数 array_walk0 的 原型 如 下 : 

int array_walk(array arr. string func. [mixed userdata]) 
其 调用 方法 类 似 于 usort0 函 数 的 调用 ，array_walk0 函 数 需 要 3 个 参数 。 第 一 个 是 ar， 也 就 是 需 
要 处 理 的 数组 。 第 二 个 是 fune， 也 就 是 用 户 自 定义 并 将 作用 于 数组 中 每 个 元 素 的 函数 。 第 三 个 参数 
| userdata 是 可 选 的 ， 如 果 使 用 它 ， 它 可 以 作为 一 个 参数 传递 给 自己 的 函数 。 
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【示例 2】 这 个 用 户 自 定义 函数 是 一 个 以 指定 格式 显示 各 个 元 素 的 函数 。 如 下 所 示 的 代码 通过 在 
$array 数组 的 每 个 元 素 中 调用 用 户 自 定义 的 my_print0 函 数 ， 从 而 将 每 个 元 素 显示 在 一 个 新 行 中 。 
function myPrint($value){ ! 
echo "$value<BR>"; | 图 
} | 一 
array_ Walk($array. myPrinb: 
对 于 数组 中 的 每 个 元 素 ，array_wakk 将 以 关键 字 和 保存 在 数组 中 的 值 为 参数 ， 此 外 ， 还 可 以 以 任 | 
何 数据 作为 该 函数 的 userdata 参数 。 可 以 按 如 下 方式 调用 函数 : 
Yourfunction(value, key. userdata) 
在 大 多 数 情况 下 ， 函 数 只 能 处 理 数组 中 的 值 。 但 是 ， 在 某 些 情况 下 ， 可 能 还 需要 使 用 userdata 参 
数 向 函数 传递 一 个 参数 。 在 少数 情况 下 ， 可 能 还 需要 对 数组 关键 字 和 值 进行 处 理 。 在 MyPrint0 函 数 
中 ， 可 以 忽略 关键 字 参 数 和 userdata 参数 。 
【示例 3】 编 写 一 个 带 有 一 个 参数 的 函数 ， 这 个 函数 可 以 用 来 修改 数组 的 值 。 


function myMultiply(&$value, $key, $factor){ 
$value *= $factor; 


) 六 





array_Walk($array "myMultiply", 3): 

在 上 面 代码 中 定义 了 一 个 名 为 my_multiplyO 的 函数 , 它 可 以 用 所 提供 的 乘法 因子 去 乘 以 数组 中 的 
每 个 元 素 。 需 要 使 用 array_walkO 函 数 的 第 三 个 参数 来 传递 这 个 乘法 因子 。 因 为 需要 这 个 参数 ， 所 以 
在 定义 my_multiplyO 函 数 时 必须 带 有 3 个 参数 一 一 一 个 数组 元 素 值 ($value)、 一 个 数组 元 素 的 关键 
字 ($key) 和 参数 ($factor)。 可 以 选择 忽略 这 个 关键 字 。 

此 外 ,还 有 一 个 需要 注意 的 问题 是 传递 参数 $value 的 方式 。 在 my_multiply0 的 函数 定义 中 ， 变量 
前 面 的 地 址 符 〈&) 意味 着 $value 是 按 引用 方式 传递 的 。 按 引用 方式 传递 允许 函数 修改 数组 的 内 容 。 

函数 sizeofO 可 以 返回 数组 元 素 的 个 数 。 可 以 得 到 一 个 常规 标量 变量 中 的 元 素 个 数 ， 如 果 传 递 给 | 
这 个 函数 的 数组 是 一 个 空 数组 ， 或 者 是 一 个 没有 经 过 设 定 的 变量 ， 返 回 的 数组 元 素 个 数 就 是 0。 

函数 array_count_ values0 更 加 复杂 一 些 。 如 果 调 用 array_count values($array)， 这 个 函数 将 会 统计 
每 个 特定 的 值 在 数组 $array 中 出 现 过 的 次 数 〈 这 就 是 数组 的 基数 集 )。 这 个 函数 将 返回 一 个 包含 频率 
表 的 相关 数组 。 这 个 数组 包含 数组 $array 中 的 所 有 值 ， 并 以 这 些 值 作为 相关 数组 的 关键 字 。 每 个 关键 
字 所 对 应 的 数值 就 是 关键 字 在 数组 Sarray 中 出 现 的 次 数 。 

【示例 4】 创 建 数组 。 

Samay =array(4, 5, 1, 2.3, 1.2. 1); 

$ac = array_count_values($array): 


将 创建 一 个 名 为 $ac 的 数组 ， 该 数组 包括 : 











其 结果 表示 数值 4、5、3 在 数组 $array 中 只 出 现 一 次 ，1 出 现 了 3 次 ，2 出 现 了 两 次 。 





关键 字 (Key) 值 (Value) 

4 I 

5 1 | 
1 3 | 
多 2 | 
3 1 | 
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对 于 一 个 非 数字 索引 数组 ， 该 数组 会 有 许多 关键 字 : 名 值 对 ， 可 以 使 用 函数 extract0 将 它们 转换 
成 一 系列 的 标量 变量 。extract0 的 函数 原型 如 下 : 
可 extract(array Var_array [. int extract type] [. string prefix] ); 

全 ~ | 【示例 5】 函 数 extract0 的 作用 是 通过 一 个 数组 创建 一 系列 的 标量 变量 ， 这 些 变量 的 名 称 必须 是 
Note | 数组 中 关键 字 的 名 称 ， 而 变量 值 则 是 数组 中 的 值 。 

| S$array = array( "key1" => "valuel" "key2" => "value2", "key3" => "value3"): 
extract($array): 
echo "$keyl $key2 $key3"; 
这 段 代 码 的 输出 如 下 : 

valuel value2 value3 


这 个 数组 具有 3 个 元 素 ， 它 们 的 关键 字 分 别 是 key1、key2 和 key3。 使 用 函数 extract0， 可 以 创 
建 3 个 标量 变量 Skey1、S$key2 和 $key3。 从 输出 结果 中 ， 可 以 看 到 $Skey1、S$key2 和 $key3 的 值 分 别 为 
“valuel”、“value2” 和 “value3”。 这 些 值 都 来 自 原来 的 数组 。 

extract0 函 数 具 有 两 个 可 选 参 数 ， extract_type 和 prefix。 变 量 extract_type 将 告诉 extract0 函 数 如 何 
处 理 冲突 。 有 时 可 能 已 经 存在 了 一 个 和 数组 关键 字 同 名 的 变量 ， 该 函数 的 默认 操作 是 覆盖 已 有 的 变量 。 


18.5 正则 表达 式 


PHP 支持 两 种 风格 的 正则 表达 式 语法 : POSIX 和 Perl。 这 两 种 风格 的 正则 表达 式 是 PHP 编译 时 
的 默认 风格 。 在 PHP 5.3 版 本 中 ，Perl 风格 不 能 被 禁用 。 人 然而， 这 里 将 介绍 更 简单 的 POSIX 风格 ,但 
如 果 你 已 经 是 一 位 Perl 程序 员 , 或 者 希望 了 解 更 多 关于 PCRE 的 内 容 , 可 以 阅读 在 线 手册 : http://www. 
php.net/pcre。 

到 目前 为 止 ， 进 行 的 所 有 模式 匹配 都 使 用 了 字符 串 函 数 。 只 限于 进行 精确 匹配 ， 或 精确 的 子 字符 
串 匹 配 。 如 果 和 希望 完成 一 些 更 复杂 的 模式 匹配 ， 应 该 用 正则 表达 式 。 正 则 表达 式 在 开始 时 很 难 掌握 ， 
但 却 是 非常 有 用 的 。 


18.5.1 字符 类 


正则 表达 式 是 一 种 描述 一 段 文本 模式 的 方法 。 到 目前 为 止 ， 前 面 所 用 到 过 的 精确 〈 文 字 ) 匹配 也 
是 一 种 正则 表达 式 。 例 如 ， 前 面 曾 搜索 过 正则 表达 式 的 术语 ， 如 shop 和 delivery。 

在 PHP 中 ， 匹 配 正 则 表达 式 更 有 点 像 ststr0 匹 配 ， 而 不 像 相 等 比较 ， 因 为 是 在 一 个 字符 串 的 某 
个 位 置 (如果 不 指明 ， 则 可 能 在 字符 串 中 的 任何 位 置 ) 匹 配 另 一 个 字符 串 。 例 如 ， 字 符 串 "shop" 匹 配 
正则 表达 式 shop。 它 也 可 以 匹配 正则 表达 式 h、ho 等 。 

除了 精确 匹配 字符 外 ， 还 可 以 用 特殊 字符 来 指定 表达 式 的 元 意 。 例 如 ， 使 用 特殊 字符 ， 可 以 指定 
一 个 在 字符 串 开 始 或 末尾 肯定 存在 的 模式 , 该 模式 的 某 部 分 可 能 被 重复 , 或 模式 中 的 字符 属于 特定 的 
某 一 类 型 。 此 外 ， 还 可 以 按 特殊 字符 的 出 现 来 匹配 。 

使 用 字符 集 可 以 马上 给 出 比 精确 匹配 功能 还 要 强大 的 正则 表达 式 。 字符 集 可 以 用 于 匹配 属于 特定 
类 型 的 任何 字符 ， 事 实 上 它们 是 一 种 通配符 。 
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| 

首先 ,可 以 用 字符 作为 一 个 通配符 来 代 葵 除 换行 符 (n) 之 外 的 任 一 个 字符 。 例 如 ， 正 则 表达 式 ，| 

at | 

可 以 与 cat、sat 和 mat 等 进行 匹配 。 通常 ， 这 种 通配符 匹配 用 于 操作 系统 中 的 文件 名 匹配 。 但 是 ， | 

使 用 正则 表达 式 ， 可 以 更 具体 地 指明 希望 匹配 的 字符 类 型 ， 而 且 可 以 指明 字符 所 属 的 一 个 集合 。 在 前 | 

面 的 例子 中 ， 正 则 表达 式 匹配 cat 和 mat， 但 也 可 以 匹配 #at。 如 果 要 限定 它 是 a 到 z 之 间 的 字符 ， 就 
可 以 像 下 面 这 样 指明 : 

[a-z]at | 

任何 包含 在 方 括号 中 的 内 容 都 是 一 个 字符 类 ， 一 个 被 匹配 字符 所 属 的 字符 集合 。 注 意 ， 方 括号 中 | 

| 

| 





的 表达 式 只 匹配 一 个 字符 。 可 以 列 出 一 个 集合 ， 例 如 : 
[aeiou] 
可 以 用 来 表示 元 音 子 母 。 也 可 以 描述 一 个 范围 ， 正 如 前 面 用 连 字 符 那样 ， 也 可 以 是 一 个 范围 集 : 
[a-zA-Z] 


这 个 范围 集 代表 任何 的 大 小 写字 母 。 
此 外 ， 还 可 以 用 集合 来 指明 字符 不 属于 某 个 集 。 例 如 : 


['a-z] 


可 以 用 来 匹配 任何 不 在 a 和 z 之 间 的 字符 。 当 把 脱 字符 号 〈^) 包括 在 方 括号 里 面 时 ， 表 示 和 否定 
排出 的 意思 。 
除 列 出 了 集合 和 范围 ， 许 多 预定 义 字符 类 也 可 以 在 正则 表达 式 中 使 有 用， 简单 说 明 如 下 。 
[[:alnum:]]: 文字 数字 字符 。 
[[:alpha:]]: 字母 字符 。 
[[:lower:]]: 小 写字 母 。 
[Cupper]]: 大 写字 母 。 
[[:digit]]: 小 数 。 
[[:xdigit:]]: 十 六 进 制 数字 。 
[[punet]]: 标点 符号 。 
[[:blank:]]: 制 表 符 和 空格 。 
[Cspace:]]: 空白 字符 。 
[[:entrl:]]: 控制 符 。 
[[:print:]]: 所 有 可 打印 的 字符 。 
[[:graph:]]: 除了 空格 外 所 有 可 打印 字符 。 


18.5.2 重复 


很 多 时 候 , 会 希望 指明 某 个 字符 串 或 字符 类 将 不 止 一 次 地 出 现 。 可 以 在 正则 表达 式 中 使 用 两 个 特 
殊 字 符 代 蔡 。 符 号 “* ”表示 这 个 模式 可 以 被 重复 0 次 或 更 多 次 ， 符 号 “+” 则 表示 这 个 模式 可 以 被 重 
复 1 次 或 更 多 次 。 这 两 个 符号 应 该 放 在 要 作用 的 表达 式 的 后 面 。 例 如 : 

[[:alnum:]]+ 

表示 至 少 有 一 个 字母 字符 。 





加 


加 回回 回回 加 回回 罗网 加 
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18.5.3 ， 子 表达 式 

通常 ， 将 一 个 表达 式 分 隔 为 几 个 子 表 达 式 是 非常 有 用 的 ， 例 如 ， 可 以 表示 “至 少 这 些 字符 串 中 的 
一 个 需要 精确 匹配 ?>。 可 以 使 用 圆 括号 来 实现 ， 与 在 数学 表达 式 中 的 方法 一 样 。 例 如 : 

(very ylarge 

可 以 匹配 large、very large、very very large 等 。 


18.5.4” 子 表达 式 计数 


可 以 用 在 花 括 号 (f}) 中 的 数字 表达 式 来 指定 内 容 允 许 重复 的 次 数 。 可 以 指定 一 个 确切 的 重复 次 
数 ， 如 {3} 表 示 重 复 3 次 。 也 可 以 指定 一 个 重复 次 数 的 范围 ,如 {2,4} 表示 重 复 2~4 次 。 还 可 以 指定 一 














| 个 开 底 域 的 重复 范围 ， 如 {2,} 表 示 至 少 要 重复 两 次 。 例 如 : 





(very ){1, 3} 
表示 匹配 very、very very 和 very very very。 


18.5.5 定位 


[a-z] 模 式 将 匹配 任何 包含 了 小 写字 母 字符 的 字符 串 。 无 论 该 字符 串 只 有 一 个 字符 ， 或 者 在 整个 更 
长 的 字符 串 中 只 包含 一 个 匹配 的 字符 ， 都 没有 关系 。 

也 可 以 确定 一 个 特定 的 子 表达 式 是 否 出 现在 开始 、 末 尾 或 在 两 个 位 置 都 出 现 。 当 要 确定 字符 串 中 
只 有 要 找 的 单词 而 没有 其 他 单词 出 现时 ， 它 将 相当 有 用 。 

脱 字符 号 (^) 用 于 正则 表达 式 的 开始 , 表示 子 字符 串 必 须 出 现在 被 搜索 字符 串 的 开始 处 , 字符 8 用 
于 正则 表达 式 的 末尾 ， 表 示 子 字符 串 必 须 出 现在 字符 串 的 末尾 。 

【示例 】 以 下 是 在 字符 串 开 始 处 匹配 bob: 

^bob 

这 个 模式 将 匹配 com 出 现在 字符 串 末尾 处 的 字符 串 : 

comy 

最 后 ， 这 个 模式 将 匹配 只 包含 a 到 z 之 间 一 个 字符 的 字符 串 : 

^[a-z]$ 


18.5.6 分 支 


可 以 使 用 正则 表达 式 中 的 一 条 竖 线 来 表示 一 个 选择 。 例 如 ， 如 果 要 匹配 com、edu 或 net， 就 可 以 
使 用 如 下 所 示 的 表达 式 : 
(com)l(edu)l(net) 


18.5.7 ”特殊 字符 


如 果 要 匹配 特殊 字符 ， 如 .、{ 或 者 $8， 就 必须 在 它们 前 面 加 一 个 反 斜 杠 \\)。 如 果 要 匹配 一 个 反 
斜 杠 ， 则 必须 用 两 个 反 斜 杠 (\) 来 表示 。 
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在 PHP 中 ， 必 须 将 正则 表达 式 模式 包括 在 一 个 单 引号 字符 串 中 。 使 用 双 引号 引用 的 正则 表达 式 
将 带 来 一 些 不 必要 的 复杂 性 。PHP 还 使 用 反 斜 杠 来 转 义 特殊 字符 ， 例 如 反 斜 杠 。 

如 果 希 望 在 模式 中 匹配 一 个 反 斜 杠 ， 必 须 使 用 两 个 反 斜 杠 来 表示 它 是 一 个 反 斜 杠 字符 ， 而 不 是 一 | 
个 转 义 字符 。 | 

同样 ， 由 于 相同 的 原因 ， 如 果 希 望 在 一 个 双 引 号 引用 的 PHP 字符 串 中 使 用 反 斜 杠 字符 ， 必 须 使 | 
用 两 个 反 斜 本 。 这 可 能 会 有 些 混淆 ,这样 要 求 的 结果 将 是 表示 一 个 包含 了 反 斜 杠 字符 的 正则 表达 式 的 
一 个 PHP 字符 串 需要 4 个 反 斜 杠 。PHP 解释 器 将 这 4 个 反 斜 杠 解释 成 两 个 。 然 后 ， 由 正则 表达 式 解 | 
释 器 解析 为 一 个 。 

8 符号 也 是 双 引 号 引用 的 PHP 字符 串 和 正则 表达 式 的 特殊 字符 。 要 使 一 个 字符 能 够 在 模式 中 匹 
配 ， 必 须 使 用 \$。 因 为 这 个 字符 串 被 引用 在 双 引 号 中 ，PHP 解释 器 将 其 解析 为 %， 而 正则 表达 式 解释 
器 将 其 解析 成 一 个 $ 字 符 。 

加 ”在 POSIX 正则 表达 式 中 ， 用 于 方 括号 外 面 特殊 字符 。 

> 、\、: 转 义 字符 。 | 
^ :在 字符 串 开始 匹配 。 | 
$: 在 字符 串 结尾 匹配 。 | 
: 匹配 任意 字符 ， 除 了 换行 符 外 (m) 。 
: 选择 分 支 的 开始 。 
: 子 模式 的 开始 。 
: 子 模式 的 结束 。 
: 重复 零 次 或 者 多 次 。 
: 重复 一 次 或 者 多 次 。 
: 最 小 或 者 最 大 量 记号 的 开始 。 
: 最 小 或 者 最 大 量 记号 的 结束 。 
在 POSIX 正则 表达 式 中 ， 用 于 方 括号 里 面 特 殊 字符 。 
> \: 转 义 字符 。 
> “: 非 ， 仅 用 在 开始 位 置 。 
> ”-: 用 于 指明 字符 范围 。 


18.5.8 设计 智能 表单 


在 智能 表单 应 用 程序 中 , 正则 表达 式 至 少 有 两 种 用 途 。 第 一 种 用 途 是 在 顾客 的 反馈 中 查找 特定 的 
名 词 。 使 用 正则 表达 式 ， 可 以 做 得 更 智能 一 些 。 使 用 一 个 字符 串 函 数 ， 如 果 希 望 匹配 shop 、customer 
service 或 retail， 就 必须 做 3 次 不 同 的 搜索 。 如 果 使 用 一 个 正则 表达 式 ， 就 可 以 同时 匹配 所 有 3 个 ， 
如 下 所 示 : 

‘shoplcustomer servicelretail 

第 二 个 用 途 是 验证 程序 中 用 户 的 电子 邮件 地 址 , 这 需要 通过 用 正则 表达 式 来 对 电子 邮件 地 址 的 标 
准 格式 进行 编码 。 这 个 格式 中 包含 一 些 数字 或 标点 符号 ， 接 着 是 符号 “@”， 然后 是 包括 文字 或 数字 
和 字符 组 成 的 字符 串 ， 后 面 接着 是 一 个 “.”( 点 号 )， 后 面包 括 文字 或 数字 以 连 字符 组 成 的 字符 串 ， 
可 能 还 有 更 多 的 点 号 ， 直 到 字符 串 结束 ， 它 的 编码 如 下 : 

A[a-zA-Z0-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\.]+$ 








VYvYvvvvvyvyvyv 
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“673 





可 / 岗 计 设计 与 网 站 建设 从 入门 到 精通 

子 表达 式 *[a-zA-Z0-9 二 表示 至 少 由 一 个 字母 、 数 字 、 下 划 线 、 连 字符 、 点 号 或 者 这 些 字符 组 台 
为 开始 的 字 答 串 。 注 意 ， 当 在 一 个 字符 类 的 开始 或 未 尾 处 使 用 点 号 时 ， 点 号 将 失去 其 特殊 通配符 的 意 
义 ， 只 能 成 为 一 个 点 号 字符 。 

符号 @ 匹 配 字符 @。 

而 子 表达 式 -zA-Z0-9vj+ 与 包含 文字 数字 字符 和 连 字符 的 主机 名 匹配 。 注意， 去 除了 连 字 符 , 因 
为 它 是 方 括号 内 的 特殊 字符 。 

字符 组 合 “\” 匹配 “.” 字符 。 在 字符 类 外 部 使 用 点 号 ， 因 此 必须 对 其 转 义 ， 使 其 能 够 匹配 一 个 





| 点 号 字符 。 


子 表达 式 [azA-Z0-9v\]+S 匹 配 域名 的 剩 下 部 分 ， 它 包含 字母 、 数 字 和 连 字符 ， 如 果 需 要 还 可 包含 
更 多 的 点 号 直到 字符 串 的 末尾 。 

不 难 发 现 ， 有 时 一 个 无 效 的 电子 邮件 地 址 也 会 符合 这 个 正则 表达 式 , 找到 所 有 无 效 电 子 邮 件 几乎 
是 不 可 能 的 ,但 是 经 过 分 析 ， 情 形 将 会 有 所 改善 。 可 以 按 许 多 不 同 的 方式 精 化 这 个 表达 式 。 例如， 可 
以 列 出 所 有 有 效 的 顶级 域 。 


18.5.9 查找 子 字符 串 


查找 字符 串 是 正则 表达 式 的 主要 应 用 。 在 PHP 中 ， 可 以 使 用 正则 表达 式 的 两 个 函数 : ereg0 和 
eregiO。ereg 0 函数 的 基本 用 法 如 下 : 


int ereg(string pattern, string search., array [matches]): 


该 函数 搜索 字符 串 search， 在 pattern 中 寻找 与 正则 表达 式 相 匹配 的 字符 串 。 如 果 发 现 了 与 pattern 
的 子 表达 式 相 匹 配 的 字符 串 , 这 些 字符 串 将 会 存储 在 数组 matches 中 , 每 个 数组 元 素 对 应 一 个 子 表达 式 。 

函数 eregi0 除 了 不 区 分 大 小 写 外 ， 其 他 功能 与 ereg0 一 样 。 

【示例 】 可 以 使 用 如 下 所 示 的 代码 对 智能 表单 例子 进行 修改 : 


if (!eregi("^[a-zA-20-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$". $email)){ 
echo "That is not a valid email address. Please return to the"." previous page and try again."; 
exit: 

H 

S$toaddress = "feedback@bobsdomain.com": // the default value 

if (eregi("shoplcustomer servicelretail". $feedback)) 
S$toaddress = "retail@bobsdomain.com": 

else if (eregi("deliver.*|fulfil.*", $feedback)) 
S$toaddress = "fulfilment@bobsdomain.com": 

else if (eregi("billlaccount", $feedback)) 
S$toaddress = "accounts@bobsdomain.com": 

if (eregi("bigcustomer\.com". $email)) 
S$toaddress = "bob@bobsdomain.com": 


18.5.10 ”替换 子 字 符 串 
与 前 面 使 用 的 str_replace0 函 数 一 样 ， 也 可 以 使 用 正则 表达 式 来 查找 和 蔡 换 子 字符 串 。 在 正则 表 


| 达 式 中 ， 可 以 使 用 的 两 个 函数 是 ereg_replace0 和 eregi_replace()， 基 本 用 法 如 下 : 


string ereg_replace(string pattern. string replacement. string search): 
该 函数 在 字符 串 search 中 查找 正则 表达 式 pattern 的 字符 串 ， 并 且 用 字符 串 replacement 来 蔡 换 。 
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| 
函数 eregi_ replace0 除 了 不 区 分 大 小 写 外 ， 其 他 与 ereg_replace0 相 同 。 | 
| 
18.5.11 “分 割 字符 串 | 
另 一 个 实用 的 正则 表达 式 函 数 是 split0， 基 本 用 法 如 下 : | 名 
| 
array split(string pattem, string search, int [max]): 








这 个 函数 将 字符 串 search 分 割 成 符合 正则 表达 式 模式 的 子 字符 串 , 然后 将 子 字 符 串 返 回 到 一 个 数 | 
组 中 。 整 数 max 指定 进入 数组 中 的 元 素 个 数 。 

【示例 】 访 函数 对 分 割 电子 邮件 地 址 、 域 名 或 日 期 是 非常 有 用 的 。 

$domain = "yallara.cs.rmit.edu.au": 

Sarr = split (™\.", $domain): 

while (list(Skey, $value) = each (SamD) 

echo "<br>".$value; | 

以 上 代码 将 主机 分 割 为 5 个 部 分 ， 并 将 它们 分 别 输出 到 一 行 。 | 

一 般 而 言 ， 对 于 同样 的 功能 ， 正 则 表达 式 函 数 运行 效率 要 低 于 字符 串 函 数 。 如 果 应 用 程序 足够 简 | 
单 ， 那 么 就 用 字符 串 表达 式 。 但 是 ， 对 于 可 以 通过 单个 正则 表达 式 执行 的 任务 来 说 ， 如 果 使 用 多 个 字 
符 串 函数 ， 则 是 不 对 的 。 
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访问 MySQL 数据 库 
( 号 视频 讲解 ，115 分 钟 ) 


PHP+HMySQL 是 目前 最 为 成 熟 、 稳 定 、 安 全 的 企业 级 网 站 开发 技术 ， 广 泛 应 用 于 超大 型 站 
点 ， 如 百度 网 站 ( www.baidu.com/index.php )。 基 成熟 的 架构 、 稳 定 的 性 能 、 谋 入 式 开发 方式 、 
简洁 的 语法 ， 能 够 帮助 用 户 迅速 开发 高 效 执行 、 安 全 可 千 、 可 路 平 台 移 植 、 无 附加 成 本 的 商业 
网 站 。 

Linux 操作 系统 、Apache 网 络 服务 器 、MYSQL 数据 库 、PHP 语言 构成 了 Web 开发 的 最 佳 
组 合 ， 也 称 为 LAMP 模式 。 在 LAMP 模式 开发 中 , MYSQL 数据 库 和 PHP 语言 又 是 所 有 技术 的 


开发 核心 ， 本 章 将 详细 介绍 MySQL 数据 库 入 门 知识 ， 以 及 最 基本 的 读 写 操作 。 


【 学 习 重 点 】 

MH 认识 MySQL 

操作 MYSQL 服务 器 
使 用 命令 行 语句 访问 MySQL 
使 用 PHP 访问 MySQL 


吾 吾 吾 





MySQL (www.mysql.com) 是 一 种 关系 型 数据 库 管理 系统 ， 为 瑞典 MySQL AB 公司 开发 。2008 | 
年 被 SUN 公司 收购 ，2009 年 SUN 又 被 Oracle 收购 。 目 前 ，MySQL 被 广泛 地 应 用 在 互联 网 上 的 大 中 | 
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19.1 认识 MySQL 


型 网 站 中 。 | 
由 于 其 体积 小 、 速 度 快 ， 总 体 拥有 成 本 低 ， 尤 其 是 开放 源码 这 一 特点 ， 许 多 中 小 型 网 站 为 了 降低 | 
网 站 总 体 拥有 成 本 而 选择 了 MySQL 作为 网 站 数据 库 。MySQL 具有 如 下 特点 。 


功能 强大 : MySQL 提供 了 多 种 数据 库存 储 引 擎 ， 各 种 引擎 各 有 所 长 ， 适 用 于 不 同 的 应 用 场 
合 ， 用 户 可 以 选择 最 合适 的 引擎 以 得 到 最 高 的 性 能 。 

支持 跨 平 台 : MySQL 支持 至 少 20 种 以 上 的 开发 平台 , 包括 AIX、 FreeBSD、HP-UX、 Linux、 

Mac OS、Novell Netware、OpenBSD、OS/2 Wrap、Solaris、Windows 等 多 种 操作 系统 。 这 
使 得 在 任何 平台 下 编写 的 程序 都 可 以 进行 移植 ， 而 不 需要 对 程序 做 任何 的 修改 。 

运行 速度 快 : 高 速 是 MySQL 的 显著 特性 ， 在 MySQL 中 ， 通 过 使 用 优化 的 单 扫描 多 连接 ， 
E 够 极 快 地 实现 连接 ，SQL 函数 使 用 高 度 优化 的 类 库 实现 ， 运 行 速度 极 快 。 

支持 面 对 对 象 ， PHP 支持 混合 编程 方式 ， 编 程 方式 可 以 为 纯粹 的 面 对 对 象 、 纯 粹 的 面向 过 

程 和 面向 对 象 与 面向 过 程 混合 编程 3 种 方式 。 

安全 性 高 : 灵活 安全 的 权限 和 密码 系统 允许 基本 主机 的 验证 ， 连 接 到 服务 器 时 ， 所 有 密码 

传输 均 采 用 加 密 形 式 ， 从 而 保证 了 密码 的 安全 。 

成 本 低 : MySQL 数据 库 是 一 种 完全 免费 的 产品 ， 用 户 可 以 直接 从 网 上 下 载 。 
支持 多 种 语言 开发 : MySQL 使 用 C 和 C++ 编写 ， 为 多 种 编程 语言 提供 了 API。 这 些 编程 语 
言 包 括 C、C++、Eiffel、Java、Perl、PHP、Python、Ruby 和 Tcl 等 。 

数据 库存 储 容量 大 : MySQL 数据 库 最 大 有 效 表 尺寸 通常 是 由 操作 系统 对 文件 大 小 的 限制 决 
定 的 ， 而 不 是 由 MySQL 内 部 限制 决定 的 。 表 空间 的 最 大 容量 可 达 64TB， 可 以 轻松 处 理 拥 
有 上 千 万 条 记录 的 大 型 数据 库 。 

支持 强大 的 内 置 函 数 : PHP 提供 了 大 量 的 内 置 函 数 ， 几 乎 涵盖 了 Web 应 用 开发 中 所 有 的 功 
缘 ， 它 内 置 了 数据 库 连接 、 文件 上 传 等 功能 , 为 快速 开发 Web 应 用 提供 了 方便 , 优化 的 SQL 
查询 算法 ， 有 效 地 提高 了 查询 速度 。 

应 用 灵活 : 既 能 够 作为 一 个 单独 的 应 用 程序 应 用 在 客户 端 服务 器 网 络 环境 中 ， 也 能 够 作为 
一 个 库 而 嵌入 到 其 他 的 软件 中 提供 多 语言 支持 。 

其 他 功能 : 支持 多 线程 ， 充 分 利用 CPU 资源 ; 提供 TCPHIP、ODBC 和 JDBC 等 多 种 数据 库 
连接 途径 ， 提 供用 于 管理 、 检 查 、 优 化 数据 库 操作 的 管理 工具 。 


19.2 使 用 MySQL 服务 器 


控制 MySQL 服务 器 的 方法 有 两 种 : 通过 系统 服务 器 ， 也 可 以 通过 命令 提示 符 。 不 管 使 用 哪 种 方 
法 都 可 以 启用 、 连 接 和 关闭 MySQL。 


i 





no 


| 19.2.1 启动 MySQL 服务 器 


| 启动 MySQL 服务 器 的 方法 有 丙种， 系统 服 务 器 和 命令 提示 符 ， 下 面 以 Windows 8 为 例 介绍 每 和 
| 方法 的 操作 流程 。 


i 1， 通 过 系统 服务 器 启动 MySQL 服务 器 


如 果 把 MySQL 设置 为 Windows 服务 ， 则 可 以 通过 选择 【控制 面板 】| 【管理 工具 】| 【服务 】 命 
| 令 ， 打开 【服务 】 窗 口 ， 在 服务 器 的 列表 中 找到 MySQL 服务 选项 ， 然 后 通过 右键 快捷 菜单 命令 ， 或 
| 者 工具 栏 中 的 【启动 】 命 令 ， 快 速 启用 MySQL 服务 ， 如 图 19.1 所 示 。 


2 疡 。 以 术 
车 Inernet Connection Sheri。 为 家 ~ 

SP Helper 

iPod 服务 


i 
s 


使 用 这 3 种 方式 中 的 任意 一 
种 都 可 以 启动 MySQL 服务 


本地 系统 
< 地 系统 
二 系统 
内 服务 
网络 服务 
二 地 服务 
+ 地 系统 
本地 系统 
地 系统 
本地 系统 
本地 系统 
本地 系统 
本地 系统 
二 地 系统 


人 Newwork Access Protect.. 
人 Network Cor et 
Network Cornecio 




















19.1 启动 MySQL 服务 
2. 在 命令 提示 符 中 启动 MySQL 服务 器 


| 
| 右 击 窗口 左下 角 的 【开始 】 图 标 ， 在 弹出 的 【开始 】 菜 单 中 ， 选 择 【命令 提示 符 ( 管 理 员 )】 命 
| 令 ， 打开 DOS 窗口， 如 图 19.2 所 示 。 





19.2 选择 【命令 提示 符 (管理 员 ))】 命令 
在 DOS 窗口 的 命令 提示 符 下 输入 : 
| \>net start mysql57 
| 然后 按 Enter 键 ， 即 可 启动 MySQL 服务 器 ， 如 图 19.3 所 示 。 
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图 19.3 启动 MySQL 服务 
19.2.2 连接 和 断 开 MySQL 服务 器 


下 面 分 别 介绍 如 何 快速 连接 和 断 开 MySQL 服务 器 的 方法 

1. 连接 MySQL 服务 器 | 

连接 MySQL 服务 器 可 以 通过 mysql 命令 实现 。 在 MySQL 服务 器 启动 之 后 ， 选 择 【 开 始 】 |【 运 | 
行 】 命 令 ， 打 开 【 运 行 】 对 话 框 ， 在 其 中 输入 cmd 命令 ， 按 Enter 键 ， 打 开 DOS 窗口 。 | 


输入 下 面 的 代码 ， 按 Enter 键 进入 MySQL 服务 器 安装 目录 下 的 bin 子 目录 。 
cd C:\Program Files\MySQL\IMySQL Server 5.7\bin 


然后 ， 在 DOS 窗口 的 命令 提示 符 下 输入 : 











mysql —h localhost-u root -Pp 


如 图 19.4 所 示 。 





CAWindows\system32\cmd.exe - 5 














图 19.4 连接 MySQL 服务 | 

其 中 ，mysql 关键 词 表示 连接 命令 ，-u 关键 词 表 示 用 户 参数 ， 其 后 可 以 跟随 MySQL 数据 库 的 用 | 

户 名 , 参数 关键 词 与 值 之 间 不 要 忽略 空格 。-h 关键 词 表示 MySQL 服务 器 所 在 地 址 , 在 连接 本 地 MySQI | 
服务 器 时 ， 该 参数 可 以 省 略 ， 当 然 也 可 以 输入 192.0.0.1 或 localhost， 表 示 本 地 地 址 。-p 关键 词 表 示 | 
用 户 密码 ,可 以 先 不 输入 密码 , 为 了 保护 MySQL 数据 库 的 密码 安全 ， 可 以 采用 图 19.4 所 示 方 式 不 输 | 
入 密码 ， 如 果 此 时 输入 密码 ， 在 -p 后 面 的 密码 将 以 明文 形式 显示 。 | 
按 Enter 键 , 服务 器 会 要 求 再 次 输入 登录 密码 , 此 时 输入 的 密码 将 以 星 号 隐藏 显示 , 如 图 19.5 所 示 。 | 
最 后 , 按 Enter 键 , 即 可 连接 到 MySQL 服务器, 如 图 19.6 所 示 。 此 时 即 可 进入 到 mysql 中 , mysql | 
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的 提示 符 是 mysql>。 注 意 ， 如 果 是 连接 到 另外 的 机 器 上 ， 则 需要 加 入 一 个 参数 -h， 设 置 机 器 人 P。 











图 19.5 输入 MySQL 服务 密码 


findows\system32\cmd.exe - mysql -hlocalhost -uroot-p - 5 醒 汪 






s affillates. h11 rights reser 


ype ‘ce’ to clear the current input si 


图 19.6 显示 成 功 连接 到 MySQL 数据 库 
人 提示 : 如 果 感 觉 上 述 方法 比较 麻烦 ， 则 不 妨 选 择 【开始 】 | MySQL | MySQL Server 5.7 | MySQL 5.7 
Command Line Client 命令 ， 打 开 MySQL 客户 端 命令 行 窗口 ， 在 窗口 中 输入 用 户 密码 ， 该 
密码 为 安装 MySQL 时 设置 的 ， 最 后 按 Enter 键 即 可 ， 如 图 19.7 所 示 。 


[ MysQL 57 Command Line Client - “= 配 可 





图 19.7 快速 连接 MySQL 服务 


2. 断 开 MySQL 服务 器 
连接 到 MySQL 服务 器 之 后 ， 可 以 通过 在 MySQL 提示 符 下 输入 exit 或 者 quit 命令 断 开 MySQL 
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连接 ， 输 入 代码 如 下 ， 如 图 19.8 所 示 。 
mysql> quit 


列 MySQL 57 Command Line Client - = 丁丁 









图 19.8 断 开 连 接 MySQL 服务 
19.2.3 停止 MySQL 服务 器 


停止 MySQL 服务 器 的 方法 有 两 种 : 系 
1. 通过 系统 服务 器 停止 MySQL 服务 器 | 
如 果 将 MySQL 设置 为 Windows 服务 ， 则 可 以 通过 系统 服务 器 进行 操作 。 选 择 【开始 】|【 控 制 | 
面板 】|【 管 理工 具 】|【 服 务 】 命 令 ， 打 开 【 服 务 】 窗 口 ， 在 服务 器 的 列表 中 找到 MySQL 服务 选项 ，| 
然后 通过 右键 快捷 菜单 命令 , 或 者 工具 栏 中 的 【停止 命令, 快速 


we 


服务 器 和 命令 提示 符 (DOS)。 


:I 上 MySQL 服务 ， 如 图 19.9 所 示 。 | 














be 





19.9 ”停止 MySQL 服务 | 
2， 在 命令 提示 符 中 停止 MySQL 服务 器 


右 击 窗口 左下 角 的 【开始 】 图 标 ， 在 弹出 的 【开始 】 菜 单 中 ， 选 择 【 命 令 提示 符 (管理 员 )】 命 | 
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| 令 ， 在 DOS 窗口 的 命令 提示 符 下 输入 : 


net stop mysql57 





| 


按 Enter 键 ， 即 可 停止 MySQL 服务 器 。 


19.3 MySQL 命令 行 数据 库 


| 启动 并 连接 到 MySQL 服务 器 ， 即 可 对 MySQL 数据 库 进 行 操作 ， 操 作 MySQL 数据 库 的 方法 比 
| 较 简单 ， 具 体 介绍 如 下 。 


19.3.1 创建 数据 库 


! 
| 
! 


回 
回 


回 
回 
回 


如 果 管 理 员 在 设置 权限 时 为 用 户 创 建 了 数据 库 ， 就 可 以 开始 使 用 它 ; 否则 ， 用 户 
数据 库 ， 创 建 数据 库 的 语法 格式 如 下 : 
mysql> CREATE DATABASE 数据 库 名 称 ; 





;要 自己 创建 


【示例 】 在 本 地 创建 一 个 db_admin 数据 库 ， 则 输入 的 命令 如 图 19.10 所 示 。 


MySQL 5.7 Command Line Client 








图 19.10 创建 数据 库 








在 创建 数据 库 时 ， 数 据 库 命名 应 该 遵守 如 下 规则 : 


不 能 够 与 其 他 数据 库 重 名 ， 否 则 就 会 发 生 错 误 。 

名 称 可 以 由 任意 字母 、 数 字 、 下 划 线 和 $ 字 符 组 成 ， 可 以 使 用 上 述 的 任意 字符 开头 ， 但 不 能 
够 单独 使 用 数字 ， 否 则 会 造成 数值 混淆 。 

名 称 最 长 为 64 个 字符 ， 而 别名 最 多 为 256 个 字符 。 

不 要 使 用 MySQL 关键 字 作为 数据 库 名 称 、 表 名 。 

在 默认 情况 下 ，Windows 下 的 数据 库 名 、 表 名 对 于 大 小 写 不 是 很 敏感 的 ， 而 在 Linux 下 会 
对 大 小 写 敏感 。 为 了 便于 数据 库 在 平台 之 间 移 植 ， 建 议 采 用 小 写 形式 定义 数据 库 的 名 称 。 





19.3.2 查看 数据 库 
成 功 创建 数据 库 之 后 ， 就 可 以 使 用 SHOW 命令 查看 MySQL 服务 器 中 的 数据 库 信息 。 具 体 语法 
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格式 如 下 : 
mysql> SHOW DATABASES: 
该 语句 不 需要 附加 任何 数据 库 名 称 。 


【示例 】 输 入 上 面 语句 ， 然 后 按 Enter 键 ， 即 可 看 到 在 MySQL 服务 器 中 创建 的 所 有 数据 库 名 称 ， 
如 图 19.11 所 示 。 











MySQL 57 Command Line Client - “正本 









图 19.11 查看 数据 库 
19.3.3 选择 数据 库 
创建 数据 库 并 不 表示 选 定 并 使 用 它 ， 还 需要 明确 地 选择 数据 库 。 为 了 向 MySQL 服务 器 指定 当前 | 
要 操作 的 数据 库 ， 可 以 使 用 USE 语句 选择 一 个 数据 库 。 具 体 语法 格式 如 下 : | 
mysql> USE 数据 库 名 称 : 
【 示例】 选择 名 称 为 db_admin 的 数据 库 ， 设 置 其 关 汰 认 的 数据 库 ， 如 图 19.12 所 示 。 


国 ”MysQL57Commandlineclient  - = 枉 下 





选择 指定 的 数据 库 


图 19.12 选择 数据 库 
当 用 户 成 功 选择 数据 库 之 后 ， 就 可 以 使 用 SQL 语句 对 数据 库 进行 操作 了 。 | 
所 注 意 : 数据 库 只 需要 创建 一 次 ， 但 是 必须 在 每 次 启动 mysql 会 话 时 在 使 用 前 先 选择 它 。 用 户 可 以 | 
根据 上 面 的 例子 执行 一 个 USE 语句 来 实现 。 也 可 以 在 调用 mysql 命令 时 ， 通 过 命令 行 选 | 
择 数 据 库 ， 只 需要 在 提供 连接 参数 之 后 指定 数据 库 名 称 。 例 如 : | 
> mysql -hhost -u user -p db_admin: 
Enter password: ****** 
上 面 显示 的 命令 行 中 的 db_admin 不 是 密码 。 如 果 想 要 在 命令 行 上 在 -p 选项 后 提供 密码 ， | 
则 不 能 插入 空格 ,如 -pmypassword, 不 是 -p mypassword。 但 是 , 不 建议 在 命令 行 输入 密码 ， | 
因为 这 样 会 暴露 密码 ， 能 被 在 机 器 上 登录 的 其 他 用 户 窒 探 到 。 | 


“683 。 


| XE 拉 页 设计 与 网 站 建设 从 入 门 到 精通 


SS 


19.3.4 ”删除 数据 库 


删除 数据 库 可 以 使 用 DROP DATABASE 语句 实现 ， 语 法 格式 如 下 : 
mysql> DROP DATABASE 数据 库 名 称 ; 


【示例 】 通 过 DROP DATABASE 语句 删除 名 为 db_admin 的 数据 库 ， 如 图 19.13 所 示 。 


| 加 mMySQL57 Command Uine | pss; 的 数据 库 






~、 
成 功 删除 指定 的 数据 库 


图 19.13 ”删除 数据 库 


19.4 MySQL 命令 行 数 据 表 


在 对 MySQL 数据 表 进 行 操作 之 前 , 用 户 应 先 使 用 USE 语句 选择 数据 库 ， 然 后 才 可 以 在 数据 库 
中 进行 数据 表 操 作 ， 如 创建 数据 表 、 修 改 表 结构 、 数 据 表 更 名 、 删 除数 据 表 等 ， 下 面 对 此 进行 详细 
介绍 。 
19.4.1 创建 数据 表 


使 用 CREATE TABLE 语句 可 以 创建 数据 表 ， 语 法 格式 如 下 : 


CREATE [TEMPORARY] TABLE [IF NOT EXISTS] 数据 表 名 称 
[(create_definition,...)][table_options] [select_statement] 


| 

| ”CREATE TABLE 语句 参数 说 明 如 表 19.1 所 示 。 

| 

表 19.1 CREATE TABLE 语句 参数 说 明 

















| 关 键 字 说 明 

| TEMPORARY | 使 用 该 关键 字 ， 则 表示 创建 一 个 临时 表 

| IF NOT EXISTS | 该 关键 字 可 以 避免 表 不 存在 时 MySQL 报告 错误 

| create_ definition | 表 的 列 属 性 部 分 。MySQL 要 求 在 创建 表 时 ， 表 至 少 包 含 一 个 列 
! table_options | 表 的 一 些 特性 参数 

| select statement SELECT 语句 描述 部 分 ， 用 它 可 以 快速 地 创建 表 





create_definition 子 句 定义 数据 表 的 列 属 性 ， 每 一 列 定义 的 具体 格式 如 下 : 


col name type [NOT NULL | NULL] [DEFAULT default value] 
[AUTO INCREMENT] [PRIMARY KEY] [reference definition] 


| 属性 create_definition 的 参数 说 明 如 表 19.2 所 示 。 
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SE 
表 19.2 属性 create_definition 参数 说 明 
参数 说 了 明 

col name 表示 字段 名 
type 字段 类 型 
NOT NULL |NULL 指出 该 列 是 否 允许 是 空 值 ， 系统 一 般 默认 允许 为 空 值 ， 所 以 当 不 允许 为 空 值 时 ， 必 

须 使 用 NOT NULL vote 
DEFAULT default_value | 表示 默认 值 | 





表示 是 否 自动 编号 ， 每 个 表 只 能 有 一 个 AUTO _INCREMENT 列 ， 并 且 必 须 被 索引 
表示 是 否 为 主键 ， 一 个 表 只 能 够 有 一 个 PRIMARY KEY 。 如 果 表 中 没有 一 个 
PRIMARY KEY, 而 某 些 应 用 程序 需要 PRIMARY KEY, MySQL 将 返回 第 一 个 没有 
任何 NULL 列 的 UNQUE 键 作 为 PRIMARY KEY 
Teference definition 为 字段 添加 注解 

创建 数据 表 的 格式 比较 复杂 ， 可 以 简单 地 概括 为 如 下 形式 : 

create table 表 名 ( 列 名 1 属性 . 列 名 2 属性 .…); 

【示例 】 使 用 CREATE TABLE 语句 在 MySQL 数据 库 db_admin 中 创建 一 个 名 为 tb_user 的 数据 

表 ， 该 表 包含 it、name 字段 ， 如 图 19.14 所 示 。 
画 MySQL 5.7 Command Line Client - ° 匡 到 


AUTO INCREMENT 





PRIMARY KEY 

















d/or its affiliates. All right 


选择 数据 库 db_admin 


创建 数据 表 tb_user 及 其 结构 


成 功 创建 数据 表 tb_user 


vs affected (QI0 * 





图 19.14 创建 数据 表 


19.4.2 ”查看 数据 表 结 构 
创建 数据 表 成 功 之 后 , 可 以 使 用 SHOW COLUMNS 语句 或 者 DESCRIBE 语句 查看 指定 数据 表 的 | 
表 结构 。 | 
1. 使 用 SHOW COLUMNS 语句 | 
SHOW COLUMNS 语句 的 语法 格式 如 下 : 
SHOW FULLJCOLUMNS FROM 数据 表 名 [FROM 数据 库 名 ]; | 
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SHOW [FULL]COLUMNS FROM 数据 库 名 .数据 表 名 : 
【示例 】 使 用 SHOW COLUMNS 语句 查看 数据 表 tb_user 的 表 结构 ， 如 图 19.15 所 示 。 











NMSQE5E ea。 查看 数据 表 tb_user 结构 


显示 tb_user 表 结构 








图 19.15 查看 数据 表 结 构 


2. 使 用 DESCRIBE 语句 
DESCRIBE 语句 的 语法 格式 如 下 : 
DESCRIBE 数据 表 名 ; 
其 中 DESCRIBE 可 以 简写 为 DESC。 在 查看 表 结 构 时 ， 可 以 只 列 出 某 一 列 的 信息 ， 格 式 如 下 : 
DESCRIBE 数据 表 名 列 名 : 
【示例 】 使 用 DESCRIBE 语句 查看 数据 表 tb_user 的 表 结 构 ， 如 图 19.16 所 示 。 
- 口 攻 至 








! Default ! Extra ! 


! NULL 
! NULL 


2 rows in set (8.00 se 


| 图 19.16 查看 数据 表 结 构 
| 19.4.3 ”修改 数据 表 结 构 


| 修改 数据 表 结构 可 以 使 用 ALTER TABLE 语句 。 修 改 数 据 表 结构 包括 增加 、 删 除 字 段 、 修 改 字段 
| 名 称 或 者 字段 类 型 ,设置 取消 主键 外 键 、 设置 取消 索引 以 及 修改 表 的 注释 等 。 该 语句 的 语法 格式 如 下 : 


ALTER [IGNORE] TABLE 数据 表 名 alter_spec[.alter_spec].… 
当 指 定 IGNORE 时 ， 如 果 出 现 重复 关键 的 行 ， 则 只 执行 一 行 ， 其 他 重复 的 行 被 删除 。 
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其 中 alter spec 子 句 可 以 定义 要 修改 的 内 容 ， 其 语法 格式 如 下 : 
alter_specification: 
ADD [COLUMN] column definition [FIRST | AFTER col name ] /添加 新 字段 
ADD [COLUMN] (column definition....) // 添 加 新 字段 
ADD INDEX [index_name] [index_type] (index_col name....) // 添 加 索引 名 称 
ADD [CONSTRAINT [symbol]] 
PRIMARY KEY [index type] (index_col name....) /添加 主键 名 
ADD [CONSTRAINT [symbol]] 
UNIQUE [index_name] [index_type] (index_col name....) /添加 唯一 索引 
ALTER [COLUMN] col name {SET DEFAULT literal | DROP DEFAULT} // 修 改 字 段 名称 
CHANGE [COLUMN] old_col name column definition 
[FIRSTIAFTER col name] /修改 字段 类 型 
MODIFY [COLUMN] column_definition [FIRST | AFTER col name] /修改 子 句 定义 字段 
DROP [COLUMN] col name /删除 字段 名 称 
DROP PRIMARY KEY /删除 主键 名 称 
DROPINDEX index_name // 删 除 案 引 名 称 | 
RENAME [TO] new_tbl name // 更 改 表 名 | 





ALTER TABLE 语句 允许 指定 多 个 动作 ， 其 动作 之 间 可 以 使 用 逗号 进行 分 隔 ， 每 个 动作 表示 对 
进行 一 次 操作 。 例 如 ， 在 上 面 示 例 中 ， 为 tb_user 数据 表 添 加 email 字段 ， 类 型 为 varchar(50) not null， 
将 字段 name 类 型 改 为 varchar(50)， 则 代码 如 下 : 






ALTER TABLE tb_user ADD email varchar(50) NOT NULL. MODIFY name varchar(S0): 


在 命令 行 模式 下 运行 情况 如 图 19.17 所 示 。 为 了 检验 修改 是 否 成 功 ， 可 以 使 用 “desc tb_user;” 命 
令 查看 修改 的 结果 。 


画 MySQL 5.7 Command Line Client - 5 本 到 





| 
| 
| 
| 


1 } 查看 数据 表 tb_user 结构 


图 19.17 修改 数据 表 结 | 
全 注意 : 在 修改 数据 表 结 构 之 前 ， 应 提前 把 数据 表 中 的 数据 全 部 删除 ， 然 后 才能 够 进行 修改 操作 。 | 
19.4.4 重 命名 数据 表 


使 用 RENAME TABLE 语句 可 以 重 命名 数据 表 ， 具 体 语 法 如 下 : 
RENAME TABLE 数据 表 名 1 TO 数据 表 名 2: 


“B07 » 
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该 语句 可 以 同时 为 多 个 数据 表 进 行 重 命名 ， 多 个 表 之 间 可 以 使 用 逗号 进行 分 隔 。 
【示例 】 使 用 RENAME TABLE 语句 重 命名 数据 表 tb_user 为 tb_admin， 如 图 19.18 所 示 。 





19.4.5 “删除 数据 表 


删除 数据 表 





加 MySQL 5.7 Command Line Client - = 配 可 





图 19.18 重 命名 数据 表 


与 删除 数据 库 的 操作 类 似 ， 使 用 DROP TABLE 语句 即 可 实现 。 具 体 语法 如 下 : 


DROPTABLE 数据 表 名 ; 


【示例 】 删 除 


除数 据 表 tb_admin， 则 操作 效果 如 图 19.19 所 示 





加 MySQL 5.7 Command Line Client - = 配 苯 





999。2916 








图 19.19 删除 数据 表 


| 4 注意 : 在 出 除数 据 表 时 应 该 慎重 ， 一 旦 删除 数据 表 ， 那 么 表 中 的 数据 全 部 被 清除 ， 如 果 没 有 备份 


数据 ， 


则 数据 将 无 法 恢复 。 


在 删除 数据 表 时 ， 如 果 指 定 的 表 不 存在 ， 则 将 会 产生 一 个 错误 ， 为 了 防止 出 现 错误 ， 可 以 
在 删除 语句 中 加 入 下 EXISTS 关键 字 就 可 以 避免 出 错 ， 格 式 如 下 : 


DROP TABLE IF EXISTS 数据 表 名 ; 
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19.5 MySQL 命令 行 语句 





在 数据 表 中 插入 、 查 询 、 修 改 、 删 除 记录 都 可 以 在 MySQL 命令 行 中 使 用 SQL 语句 完成 。 下 面 | 
分 别 进行 介绍 。 | Note 


19.5.1 插入 记录 


在 建立 一 个 空 的 数据 库 和 数据 表 之 后 ， 用 户 就 可 以 向 数据 表 中 插入 数据 ， 具 体 语法 格式 如 下 : 
INSERT INTO table name [(col name....)] VALUES (value…) : | 
在 MySQL 中 ,一 次 可 以 同时 插入 多 条 记录 , 各行 记录 的 值 清单 在 VALUES 关键 字 后 以 逗号 分 隔 。 | 
而 在 标准 的 SQL 语句 中 一 次 只 能 够 插入 一 行 记录 。 | 
【示例 】 在 新 建 的 db_user 数据 库 的 tb_admin 表 中 插入 两 条 记录 ， 如 图 19.20 所 示 。 
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图 19.20 插入 记录 


19.5.2 查询 记录 


查询 记录 可 以 使 用 SELECT 语句 ， 该 语句 是 SQL 最 强大 的 命令 。 它 的 使 用 形式 复杂 ， 功 能 强大 ， | 
应 用 灵活 。 为 了 方便 学 习 ， 下 面 简单 介绍 SELECT 语句 的 基本 用 法 ， 具 体 语法 格式 如 下 : 


SELECT 
select_expr ... // 要 查询 的 内 容 ， 选 择 哪些 列 
[FROM table references // 要 查询 数据 表 
[WHERE where_definition] // 指 定 查询 条 件 
[GROUP BY {col name | expr | position} 
[ASC | DESC]. ... [WITH ROLLUP]] // 对 查询 结果 进行 分 组 
[HAVING where_definition] // 查 询 时 满足 的 第 二 个 条 件 


[ORDER BY {col_ name | expr | position} 
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[AscCI1DESC]..] /对 查询 结果 进行 排序 
[LIMIT {[offset.] row_count |row_count OFFSET offset}] /限制 输出 的 结果 
在 使 用 SELECT 语句 时 ， 应 先 确 定 所 要 查询 的 列 ，* 表 示 所 有 列 ， 多 列 之 间 通 过 逗号 进行 分 隔 。 
如 果 针 对 多 个 数据 表 进 行 查询 ， 则 在 指定 的 字段 前 面 添加 表 名 ， 通 过 点 号 进行 连接 ， 这 样 就 可 以 防止 
表 之 间 字 段 重 名 而 造成 的 错误 。 
【示例 】 在 上 面 示例 中 的 tb_admin 数据 表 中 查询 id、name、email 列 ， 并 设置 查询 条 件 为 id 值 
为 1， 如 图 19.21 所 示 。 








画 MySQL 5.7 Command Line Client 


ET d 了 
查询 id 为 1 的 记录 





显示 查询 结果 


| 图 19.21 显示 查询 记录 
| 19.5.3 更 新 记录 


要 更 新 记录 可 以 使 用 UPDATE 语句 ， 该 语句 格式 如 下 : 
UPDATE tbl name 
SET col namel=exprl [. col name2=expr2 ...] 
[WHERE where_definition] 
其 中 SET 子 句 指定 要 修改 的 列 和 列 的 值 ， WHERE 子 句 是 可 选 的 ， 如 果 省 略 该 子 句 ， 则 将 对 所 有 
记录 中 的 字段 进行 更 新 。 
| 【示例 】 将 tb_admin 表 中 用 户 名 为 zhangsan 的 email 字段 值 更 改 为 zhangsan@126.com， 如 图 19.22 
| 所 示 。 
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zhangsanBl26 .con’ where 


更 新 记录 中 的 字段 值 


查询 修改 后 的 数据 表 结 果 





图 19.22 更 新 记录 
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19.5.4 删除 记录 


要 删除 记录 可 以 使 用 DELETE 语句 ， 该 语句 格式 如 下 : 
DELETE FROM tbl name 
[WHERE where_definition] 
在 执行 删除 操作 时 ， 如 果 没 有 指定 WHERE 子 句 ， 则 将 删除 所 有 的 记录 ， 因 此 在 操作 时 务必 要 特 
别 慎重 。 
【示例 】 将 tb_admin 表 中 用 户 名 为 zhangsan 的 记录 删除 ， 如 图 19.23 所 示 。 | 
- 5 
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> delete from th_adnin wh 


删除 指定 的 记录 


查询 删除 后 的 数据 表 结果 | 





图 19.23 ”删除 记录 


在 实际 应 用 中 ， 执 行 删除 时 ， 一 般 根 据 id 字段 值 作为 删除 的 条 件 ， 这 样 可 以 精确 删除 记录 ， 避 | 
免 误 删除 数据 表 。 | 
上 


19.6 MySQL 备份 和 恢复 


为 了 避免 MySQL 数据 库 出 现 意外 ， 建 议 养 成 良好 按期 备份 数据 的 习惯 。 这 样 不 管 是 系统 崩溃 ， 
或 者 后 期 误 操作 都 不 会 对 长 期 积累 的 数据 造成 致命 的 破坏 。 | 
19.6.1 备份 数据 | 
在 命令 行 模式 下 ,备份 数据 可 以 使 用 MYSQLDUMP 命令 ,通过 该 命令 可 以 将 数据 以 文本 文件 的 | 
形式 存储 到 指定 的 文件 夹 下 。 通 过 MYSQLDUMP 命令 备份 数据 的 具体 步骤 如 下 : | 
【操作 步骤 了 | 
第 1 步 ， 在 MySQL 服务 器 启动 之 后 ， 选 择 【 开 始 】| 【运行 】 命 令 ， 打 开 【 运 行 】 对 话 框 ， 在 其 | 
中 输入 cmd 命令 ， 按 Enter 键 ， 打 开 DOS 窗口 。 
第 2 步 ， 输 入 下 面 的 代码 ， 按 Enter 键 进入 MySQL 服务 器 安装 目录 下 的 bin 子 目 录 中 。 
cd C:\Program Files\MySQL\IMySQL Server 5.7\bin 
第 3 步 ， 在 DOS 窗口 的 命令 提示 符 下 输入 如 下 命令 ， 如 图 19.24 所 示 。 
mysqldump —h localhost -uroot -~p db_admin > E:\db admin txt 
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CNWindows\system32\cmd .exe 








图 19.24 备份 数据 库 


| 其 中 ，mysqldump 关键 词 表 示 备 份 命令 ，-h 关键 词 表 示 MySQL 服务 器 所 在 地 址 ，-u 关键 词 表示 
| 用 户 参 数 ， 其 后 可 以 跟随 MySQL 数据 库 的 用 户 名 ， 参 数 关 键 词 与 值 之 间 可 以 忽略 空格 。-p 关键 词 表 示 
用 户 密码 ， 可 以 先 不 输入 密码 ， 为 了 保护 MySQL 数据 库 的 密码 安全 ， 可 以 采用 图 19.24 所 示 方式 不 输入 
密码 ， 如 果 此 时 输入 密码 ， 在 -p 后 面 的 密码 将 以 明文 形式 显示 。db_admin 表示 要 备份 的 数据 库 名 称 ， 
Di\db_admin.txt 表示 备份 的 位 置 和 文件 名 称 。 

第 4 步 ， 按 Enter 键 ， 即 可 完成 备份 ， 此 时 可 以 在 了 盘 根 目 录 下 查看 已 经 备份 的 数据 库 文件 ， 该 
文件 以 文本 文件 形式 存在 ， 打 开 备 份 数据 的 文本 文件 ， 则 显示 代码 如 图 19.25 所 示 。 


db_adminbxt - 二 - -En 














图 19.25 备份 数据 库 的 备份 文件 


19.6.2 ”恢复 数据 


既然 可 以 对 数据 库 进行 备份 ， 那 么 也 可 以 对 数据 库 文件 进行 恢复 。 执 行 恢复 的 命令 格式 如 下 : 
| mysql -uroot -proot db admin < D:\db_admin.txt 


其 中 ，mysql 表示 使 用 命令 ，-u 后 的 root 表示 用 户 名 ，-p 后 的 root 表示 密码 ， 也 可 以 省 略 ， 按 提 
示 输入 密码 。db_admin 表示 数据 库 名 ，< 后 的 字符 串 表示 备份 数据 库 文件 的 存储 位 置 。 

【操作 步骤 】 

第 1 步 ， 在 MySQL 服务 器 启动 之 后 ， 选 择 【 开 始 】| 【运行 】 命 令 , 打开 【运行 】 对 话 框 ， 在 对 
话 框 中 输入 cmd 命令 ， 按 Enter 键 打开 DOS 窗口 。 
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第 2 步 ， 输 入 下 面 的 代码 ， 按 Enter 键 进入 MySQL 服务 器 安装 目录 下 的 bin 子 目 录 中 。 
cd C:\Program Files\MySQL\IMySQL Server 5.7\bin 

第 3 步 ， 在 DOS 窗口 的 命令 提示 符 下 输入 如 下 命令 ， 如 图 19.26 所 示 。 
mysql —uroot -p db admin < D:\db_admin.txt 


EE CAWindows\system32\cmdexe - mysql -hlocalhost -uroot-p - “= 医 司 ‘Note 









图 19.26 恢复 数据 库 


其 中 ，mysql 关键 词 表示 启动 和 恢复 命令 ，-u 关键 词 表示 用 户 参数 ， 其 后 可 以 跟随 MySQL 数据 | 
参 为 了 






库 的 用 户 名 ， 关键 词 与 值 之 间 可 以 忽略 空格 。-p 关键 词 表示 用 户 密码 ， 可 以 先 不 输入 密码 ， 
保护 MySQL 数据 库 的 密码 安全 ， 可 以 采用 图 19.26 所 示 方 式 不 输入 密码 ， 如 果 此 时 输入 密码 
后 面 的 密码 将 以 明文 形式 显示 。 a 表示 要 恢复 到 的 数据 库 名 称 , D:\db_admin.txt 表示 恢复 数据 
库 文件 的 位 置 和 文件 名 称 。 

第 4 步 ， 按 Enter 键 ， 即 可 完成 恢复 ， 此 时 可 以 在 MySQL 服务 器 中 查看 数据 库 是 否 恢复 成 功 ， 
如 图 19.27 所 示 。 





CDT mysql -hlocalhost -uroot-p - = 医 司 











图 19.27 成 功 恢复 数据 库 
19.7 PHP 操作 MySQL 


PHP 内 置 了 大 量 的 数据 库 操作 函数 ， 调 用 这 些 函 数 可 以 很 方便 地 与 各 种 类 型 的 数据 库 进行 通信 ， 
使 Web 开发 变 得 更 加 简单 灵活 。 


19.7.1 PHP 与 MySQL 通信 
使 用 PHP 访问 MySQL 数据 库 一 般 需 要 5 步 。 
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【操作 步骤 】 


第 


1 步 ， 连 接 MySQL 服务 器 。 可 以 使 用 PHP 的 mysql_connectO 预 定义 函数 建立 与 MySQL 服务 


器 之 间 的 连接 。 


第 
数据 库 
第 


2 步 ， 选 择 MySQL 数据 库 。 可 以 使 用 mysql_select_db0 预 定义 函数 选择 MySQL 服务 器 中 的 


， 并 与 数据 库 建立 连接 。 


3 步 , 执行 SQL 查询 操作 。 在 选择 数据 库 之 后 , 就 可 以 使 用 mysql_queryO 函 数 执行 SQL 语句 ， 


对 数据 库 的 操作 主要 包含 5 种 方式 。 


回 
回 
回 
回 
回 
第 


查询 数据 : 使 用 select 语句 实现 数据 的 查询 功能 。 
显示 数据 : 使 用 select 语句 显示 数据 的 查询 结果 。 
插入 数据 : 使 用 insert into 语句 向 数据 库 中 插入 数据 。 
更 新 数据 : 使 用 update 语句 修改 数据 库 中 的 记录 。 
删除 数据 : 使 用 delete 语句 删除 数据 库 中 的 记录 。 
4 步 ， 关 闭 记 录 集 。 数 据 库 操作 完成 之 后 ， 需 要 关闭 记录 集 ， 以 释放 系统 资源 : 


mysql_free_result($result); 
窟 提示: 如 果 在 多 个 网 页 中 频繁 访问 数据 库 ， 则 可 以 建立 与 数据 库 服务 器 的 持续 连接 来 提高 效率 。 


第 


因为 每 一 次 与 数据 库 服 务 器 进行 连接 需要 较 长 的 时 间 和 较 大 的 资源 开销 ,持续 连接 相对 来 
说 会 更 有 效 ， 建 立 持续 连接 时 ， 调 用 mysql pconnectO) 函 数 代替 mysql connectO 函 数 ， 在 
本 程序 结束 时 ， 不 需要 调用 mysql closeO 函数 关闭 连接 ， 下 一 次 程序 在 此 执行 
Imysql_ pconnectO 函 数 时 ， 系 统 会 自动 直接 返回 已 经 建立 的 持续 连接 的 ID 号 ， 而 不 需要 再 
去 连接 数据 库 。 


5 步 ， 关 闭 MySQL 服务 器 。 


每 调用 mysql_connect0 或 mysql_query0 函 数 时 ， 都 会 耗费 系统 资源 。 当 大 量 用 户 访问 网 站 , 可 能 
| 会 降低 系统 运行 效率 ， 为 了 避免 发 生 各 种 异常 ， 建 议 在 完成 数据 库 操作 之 后 ， 应 使 用 mysql_close() 
函数 关闭 与 MySQL 服务 器 的 连接 ， 以 节省 资源 。 

mysql close($link): 

PHP 访问 MySQL 数据 库 的 一 般 步骤 可 以 使 用 图 示 直 观 演示 ， 如 图 19.28 和 图 19.29 所 示 。 









浏览 者 通过 浏览 器 
浏览 或 填写 信息 


图 19.28 浏览 器 与 服务 器 的 联系 
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连接 MySQL 服务 器 


选择 MySQL 数据 库 


关闭 记录 集 


关闭 MySQL 服务 器 





图 19.29 PHP 与 MySQL 的 联系 


19.7.2 连接 MySQL 服务 器 


使 用 PHP 操作 MySQL 数据 库 之 前 ， 应 该 建立 与 MySQL 服务 器 的 连接 ， 有 具体 语法 格式 如 下 : 
mysql_connect ([ string $server [. string $username [. string $password [, bool $new_link [, int $client fags ]]]]] ) 


其 中 主要 参数 说 明 如 下 。 
回 server: 表示 MySQL 服务 器 。 可 以 包括 端口 号 ， 如 "hostname:port"， 或 者 到 本 地 套 接 字 的 路 | 
径 ， 如 对 于 localhost 的 ":/path/to/socket"。 如 果 PHP 指令 mysql.default_host 未 定义 ， 则 默认 | 
值 是 localhost:3306'。 
usemame: 表示 用 户 名 。 默 认 值 是 服务 器 进程 所 有 者 的 用 户 名 。 
password: 表示 密码 。 默 认 值 是 空 密码 。 
new_link: 如 果 用 同样 的 参数 第 二 次 调用 mysql_connect0， 将 不 会 建立 新 连接 ， 而 将 返回 已 
经 打开 的 连接 标识 。 参 数 new_link 改变 此 行为 并 使 mysql_connect0 总 是 打开 新 的 连接 ， 甚 
至 当 mysql_connectO 曾 在 前 面 被 同样 的 参数 调用 过 。 
client_flags: client flags 参数 可 以 是 MYSQL_ CLIENT SSL、MYSQL_CLIENT_ COMPRESS、 
MYSQL CLIENT IGNORE SPACE 或 MYSQL CLIENT INTERACTIVE 常量 的 组 合 。 | 
执行 该 函数 后 ， 将 会 返回 一 个 值 ， 如 果 成 功 则 返回 一 个 MySQL 连接 标识 ， 失 败 则 返回 FALSE。 | 
【示例 】 在 下 面 代码 中 ， 调 用 mysql_connect0 函 数 连接 本 地 的 MySQL 服务 器 ， 如 果 连 接 成 功 ， } 
则 显示 提示 信息 ， 如 图 19.30 所 示 。 | 


加 网 加 


<2php 
Slink = mysql_connect("localhost", "root", "11111111"): 
这 S$linlo{ 

echo "MYSQL 服务 器 连接 成 功 !": 


} 

?> 

使 用 mysql_connectO 函 数 可 以 连接 到 本 地 或 者 远程 服务 器 , 这 样 就 为 数据 的 异地 存储 提供 安全 保 
障 。 为 了 方便 查询 因为 连接 出 现 的 错误 ， 建 议 在 连接 中 添加 die0 函 数 ， 该 函数 能 够 实现 屏蔽 的 错误 处 
理 机 制 ， 在 本 例 中 可 以 使 用 mysql_error0 函 数 提取 MySQL 函数 的 错误 文本 ， 如 果 没 有 出 错 ， 则 返回 
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空 字 符 串 ， 如 果 显 示 “Warming:mysql_ connect0...” 类 似 的 信息 ， 则 说 明 数 据 库 连接 错误 ， 这 样 就 可 
以 快速 发 现 错误 出 现 的 位 置 ， 并 及 时 进行 纠正 。 

<2php 

$link = mysql_connect("localhost", "root", "11111111") or die("MySQL 服务 器 未 启动 , 或 者 用 户 名 密码 输入 错误 " 


这 Slinl{ 
echo "MySQL 服务 器 连接 成 功 !" 


|S er -sc|G evswanss. | 
MySQL 服 务 器 连接 成 功 ! 





图 19.30 成 功 建立 与 MySQL 服务 器 的 连接 
19.7.3 选择 MySQL 数据 库 


连接 到 MySQL 服务 器 之 后 ， 就 可 以 使 用 mysql_select_db0 函 数 选择 数据 库 ， 具 体 语法 如 下 : 
mysql_select_db( string $database_name [, resource $ link identifier ] ) 
其 中 ，database_name 参数 表示 数据 库 名 称 ，link_identifier 参数 表示 MySQL 服务 器 连接 标识 符 ， 


| 该 参数 值 应 该 是 mysql_connect0 函 数 的 返回 值 。 如 果 选 择 成 功 ， 则 mysql_select_db0 函 数 返回 true， 





否则 返回 false。 

mysql_select_ db0 设 定 与 指定 的 连接 标识 符 所 关联 的 服务 器 上 的 当前 激活 数据 库 。 如 果 没 有 指定 
连接 标识 符 ， 则 使 用 上 一 个 打开 的 连接 。 如 果 没 有 打开 的 连接 ，mysql_select_db0 函 数 将 无 参数 调用 
mysql_connectO 函 数 来 尝试 打开 一 个 连接 并 使 用 它 。 

【示例 】 在 下 面 代码 中 ,调用 mysql_connect() 函 数 连 接 本 地 的 MySQL 服务 器 ， 然 后 使 用 mysql_ 
select_db0) 函 数 访问 数据 库 db_admin， 如 果 连 接 成 功 ， 则 显示 提示 信息 ， 如 图 19.31 所 示 。 











<?php 
$link = mysql_connect("localhost". "root". "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 


， 误 "mysql error0); 


$db selectd = mysql select db("db admin", $link): 
if($db selectd){ 
echo "MySQL 数据 库 连 接 成 功 ! ": 
} 

‘> 


© EE Er “上 苞 





图 19.31 成 功 建立 与 MySQL 数据 库 的 连接 
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19.7.4 执行 SQL 语句 


要 对 数据 库 中 数据 表 进 行 操作 ， 一 般 可 以 调用 mysql_query0O 函 数 来 执行 SQL 语句 。 该 函数 的 语 | 
法 格式 如 下 : | 
resource mysql_ query ( string $query [, resource $link identifier ] ) 


mysql_query0 函 数 能 够 在 指定 的 连接 标识 符 关 联 的 服务 器 中 的 当前 活动 数据 库 中 发 送 一 条 查询 。 | 

如 果 没 有 指定 link_identifie， 则 使 用 上 一 个 打开 的 连接 。 如 果 没 有 打开 的 连接 ， 函 数 会 尝试 无 参数 调 | 

用 mysql_connect0 函 数 来 建立 一 个 连接 。 | 
< 甸 注意 ;查询 字符 串 不 应 以 分 号 结束 ， 查 询 结果 将 会 被 缓存 。 

mysql_query0 仅 对 select、SHOW、EXPLAIN 或 DESCRIBE 语句 返回 一 个 资源 标识 符 ， | 

如 果 查 询 执行 不 正确 则 返回 false。 对 于 其 他 类 型 的 SQL 语句 ，mysql_query0 在 执行 成 功 | 

时 返回 true， 出 错时 返回 false。 非 false 的 返回 值 意味 着 查询 是 合法 的 并 能 够 被 服务 器 执 | 

行 , 这 并 不 说 明 任何 有 关 影 响 到 的 或 返回 的 行 数 , 很 有 可 能 一 条 查询 执行 成 功 了 但 并 未 影 | 

响 到 或 并 未 返回 任何 行 。 | 


【示例 1】 执 行 一 个 添加 会 员 记 录 的 SQL 语句 的 代码 如 下 : 


<?php | 
$link = mysql_connect("localhost", "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 ， 
误 "mysql_errorO): | 
$db_selectd = mysql_select_db("db_admin", $link):; 
$sql = 'insert into tb_admin (id, name, email) values(1, "wang", "wang(@163.com")’; 
Sresult = mysql_query($sql, $link):; 


if($result){ 
echo "成 功 的 向 数据 表 tb_admin 中 插入 1 条 记录 ! ": 
HH 
?> 
然后 ， 在 命令 行 中 查询 数据 表 中 插入 的 数据 ， 如 图 19.32 所 示 。 


加 MySQL 5.7 Command Line Client - °° 匡 到 








图 19.32 查询 插入 的 数据 
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mysql_ unbuffered_query0O 函 数 向 MySQL 发 送 一 条 SQL 查询 语句 ， 但 不 获取 和 缓存 结果 的 行 ， 而 


| mysql_ query0O 函 数 能 够 自动 获取 并 缓存 结果 集 。 一 方面 ， 这 在 处 理 很 大 的 结果 集 时 ， 会 节省 可 观 的 内 


| 存 ， 同 时 在 获取 第 一 行 后 会 立即 对 结果 集 进 行 操作 ， 而 不 用 等 着 整个 SQL 语句 都 执行 完毕 。 


【示例 2】 下 面 以 示例 1 为 基础 ， 继 续 演示 几 则 SQL 语句 的 代码 。 
加 ”更 新 数据 表 中 指定 记录 


<2php 
$link = mysql_connect("localhost", "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 





| 误 "mysql_errorO): 


$db selectd= mysql select_ db("db admin". $link); 
$sql = "update tb_admin setid = 11. name = "wangl' email = "wang@263.net where name = "Wang'"; 
Sresult = mysql_query($sql, $link); 
if($resul) { 
echo "成 功 更 新 数据 表 tb_admin 记录 ! ": 
} 


?> 
查询 数据 表 中 指定 记录 


<2php 
$link = mysql_connect("localhost" "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 


误 ".mysql_error0); 


$db selectd = mysql select_db("db_admin", $link):; 
$sql = "select * from tb admin where name="'wangl"; 
Sresult = mysql_query($sql, $link); 
if($resul){ 
echo "成 功 完成 记录 查询 !"; 
} 


?> 
回 “删除 数据 表 中 指定 记录 


<2php 
$link = mysql_ connect("localhost" "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 


误 ".mysql error0); 


S$db_selectd = mysql_select_db("db_admin", $link); 
$sql = "delete from tb admin where name="wangl"™"; 
$result = mysql_query($sql, $link); 
if($resul) { 

echo "成 功 删除 指定 记录 ! ": 
} 
2 


19.7.5 ”获取 记录 集 数组 信息 


使 用 mysql_ query0 函 数 执行 SQL 语句 , 接 下 来 使 用 mysql_fetch_array0 函 数 从 返回 的 数组 结果 集 


中 获取 信息 。mysql_fetch_arrayO 函 数 的 语法 格式 如 下 : 


array mysql fetch array(resource $result [. int $ result type ] ) 
加 ”参数 result 表示 资源 类 型 ， 要 传 入 的 是 由 mysql_query0 函 数 返 回 的 数据 指针 。 
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参数 iesult type 是 可 选 参数 ， 整 数 类 型 要 传 入 的 是 MYSQL ASSOC (关联 索引 ) 、 | 

MYSQL NUM (数字 索引 ) 和 MYSQL BOTH (同时 包含 关联 和 数字 索引 的 数组 ) ， 本 参 | 

数 的 默认 值 是 MYSQL _BOTH。 | 

该 函数 返回 根据 从 结果 集 取得 的 行 生 成 的 数组 , 如 果 没有 更 多 行 则 返回 false。 mysql fetch_array0 | 

函数 是 mysql_fetch_row0 的 扩展 版 本 。 除 了 将 数据 以 数字 索引 方式 存储 在 数组 中 之 外 ， 还 可 以 将 数据 | 
作为 关联 索引 存储 ， 用 字段 名 作为 键 名 。 

如 果 结 果 中 的 两 个 或 以 上 的 列 具 有 相同 字段 名 ， 最 后 一 列 将 优先 。 要 访问 同名 的 其 他 列 ， 必 须 用 | 

该 列 的 数字 索引 或 给 该 列 起 个 别名 。 对 有 别名 的 列 ， 不 能 再 用 原来 的 列 名 访问 其 内 容 。 | 


AW 注意 ， 本 另 寺 返回 的 字段 名 区 分 大 小 写 ， 这 是 最 容易 外 咯 的 问题 
| 


【示例 】 使 用 mysql_fetch_arrayO 函 数 获取 返回 记录 集中 逐 行 记录 数组 ， 并 把 结果 打印 出 来 ， 显 
示 效 果 如 图 19.33 所 示 。 


<?php 
$link = mysql_connect("localhost", "root", "11111111" or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 
误 ".mysql_error0); 
$db selectd = mysql select db("db admin", $link); 
$sql = "select * from tb_admin"; 
Sresult = mysql_query($sql, $link): 
while($info = mysql_fetch_array($result, MYSQL NUMD){ 
printf ("ID: %s Name: %s Email: %s", $info[0], $info[1], Sinfo[2]): 
Printf ("<br />"); 





} 
mysql_free_result($result): 
?> 


€ ERIE EEC ”> ， 


ID:; 1 Name: zbangsan Email: zhangyan@163.com 
TD: 2 Name lisi Email lisi@163 com 





图 19.33 ”把 查询 的 数据 显示 出 来 
19.7.6 ”获取 记录 集 对 象 信息 


使 用 mysql_fetch_array0 函 数 能 够 获取 查询 记录 集中 的 一 条 记录 ， 并 把 它 转换 为 数组 格式 。 不 过 
使 用 mysql_fetch_object0 函 数 同样 能 够 获取 查询 结果 集中 的 一 行 数据 , 但 是 它 会 把 获取 的 记录 转换 为 
对 象 。 

Imysql_fetch_objectO 函 数 的 语法 格式 如 下 : 

object mysql _fetch_object ( resource $result ) 


该 函数 能 够 返回 根据 所 取得 的 行 生成 的 对 象 ， 如 果 没 有 更 多 行 则 返回 false。mysql_fetch_objectO 
函数 和 mysql fetch_array0 函 数 类 似 ， 只 有 一 点 区 别 ， 即 返回 一 个 对 象 而 不 是 数组 ， 因 此 也 只 能 通过 
字段 名 来 访问 数组 ， 而 不 是 偏 移 量 (数字 是 合法 的 属性 名 )。 


$row -> col name 
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其 中 $row 表示 结果 集 ， 而 col_name 表示 列 名 。 注 意 ， 该 函数 返回 的 字段 名 是 区 分 大 小 写 的 。 
【示例 】 使 用 mysql_fetch_arrayO 函 数 获取 查询 记录 集中 的 记录 ， 并 通过 对 象形 式 显 示 出 来 ， 如 
图 19.34 所 示 。 





<?php 
$link = mysql_ connect("localhost" "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 
误 ".mysql_error0); 
$db selectd = mysql select db("db admin", $link): 
$sql = "select * from tb admin"; 
$result = mysql query($sql, $link); 
echo "<table border= 1 width="100%'><tr><th>ID</th><th>Name</th><th>Email</th></tr>"; 
while($info = mysql fetch object(Sresult){ 
echo "<tr><td>" . $info->id "</td>"; 
echo "<td>" . $info->name "</td>"; 
echo "<td>" . $info->email . "</td></r>": 
} 
echo "</table>"; 
mysql_free_result($result); 
?> 





[hanasan@163 com 























[GEIGcom 








19.34 ”把 查询 的 数据 显示 出 来 


从 执行 速度 上 分 析 ，mysql_fetch_object0 函 数 与 mysql fetch_array0 一 样 ， 也 几乎 和 mysql_fetch_ 
row0 一 样 快 ( 差 别 很 不 明显 )。 


19.7.7 ”获取 记录 集 行 信息 


mysql_fetch_row() 函 数 与 mysql_fetch_objectO 〇 和 mysql_fetch_array0 函 数 一 样 都 是 从 返回 的 查询 记 
录 集 中 获取 一 条 记录 ， 但 是 mysql_fetch_row0 函 数 能 够 把 取出 的 一 行 转换 为 枚 举 数组 进行 输出 。 

其 语法 格式 如 下 : 

array mysql_ fetch row (resource $result ) 


该 函数 能 够 返回 根据 所 取得 的 行 生成 的 数组 ， 如 果 没 有 更 多 行 则 返回 false。 
mysql_fetch_row() 从 和 指定 的 结果 标识 关联 的 结果 集中 取得 一 行 数据 并 作为 数组 返回 。 每 个 结果 
的 列 存 储 在 一 个 数组 的 单元 中 ， 偏 移 量 从 0 开始 。 依 次 调用 mysql_fetch_ row0 将 返回 结果 集中 的 下 
一 行 ， 如 果 没 有 更 多 行 则 返回 false。 
【示例 】 使 用 mysql_fetch_row0 函 数 获取 查询 记录 集中 的 记录 , 并 通过 数组 形式 显示 出 来 , 如 图 19.35 
所 示 。 


<2php 
$link = mysql_connect("localhost". "root". "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 
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S$db selectd = mysql select_ db("db_ admin". $link): 
$sql = "select* from tb admin": 

Sresult = mysql_query($sql. $linlo: 

echo "<table border="1' width="100%'><tr><th>ID</th><th>Name</th><th>Email</th></tr>"; | 图 
while($info = mysql fetch row(Sresul)){ | 


echo "<tr><td>". Sinfo[0] "<hd>" 


误 ".mysql_error0): 
| 


) 六 















































Tsi@l6icom 





| | 
[zhangsan@163 com | 





图 19.35 ”把 查询 的 数据 显示 出 来 
19.7.8 ”获取 记录 集 记录 数 


如 果 要 想 了 解 SQL 查询 记录 和 集 的 记录 数 ， 可 以 使 用 mysql num rowsO 函 数 实现 ， 该 函数 的 具体 
语法 格式 如 下 : 


int mysql num rows ( resource $result ) 


mysql_num_rows(O) 函 数 能 够 返回 结果 集中 行 的 数目 。 该 函数 仅 对 SELECT 语句 有 效 ， 如 果 要 取得 
被 INSERT、UPDATE、DELETE 查询 所 影响 到 的 行 的 数目 ， 请 使 用 mysql_affected_rowsO 函 数 。 | 
【示例 】 使 用 mysql_num rows0 函 数 获取 查询 记录 集中 的 记录 数 ， 如 图 19.36 所 示 。 | 


<?php | 

$link = mysql_connect("localhost". "root", "11111111") or die("MySQL 服务 器 未 启动 ， 或 者 用 户 名 密码 输入 错 | 
误 "mysql_ errorO): 

$db selectd= mysql select db("db admin", $link): 

$sql = "select * from tb admin"; 

$result = mysql_query($sql. $link): 

echo "共计 查询 到 : " .mysql_num rows($result) ." 条 记录 "; 

mysql_free_result($result): 

Ne 


eos p+ sc]ecoar :| 
共计 查询 到 2 条 记录 





图 19.36 显示 查询 的 记录 数 
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容 提示 : 如 果 使 用 mysql unbuffered_query0 函 数 执行 SQL 语句 ， 则 直到 结果 集中 的 所 有 行 都 被 提 
取 后 mysql num rowsO 函 数 才能 返回 正确 的 值 。 


19.8 案例 实战 : 设计 电子 公告 牌 


| PHP 数据 库 操作 是 Web 开发 中 比较 核心 的 技术 ， 本 节 将 通过 PHP 与 MySQL 结合 开发 一 个 电子 
| 公告 管理 模板 ， 了 解 PHP+MySQL 开发 的 基本 操作 思路 。 电 子 公告 栏 主要 功能 包括 动态 添加 、 修 改 、 
删除 、 查 询 和 浏览 公告 信息 。 在 操作 之 前 ， 请 安装 本 书 源 代 码 中 的 db_board 数据 库 ，db_board 数据 
库 的 创建 和 安装 过 程 可 以 参考 第 20 章 的 内 容 。 


19.8.1 添加 公告 


实现 公告 信息 的 添加 功能 , 主要 用 到 SQL 的 INSERT 语句 , 使 用 mysql_query0 函 数 执行 INSERT 
语句 ， 完 成 将 表单 中 的 数据 添加 到 数据 库 中 。 
【操作 步骤 】 
第 1 步 ， 在 网 站 根 目录 下 新 建 board 文件 夹 ， 把 board 文件 夹 作为 本 案例 的 根 目录 。 
第 2 步 ， 新 建 index.php 文件 ， 在 首页 导航 栏 中 为 “添加 公告 ”定义 导航 链接 ， 链 接 到 add.php 文 
件 ， 为 了 简化 操作 ， 这 里 使 用 图 像 地 图 快速 定义 超 链接 ， 如 图 19.37 所 示 。 
| CH] 商 R。 和 @。 相 : 时 天 全 村 py 


国 mp_site | 本 地 和 加 v 
PE 














































check_tel. ho 
二 uy 














属性 
< 





> mL | 梢 式 下 | 无 站 FE 
杷 css wm] 无 因 古 9 


国 | 单元 恪 水平) 居中 对 齐 ~ 宽 的 | 不 换行 中 ) 口 背 虹 二 多 
一 -站 委 直 a) 栅 ~v 高 只 | 如 标量 多 口 


19.37 定义 热点 链接 


| 第 3 步 ， 新 建 add.php 文件 ， 在 该 页 面 中 添加 一 个 表单 。 在 表单 中 包含 一 个 文本 框 、 一 个 文本 区 
| 域 和 两 个 操作 按钮 ， 其 中 一 个 为 提交 按钮 ， 另 一 个 为 重 置 按 钮 。 设 置 <fomm> 标 签 的 action 属性 值 为 
check_add.php， 表 单 结构 的 代码 如 下 ， 设 计 的 效果 如 图 19.38 所 示 。 
<form name="forml" method="post" action="check add.php"> 
<table width="520" height="212" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> 
! <tr> 
| <td width="87" align="center"> 公 告 主题 ，</td> 














1 不 地 珊 上 这 让 将 共 1307 不 地 节 。 [卓志 








| <td width="433" height="31"><input name="txt_title" type="text" id="txt_title" size="40"> *<td> 
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< 
< | 
<td height="124" align="center"> 公 告 内 容 : </td> 
<td><textarea name="txt_content" cols="50" rows="8" id="txt_content"></textarea></td> 
</t> 
<t> 
<td height="40" cc: "2" align="center"><input name="Submit" type="submit" class="btn grey" 
value=" 保 存 " onClick="return check(form1):"> &nbsp; 
<input type="reset" name="Submit2" value=" 重 置 "></td> 





0 功能 芋 航 区 因 您 当前 的 位 置 - 公告 管理 


日 公告 管理 


添 吉 公 告 信息 














图 19.38 设计 的 添加 公告 表单 


第 4 步 ， 新 建 check_add.php 文件 ， 对 表单 提交 的 信息 进行 处 理 。 首 先 ， 连 接 数 据 库 服务 器 和 数 
据 库 ， 设 置 数据 库 编码 格式 。 然后， 通过 POST 方法 获取 表单 提交 的 信息 ， 最 后 把 表单 信息 编写 为 
SQL 字符 串 ， 并 使 用 INSERT 语句 把 表单 提交 的 信息 写 入 MySQL 数据库。 详细 代码 如 下 : 

<?php 


Sconn=mysql_connect("localhost"."root","11111111") or die(" 数 据 库 服务 器 连接 错误 "mysql_errorO): 
Imysql_select_db("db_board".Sconn) or die(" 数 据 库 访 问 错误 ".mysql_error0); 


mysql_query("set names utf8"): // 设 置 字符 编码 
Stitle=$_POST['txt title]: // 获 取 标题 信息 
Scontent=$_POST['txt_content]: // 获 取 内 容 信息 | 
Screatetime=date("Y-m-d H:is"): // 设 置 插入 时 间 | 
! 


$sql=mysql_query("insert into tb_board(title.content.createtime) values('$title',"$content','$createtime’)"); // 执 
行 插入 操作 
这 $sqD{ 
echo "<script>alert( 公 告 添加 成 功 ):windowlocation href-'addphp':</script>": 


} 
mysql_free_result($sqD): // 关 闭 记录 和 集 
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Imysql_ close($conn): /关闭 数据 库 连接 





ye 


在 上 面 的 代码 中 ，date0 函 数 用 来 获取 系统 的 当前 时 间 ， 内 部 的 参数 用 来 指定 日 期 时 间 的 格式 ， 
仿 F | 这 里 需要 注意 的 是 字母 H 要 求 大 写 ， 它 代表 时 间 采 用 24 小 时 制 计算 。 在 公告 信息 添加 成 功 后 ， 使 用 
| JavaScript 脚本 弹出 提示 对 话 框 , 并 在 JavaScript 脚本 中 使 用 window.location.href='add.php' 重 新 定位 到 


I A ana. 


19.8.2 查询 公告 


实现 添加 公告 信息 后 ， 下 面 来 浏览 和 查询 公告 信息 ， 本 实例 主要 使 用 SELECT 语句 动态 检索 数 
据 库 中 的 公告 信息 , 使 用 mysql_query0 函 数 执行 SELECT 查询 语句 , 使 用 mysql_fetch_objectO 函 数 获 
取 查 询 结果 ， 通 过 do...while 循环 语句 输出 查询 结果 。 

【操作 步骤 】 

第 1 步 ， 新 建 menu.php 文件 ， 把 19.8.1 节 示 例 中 的 左 侧 导航 内 容 复 制 到 menu.php 文档 中 ， 文 档 
内 容 不 包含 完整 的 HTML 结构 信息 ， 仅 包含 导航 结构 信息 ， 如 图 19.39 所 示 ， 并 在 menu.php 文档 中 
定义 两 个 热点 链接 ， 分 别 链接 到 add.php 和 search.php 文件 。 

<map name= "Map"> 

<area shape="rect" coords="30.45.112.63" href="add. php"> 
<area shape="rect" coords="29.71.114.90" href="search php"> 
</map> 





函 ENwwwboardwmenu php -Ox 
table width="202" border="0" cellspacing="0" cellpedding="0" ~ 








t="34" backgzound="images/image_03.91f">énbsp;</+ 





村 


"310" valign="top"><img src="images/image_09.gif" width="202" 
310" border="0" usenap="#Map >/: 






" coords="28,1 165" href="delete.php" /> 
nnrqe hr nr， 


<area shape: 
</map> | 














图 19.39 设计 menu.php 文档 结构 
第 2 步 ， 分 别 在 index.php、add.php 文档 中 使 用 include0 函 数 包含 menu.php 文件 ， 代 码 如 下 : 
<?php include("menu.php"):?> 
| 第 3 步 ， 新建 search.php 文件 ， 在 该 页 面 中 添加 一 个 查询 表单 ， 表 单 中 包含 一 个 搜索 文本 框 和 一 
| 个 提交 按钮 ， 表 单 结构 代码 如 下 : 


<form name="forml" method="post" action=""> 

查询 关键 字 &nbsp: <input name="txt_keyword" type="text" id="txt_keyword" size="40"> 
| &nbsp: <input type="submit" name="Submit" value= "搜索 " onClick="return check(form)"> 
| </form> 
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| 
并 添加 表单 验证 代码 ， 用 来 防止 用 户 随意 输入 字符 或 者 空 提交 查询 。 | 
<script language="javascript"> | 
function check(form){ 
if(form .txt_keyword.value—""){ 
alert(" 请 输入 查询 关键 字 !"):form txt_keyword focus(:return false: 





} 
form.submitO: 
} 
</script> | 
当 单 击 【 保 存 】 按 钮 时 ， 将 调用 该 函数 ， 用 来 检测 文本 框 中 的 信息 是 否 为 空 。 | 
第 4 步 ， 在 该 文档 中 添加 如 下 PHP 和 HTML 混合 代码 ,在 PHP 脚本 中 连接 数据 库 , 设置 数据 库 | 
的 编码 格式 为 UTF8。 通 过 POST 方法 获取 表单 提交 的 查询 关键 字 ， 通 过 mysql_query0 函 数 获取 执行 | 
模糊 查询 ， 通 过 mysql_fetch_objectO 函 数 获取 查询 结果 ， 通 过 do...while 循环 语句 把 查询 结果 输出 显 | 
示 ， 最 后 关闭 记录 集 和 数据 库 连接 。 | 
< | 
if(isset( $_POST['txt keyword] ) ) { 
Sconn=mysql_connect("localhost","root","11111111") or die(" 数 据 库 服 务 器 连接 错误 ".mysql_error()); 
mysql_select_db("db_board",$conn) or die(" 数 据 库 访问 错误 ".mysql_error0): 
mysql_query("set names utf8"); 
$keyword=$ POST['txt keyword]: 
$sql=mysql_query("select * from tb_board where title like ‘%$keyword%%' or content like '"%$keyword%"); 
Srow=mysql fetch_object($sq): 





这 !$row){ 
echo "<font color='red> 您 搜索 的 信息 不 存在 ， 请 使 用 类 似 的 关键 字 进行 检索 !</font>"; 
jelsef | 
人 > | 
<table class="table"> | 
<t> | 
<th width="221"> 公 告 标题 </th> | 
<th width="329"> 公 告 内 容 </th> | 
< | 
<2php | 
dof | 
?> | 
<tr bgcolor="#FFFFFF"> | 
<td><?php echo $row->title:?></td> | 
<td><?php echo $row->content:?></td> | 
</t> | 
<2php | 
}while($row=mysql fetch object($sqD): | 
mysql free result($sq]): 
mysql_close($conn): 
SEE 


</table> 
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全 | 第 5 步 ， 在 正 浏 览 器 中 输入 http://localhost/board/search.php， 按 Enter 键 ， 即 可 看 到 所 有 的 公告 
Note | 信息 ， 在 搜索 文本 框 中 输入 关键 字 ， 然 后 单 击 “ 搜 索 ” 按 钮 ， 在 页 面 底部 会 自动 显示 搜索 的 相关 公告 
信息 ， 如 图 19.40 所 示 。 








19.40 ”搜索 公告 信息 


19.8.3 更 新 公告 


在 添加 公告 信息 之 后 ,可 能 会 需要 对 公告 内 容 进行 再 次 编辑 ,为 此 本 节 讲解 如 何 添加 更 新 公告 内 
容 的 功能 。 
【操作 步 又】 
第 1 步 ， 打开 menuphp 文档 ， 添 加 如 下 热点 链接 ， 以 便 导航 到 update.php 文档 。 可 以 借助 
Dreamweaver 可 视 化 工具 快速 添加 。 
<map name="Map"> 
<area shape="rect" coords="27.122.113.141" href="update.php"> 
</map> 
第 2 步 , 新 建 update.php 文件 ， 在 该 页 面 中 使 用 SELECT 语句 检索 全 部 的 公告 信息 ， 并 通过 表格 
结构 显示 出 来 ， 然 后 为 每 条 记录 绑 定 一 个 编辑 图 标 ， 为 该 图 标 添加 超 链接 ， 链 接 到 modify.php 文档 ， 
| 演示 代码 如 下 
| a href="modity.php?id=<7php echo $row->id:2>"> 
| <img src="images/update gif' width="20" height="18" border="0"> 
| </a> 





| 第 3 步 ， 新 建 modifyphp 文件 ， 在 该 文档 中 实现 对 update php 文件 传递 过 来 的 id 值 所 对 应 的 记 
| 录 进 行 编辑 。 首 先 ， 完 成 数据 库 的 连接 ， 并 根据 超 链接 传递 过 来 的 id 值 ， 从 数据 库 中 找到 对 应 的 记 
| 录 。 代 码 如 下 : 
| 
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| 

<?php | 

if(!isset($ GET["id"] ) ){ | 
echo"<script>alert(' 你 没有 选择 操作 记录 。'):</script>"; 





} 
else{ 
Sconn=mysql_connect("localhost","root"."11111111") or die(" 数 据 库 服 务 器 连接 错误 ". mysql_error0); 
mysql_select_db("db_board".$conn) or die(" 数 据 库 访问 错误 "Imysql_errorO): 
mysql_query("set names utf8"): 
$id=$_GET["id"]: 
$sql=mysql query("select * from tb board where id=$id"): | 
Srow=mysql fetch_object($sqD):; | 
?> | 





第 4 步 , 在 该 页 面 中 添加 表单 结构 ， 并 把 对 应 的 字段 值 绑 定 到 文本 框 和 文本 区 域 中 ， 同 时 添加 一 | 
个 隐藏 域 、 提 交 按钮 和 重 置 按钮 ， 设 置 <form> 标 签 的 action 的 属性 值 为 check_modify.php 文档 。 具 体 | 
代码 如 下 : | 
! 
<form name="forml" method="post" action="check modify.php"> | 
<table width="520" height="212" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> 
<h> 
<td width="87" align="center"> 公 告 主题 ，</td> 
<td width="433" height="31"><input name="txt title" type="text" id="txt_title” size="40" value="<?php 
echo $row->title;?>"> <input name="id" type="hidden" value="<?php echo $row->id:?>"></td> 
</t> 
<tr> 
<td height="124" align="center"> 公 告 内 容 : </td> 
<td><textarea name="txt_content" cols="50" rows="8" id="txt_content"><?php echo $row->content;?> 
</textarea></td> 
</> 
<t> 
<td height="40" colspan="2” align="center"><input name="Submit" type="submit" class="btn grey" 
value=" 修 改 " onClick="retum check(forml):"> &nbsp: 
<input type="reset" name="Submit2" value=" 重 置 "></td> 
</t> 
</table> 
</form> 


| 
! 
第 5 步 ， 新建 check_modify.php 文档 ， 在 该 文档 中 清除 所 有 的 HTML 结构 代码 ， 输 入 下 面 代码 。 | 
当 运 行 示例 代码 ， 在 index.php 页 面 单 击 编辑 公告 超 链接 ， 进 入 到 update php 页 面 ， 在 该 页 面 中 单 击 | 
其 中 任意 一 条 公告 信息 后 的 编辑 图 标 , 进入 modify php 页 面 ， 在 该 页 面 显示 指定 的 公告 信息 ， 并 被 绑 | 
定 到 表单 域 中 , 此 时 用 户 就 可 以 对 其 进行 编辑 , 编辑 完毕 , 最 后 单 击 【 修 改 】 按 钮 , 由 check modifyphp | 
文档 负责 把 编辑 后 的 信息 重新 写 入 到 数据 库 中 ， 实 现 对 数据 的 更 新 操作 ， 运 行 结果 如 图 19.41 所 示 。 | 
<?php 
$conn=mysql_connect("localhost","root"."11111111") or die(" 数 据 库 服 务 器 连接 错误 ".mysql_error0); 
mysql select_db("db_board".$conn) or die(" 数 据 库 访问 错误 ".mysql_error0); 
mysql query("set names utf8"): 
Stitle=$_POST["txt title"]: 
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Scontent=$ POST["txt content"]: 
S$id=$_POST["id"]: 
$sql=mysql._ query("update tb_board set tidle='$title' content='$content’ where id=Sid"); 
Ap fssqD{ 
全- | header("Location'update php): 
| jelse{ 
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19.8.4 删除 公告 


如 果 公 告 信息 已 经 不 再 需要 ， 或 者 添加 错误 的 公告 信息 ， 则 应 该 把 它 删除 。 同 时 为 了 节省 资源 ， 
定期 删除 不 需要 的 公告 内 容 也 是 公告 管理 的 一 项 主要 内 容 。 下 面 利用 DELETE 语句 ， 根 据 指定 的 id 
值 ， 动 态 删除 数据 库 中 指定 的 公告 信息 。 

【操作 步 又】 

第 1 步 ， 在 菜单 导航 页 中 添加 删除 操作 的 热点 链接 ， 并 链接 到 delete.php 文件 。 

第 2 步 ， 新 建 delete.php 页 面 ， 在 该 页 面 中 使 用 SELECT 语句 检索 出 全 部 的 公告 信息 ,使 用 do.… 
while 循环 语句 通过 表格 形式 输出 显示 ， 并 在 每 条 记录 后 面 添加 一 个 单元 格 ， 插 入 一 个 删除 图 标 ， 并 
为 图 标定 义 超 链接 ， 链 接 到 check_del.php 文件 , 将 公共 信息 的 id 值 绑 定 到 参数 中 ， 其 关键 代码 如 下 : 

<a href="check_del.php?id=<?php echo $row->id:?>"> 

<img src="images/delete .gif' width="22" height="22" border="0"> 

</a> 

第 3 步 ， 新 建 check_del.php 文件 ， 在 该 文档 中 根据 超 链接 传递 过 来 的 id 值 ， 执 行 DELETE 删除 
| 语句 ， 删 除数 据 表 中 指定 的 公告 信息 。 有 具体 代码 如 下 : 


: <?php 
| $conn=mysql_connect("localhost"."root"."11111111") or die(" 数 据 库 服务 器 连接 错误 "mysql_errorO): 
! Imysql_select_db("db_board".$conn) or die(" 数 据 库 访 问 错误 ".mysql_error0); 
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iysql_queryC'set names ug | 

$id=$ GET["id"]: | 

S$sql=mysql_query("delete from tb_board where id=$id"); 

if($sqD{ | 
echo "<script>history back0:windowlocation href-'delete php?id=$id:</script>": | 图 

Jelse{ | 

echo "<script>alert(' 公 告 信息 删除 失败 !"):history.backO:window.location.href='delete.php?id=$id':</script>": 


) 六 





} 
?> 


由 于 该 页 面 是 动态 代码 ， 没 有 指定 编码 格式 ， 当 在 浏览 器 中 浏览 时 ， 会 出 现 乱码 现象 ， 为 了 解决 | 
这 个 问题 ， 可 以 在 页 面 中 显 式 添加 编码 格式 : | 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8"> | 
第 4 步 , 运行 示例 ， 在 index.php 页 面 中 单 击 删除 公告 信息 超 链接 导航 ,打开 delete.php 页 面 ,在 | 
该 页 面 中 单 击 每 一 条 公共 信息 后 的 删除 图 标 ， 就 会 弹出 一 个 提示 对 话 框 ， 单 击 【确定 】 按 钮 ， 完 成 对 
指定 的 公告 信息 删除 操作 ， 如 图 19.42 所 示 。 
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图 19.42 ”删除 公告 信息 
19.8.5 分 页 显示 


当 添 加 的 公告 信息 很 多 时 ， 在 一 页 中 显示 会 影响 浏览 ， 为 了 方便 用 户 快速 浏览 公告 信息 ， 可 以 把 
公告 信息 进行 分 页 显示 。 

【操作 步骤 】 

第 1 步 ， 在 菜单 导航 页 中 添加 分 页 操作 的 热点 链接 ， 并 链接 到 page.php 文件 。 

第 2 步 ， 新 建 page.php 页 面 ， 在 该 页 面 中 使 用 SELECT 语句 检索 出 全 部 的 公告 信息 ,使 用 do.… 
while 循环 语句 通过 表格 形式 输出 显示 ， 具 体 代码 如 下 : 


<?php 
$conn=mysql_connect("localhost"."root"."111111") or die(" 数 据 库 服务 器 连接 错误 "mysql_errorO): 
mysql_select_db("db_board".$conn) or die(" 数 据 库 访问 错误 "mysql_errorO): 
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一 一 于 绝 兴 入门 到 疹 遂 
| 2 


mysql_query("set names utf8"): 
if (isset( $_GET["page"] )) 

Spage =$_GET["page"]: 
else 





| <td width="3796">&nbsp:&nbsp: 页 次 : <?php echo $page:?>/<?php echo $page_count:?> 页 &nbsp: 记 录 : 
| <?php echo $message_count:?> 条 &nbsp: </td> 
<td width="63%" align="right"> 


<?php 

if($page!=1){ 话 如 果 当 前 页 不 是 首页 */ 
echo "<a href=page.php?page=1> 首 页 </a>&nbsp:"; 让 显示 “首页 ” 超 链接 */ 
echo "<a href=page.php?page=".($page-1)."> 上 一 页 </a>&nbsp:"; /* 显 示 “ 上 一 页 ” 超 链接 */ 

} 

if($page<$page_count){ 证 如 果 当 前 页 不 是 尾 页 */ 
echo "<a hre 人 page.php?page=".($page+l)."> 下 一 页 </a>&nbsp:": ”人 * 显 示 “ 下 一 页 ” 超 链 接 */ 
echo "<a href=page.php?page=".$page_count."> 尾 页 </a>"; 证 显示 “ 尾 页 ” 超 链接 */ 

} 


Inysql free_ result($sqD: 
mysql_close($conn); 


| 
| 
| S$page =$_GET["page"]; // 获 取 查 询 字 符 串 传递 的 当前 页 信息 
Note 上 # $page 为 当前 页 ， 如 果 $page 为 空 ， 则 初始 化 为 1 */ 

| if (Spage—""){ 
| Spage=1:} 
! if (is numeric($page)){ 
| Spage size=5; // 每 页 显示 5 条 记录 
! $query="select count(*) as total from tb_board order by id desc"; 
| Sresult=mysql_query($query); // 查 询 符合 条 件 的 记录 总 条 数 
| $message_count=mysql_result($result,0."total"):// 要 显示 的 总 记录 数 

$page_count=ceil($message_count/$page_size); // 根 据 记录 总 数 除 以 每 页 显示 的 记录 数 求 出 所 分 的 页 数 

Soffset=($page-1)*$page_size:; // 计 算 下 一 页 从 第 几 条 数据 开始 循环 
| $sql=mysql query("select * from tb board order by id desc limit $offset, $page size"); 
! $row=mysql fetch object($sq)):; 
| if(!Srow){ 

echo "<font color='red> 暂 无 公告 信息 !</font>"; 

} 
! a 
| > 
| <tr bgcolor="#FFFFFF"> 
| <td><?php echo $row->title;?></td> 

<td><?php echo $row->content:?></td> 

</> 
| <?php 
| }while($row=mysql_fetch_object($sqD)); 
| } 

?> 
| 第 3 步 ， 在 页 面 底部 添加 分 页 导航 信息 和 导航 超 链 接 ， 具 体 代码 如 下 : 
| < 分 页 导航 条 -> 
! <table width="550" border="0" cellspacing="0" cellpadding="0"> 
<tr> 

! 
! 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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</> 
</table> 


第 4 步 ， 运 行 示 例 ， 在 index.php 页 面 中 单 击 分 页 公告 信息 超 链接 导航 ， 打 开 page.php 页 面 ， 在 | 
该 页 面 中 单 击 底部 的 分 页 超 链接 文本 ， 可 以 快速 浏览 不 同 页 面 信 息 ， 如 图 19.43 所 示 。 | 
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( 呀 视频 讲解 : 40 分 钟 ) 


phpMyAdmin 是 使 用 PHP 编写 的 ， 以 网 页 方式 管理 MySQL 数据 库 的 一 个 开源 管理 工具 . 
使 用 phpMyAdmin 可 以 在 网 页 中 方便 地 输入 SQL 语句 ,尤其 是 要 处 理 大 量 数据 的 导入 和 导出 时 
更 为 方便 。 其 中 一 个 更 大 的 优势 在 于 由 于 phpMyAdmin 和 其 他 PHP 页 面 一 样 在 网 页 服务 器 上 搞 
行 ， 可 以 远程 管理 MySQL 数据 库 ， 方 便 地 建立 、 人 和 修改、 删除 数据 库 和 表 


【 学习 重点 】 

安装 和 配置 phpMyAdmin 
管理 账户 和 权限 

管理 数据 库 

设计 数据 库 
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20.1 安装 和 配置 phpMyAdmin 


作为 MySQL 数据 库 管理 工具 ，phpMyAdmin 可 以 通过 图 形 化 方式 对 MySQL 数据 库 进 行 操作 ， 
为 用 户 操作 MySQL 数据 库 提供 极 大 的 便利 。 本 节 主 要 介绍 phpMyAdmin 工具 的 安装 和 配置 。 


20.1.1 为 什么 使 用 phpMyAdmin 


phpMyAdmin 与 其 他 PHP 程序 一 样 在 网 页 服务 器 上 执行 ， 但 是 用 户 可 以 在 任何 地 方 、 任 何 时 间 
使 用 phpMyAdmin 产生 的 HTML 页 面 在 远 端 管 理 MySQL 数据 库 ， 方 便 地 建立 、 修 改 、 删 除数 据 库 
及 资料 表 。 因 此 也 成 为 一 个 简易 方式 输入 繁杂 SQL 语法 的 较 佳 途径 ， 尤 其 要 处 理 大 量 资料 的 汇 入 及 
汇 出 时 更 为 方便 。 

对 于 广大 PHP 开发 用 户 ， 特 别 是 初学 者 来 说 ， 在 下 面 情况 下 会 用 到 phpMyAdmin， 而 不 需要 通 
过 执行 系统 命令 来 管理 MySQL 数据 库 ， 非 常 适合 对 数据 库 操作 命令 不 熟悉 的 数据 库 管理 者 。 
需要 修复 MySQL 数据 库 。 
设置 MySQL 数据 库 用 户 权限 。 
检查 和 浏览 MySQL 数据 库 。 
执行 SQL 语句 。 
恢复 和 备份 MySQL 数据 库 
其 他 可 能 会 用 到 一 些 常见 问题 。 

当然 ， phpMyAdmin 也 存在 一 个 缺点 : 由 于 它 必须 安装 在 Web 服务 器 中 ， 所 以 如 果 没 有 合适 的 
访问 权限 ， 其 他 用 户 有 可 能 进入 操作 ， 损 害 网 站 数据 的 安全 。 


20.1.2 安装 phpMyAdmin 


phpMyAdmin 的 安装 过 程 比较 简单 ， 也 很 容易 出 错 ， 特 别 是 在 配置 参数 时 需要 小 心 。 

【操作 步骤 】 

第 1 步 ， 访 问 phpMyAdmin 官方 网 站 (http://www.phpmyadmin.net/)， 下 载 最 新 版 本 的 phpMyAdmin 
压缩 包 ， 如 图 20.1 所 示 。 
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20.1 下 载 phpMyAdmin 
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| 第 2 步 ， 将 下 载 文件 解压 缩 到 PHP 服务 器 Web 访问 路 径 下 。 文 件 夹 名 称 可 以 定义 为 phpmyadmin。 
| 也 可 以 根据 需要 重 命名 文件 来， 但 是 需要 修改 配置 参数 ， 确 保 访问 路 笃 对 应 。 
| 第 3 步 ， 在 PHP 服务 器 安装 目录 下 建立 临时 文件 夹 tmp， 然 后 为 该 文件 夹 添加 Everyone 用 户 ， 

| 并 设置 该 用 户 读 写 控制 权限 ， 如 图 20.2 所 示 。 

YY 第 4 步 ， 在 PHP 服务 器 安装 目录 下 打开 php.ini 配置 文件 ， 找 到 session.save_path 参数 ， 把 前 面 


0 分 号 mi 给， 取消 注 理 合 令 ， 癌 时 设置 为 


| session.save_path = "E:/php/tmp" 
深 提示 : php ini 配 置 文件 中 包含 3 处 session.save_path 选项 ， 根 据 需 要 都 应 进行 修改 。 同 时 应 该 根 
据 本 地 电脑 中 的 PHP 安装 路 径 来 进行 设置 。 


第 5 步 ， 在 php.ini 配置 文件 中 找到 session.auto_start 参数 ， 设 置 为 : 
| session.auto_start=1 
| 容 提示 ， 当 该 参数 值 设置 为 1 时， 表示 启 动 会 话 。 默 认 是 0， 即 禁用 会 话 . 


| 

第 6 步 ， 在 phpmyadmin 文件 夹 中 找到 config.sample.inc.php 配置 文件 ， 复 制 为 config.inc.php， 
| 然后 打开 该 文件 ， 添 加 如 下 配置 选项 。 

| gcfg[PmaAbsoluteUri] = http:/localhost8O/phpmyadmin' 

| $cfg["blowfish secret] = 'cookie’; 

| $cfg[DefaultLang'] = 'zh-gb2312': 

| $cfg[DefaultCharset] = 'gb2312'; 

| $cfe['Servers'][$il['auth type] = 'cookie': 


| 第 7 步 ， 修 改 完 以 后 , 重启 Apache 服务 器 , 在 正 浏览 器 地 址 栏 中 输入 “http:Wlocalhost80/phpmyadmin/ 
| user_password.php ”。 
| 第 8 步 ， 按 Enter 键 之 后 ， 如 果 显 示 如 图 20.3 所 示 ， 则 说 明 phpMyAdmin 安装 成 功 。 


SECSES € /© WE ER .crowndrm 
3 BEX = 


多 BS: EAphp5S\tmp 


组 或 用 户 各 (G): 





Avtnenticated Ueere phpMyAdrmin 


[村 Pe 人 Welcome to phpMyAdmin 
rrinictrators (eee Vdminictrators) v 





厂 





法 了 in 风行 

列 册 文 对 实 为 安 

Em 

SA 

有 关 符 演 公 限 攻 高 绚 但 早 ， 入 兰 让 襄 各 





局 




















| 图 20.2 添加 并 设置 Everyone 用 户 权限 图 203 成 功 安装 phpMyAdmin 
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20.1.3 配置 phpMyAdmin 


phpMyAdmin 配置 参数 都 存储 在 config.ine.php 文件 中 。 如 果 该 文件 不 存在 , 可 以 在 libraries 目录 | 
中 找到 config.defaultphp， 将 它 复制 到 phpmyadmin 目录 下 ， 并 更 名 为 config.inc.php。 | 

涉及 界面 设计 (如 颜色 ) 的 参数 ， 存 放 在 themes/pmahomme/layout.inc.php 文件 中 。 也 可 以 创建 
config.footerinc.php 文件 和 config.header.inc.php 文件 添加 站 点 的 自 定义 代码 ， 这 些 代码 将 显示 在 页 眉 | 
和 页 脚 。 | 





【示例 】 下 面 的 代码 分 别 配 置 了 phpMyAdmin 的 不 同 参数 。 | 

$cfg[PmaAbsoluteUri] 设 置 phppMyAdmin 安装 目录 的 完整 URL (包括 完整 的 路 径 )。 注 意 ， 在 某 些 | 
浏览 器 中 ，URL 大 小 写 比较 敏感 。 不 要 忘记 结尾 处 的 反 斜 杠 。 从 2.3.0 版 本 开始 ， 可 以 尝试 不 填写 该 | 
参数 ，phpMyAdmin 可 以 自动 检测 到 正确 的 配置 。 

本 节 介 绍 安装 phpMyAdmin 的 基本 配置 ， 打 开 libraries 目录 下 的 config.default.php 文件 ， 依 次 找 
到 下 面 各 项 ， 按 照 说 明 配置 即 可 。 

访问 网 址 

Scfe['PmaAbsoluteUri] ="; 

这 里 填写 phpMyAdmin 的 访问 网 址 。 

MySQL 主机 信息 

Scfel'Servers'][Si][host] = "localhost: 


填写 localhost 或 MySQL 所 在 服务 器 的 IP 地 址 ， 如 果 MySQL 和 该 phpMyAdmin 在 同一 服务 器 ， 
则 按 默认 值 localhost 进行 填写 。 

$cfg['Servers][$i[port] ="; | 

MySQL 端口 默认 为 3306， 保 留 为 空 即 可 ， 如 果 安 装 MySQL 时 使 用 了 其 他 的 端口 ， 需 要 在 这 里 | 
填写 。 | 

MySQL 用 户 名 和 密码 | 

$cfg['Servers'][$il[user] = root': /填写 MySQL 访问 phpMyAdmin 使 用 的 MySQL 用 户 名 ， 默 认为 root 

$cfg['Servers'][$il['password'] = ": /填写 对 应 上 述 MySQL 用 户 名 的 密码 

认证 方法 

$cfg['Servers'][$il['auth type'] = 'cookie': 考 虑 到 安全 的 因素 ， 建 议 这 里 填写 cookie。 

认证 方法 包括 cookie、http 和 config，config 方式 无 须 输 入 用 户 名 和 密码 ， 是 不 安全 的 ， 不 推荐 | 
使 用 。 当 该 项 设置 为 cookie 或 http 时 ， 登 录 phpMyAdmin 需要 数据 用 户 名 和 密码 进行 验证 ， PHP 安 | 
装 模 式 为 Apache， 可 以 使 用 http 和 cookie; PHP 安装 模式 为 CGI， 可 以 使 用 cookie。 | 

加 ”设置 短语 密码 | 

Scfe['blowfish secret] =": 

如 果 认 证 方法 设置 为 cookie， 需 要 设置 短语 密码 。 
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20.2 ”管理 账户 和 权限 


账户 管理 是 phpMyAdmin 的 核心 功能 ， 它 提供 可 视 化 的 方式 帮助 用 户 快速 添加 用 户 ， 并 设置 用 
户 权 限 ， 同 时 把 用 户 与 数据 库 绑 定 在 一 起 ， 具 体 说 明 如 下 。 


| 20.2.1 登录 phpMyAdmin 


在 开发 网 站 之 前 ， 应 先 设 计 好 数据 结构 ， 创 建 数据 库 和 数据 表 结 构 。 下 面 介绍 如 何 使 用 
phpMyAdmin 定义 数据 库 : 设计 数据 库 名 称 为 db_board， 该 数据 库 中 包含 一 个 tb_board 数据 表 ， 用 来 
存储 用 户 留言 信息 。 为 20.2.2 节 案 例 提供 数据 库 基础 。 

【操作 步骤 】 

第 1 步 , 启动 正 浏 览 器 ,在 地 址 栏 中 输入 “http://localhost:80/phpMyAdmin/”， 按 Enter 键 确认 启 
动 phpMyAdmin。 

第 2 步 ， 登 录 MySQL 数据 库 。 在 登录 界面 输入 MySQL 数据 库 的 用 户 名 和 密码 ， 本 地 MySQL 
默认 用 户 名 为 root， 密 码 为 用 户 安装 MySQL 服务 器 时 设置 的 用 户 密码 ， 输 入 完毕 ， 单 击 【 执 行 】 按 
钮 即 可 ， 如 图 20.4 所 示 。 
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20.4 登录 phpMyAdmin 


容 提示 : 在 phpMyAdmin 管理 中 ， 没 有 【确认 】 按 钮 一般 都 是 使 用 【执行 】 按 钮 ， 其 实意 思 是 
一 样 的 。 


痊 提示 : 不 管 是 本 机 测试 、 服 务 器 维护 ， 还 是 虚拟 主机 用 户 管理 MySQL， 都 要 用 到 phpMyAdmin 
在 线 软件 来 管理 MySQL。 登录 地 址 : 本 机 或 者 服务 器 用 户 一 般 默认 的 地 址 是 “ip: 端 口 ”， 
虚拟 主机 用 户 请 咨询 服务 器 提供 商 ， 服 务 器 用 户 为 了 使 用 方便 ， 可 以 给 phpMyAdmin 绑 
定 一 个 域名 。 登录 时 必须 使 用 拥有 创建 数据 库 权限 的 账号 ， 一 般 项 级 的 管理 员 账号 默认 为 
root 账 号 。 


“人 
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第 3 步 ， 成 功 登录 之 后 进入 phpMyAdmin 工具 主 界面 ， 在 phpMyAdmin 工具 主 界面 中 可 以 看 到 
本 地 MySQL 数据 库 以 及 服务 器 配置 信息 。 在 主 界面 左 侧 是 MySQL 服务 器 中 已 经 定义 的 数据 库 ， 单 
击 可 以 打开 对 应 的 数据 库 ， 在 主 界面 右 侧 顶部 显示 一 行 工 具 栏 ， 利 用 这 些 工具 按钮 ， 可 以 快速 对 | 
MySQL 数据 库 进行 操作 ， 主 界面 视图 如 图 20.5 所 示 。 | 
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图 20.5 ” phpMyAdmin 主 界面 
20.2.2 ”添加 用 户 和 权限 


在 服务 器 或 者 虚拟 主机 管理 上 , 每 个 网 站 都 会 创建 一 个 唯一 专属 使 用 数据 库 的 用 户 名 ,这 是 为 了 
安全 和 管理 的 需要 。 添 加 用 户 和 设置 用 户 权限 的 操作 步 又 如 下 : 

【操作 步骤 】 

第 1 步 ， 启动 phppMyAdmin， 登录 之 后 进入 phpMyAdmin 首页 ， 在 首页 右 侧 内 容 区 域 主导 航 栏 中 
单 击 【用 户 】 链 接 选项 ， 如 图 20.6 所 示 。 
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20.6 选择 【用 户 】 导 航 菜单 项 
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| 第 2 步 ， 在 用 户 管理 页 面 中 ， 显 示 当 前 的 MySQL 已 经 存在 的 会 员 账 号 列表 。 在 这 里 可 以 对 所 有 
， 用 户 的 权限 、 配 置 项 进行 重 设 ， 或 者 添加 和 删除 用 户 。 在 【用 户 概况 】 列 表 框 底部 单 击 【 添 加 用 户 】 


| 链接， 进入 用 户 创建 过 程 ， 添 加 一 个 新 用 户 ， 如 图 20.7 所 示 。 
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图 20.7 添加 新 用 户 
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上 

上 

| 

| 第 3 步 ， 打 开 添 加 用 户 页 面 ， 在 该 页 面 中 显示 用 户 创建 的 全 部 过 程 ， 分 为 3 部 分 ， 其 中 第 一 部 
| 分 为 用 户 账户 密码 设置 部 分 ， 如 图 20.8 所 示 。 
! 
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束 再 :| 使 文 本 二 






单 击 【 生 成 】 按 钮 可 以 生成 一 个 加 
密 后 的 密码 字符 串 






密码 和 重新 输入 ， 就 是 设置 密码 和 
确认 密码 输入 












20.8 填写 登录 信息 


| 
| 第 4 步 , 第 二 部 分 为 用 户 制定 数据 库 名 关联 权限 。 可 以 先 不 关联 数据 库 名 ,后面 操作 中 还 要 为 用 
| 户 指定 专属 数据 库 权 限 ， 如 图 20.9 所 示 。 

第 5 步 ， 第 三 部 分 为 用 户 制 定 权限 ， 一 般 在 关联 数据 库 前 不 要 设置 权限 。 如 果 在 创建 数据 库 用 户 
名 前 创建 了 数据 库 名 ， 并 且 选 中 【给 以 用 户 名 开头 的 数据 库 (usemame\_%) 授予 所 有 权限 】 复 选 
| 框 ， 这 里 就 可 以 设置 。 如 果 选 中 【创建 与 用 户 同名 的 数据 库 并 授予 所 有 权限 】 复 选 杠 ， 创 建 同 名 数据 
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库 名 ,这 里 也 可 以 设置 。 数 据 和 结构 都 可 以 开启 权限 ,但 是 管理 不 要 开启 ， 当 然 如 果 开设 了 一 个 管理 
员 账 号 ， 就 需要 开启 管理 权限 ， 如 图 20.10 所 示 。 


phpMuAmIn 
僵 副 以 加 日 
ET 回 


BNew 


市 秋山 
infornation_schoma 





加 讨 phpmyadmin 


创建 同名 数据 库 


用 户 数 所 诛 


口 部 诗 与 用 户 同名 的 救 声 庄 开 质子 所 有 可 限 


口 六 以 用户 名 _ 开头 的 列 捉 库 (Isaimmamal_%) 揪 予 所 各 如 了 
mm _、] 授权 给 同名 数据 库 











图 20.9 为 用 户 制定 数据 库 名 关联 权限 
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图 20.10 设置 用 户 权 限 


【知识 提示 】 

一 般 【 数 据 】 选 项 组 中 的 5 个 复 选 框 全 部 选中 ， 简 单 说 明 如 下 。 
SELECT: 是 指 允许 读 取 数 据 。 

INSERT: 是 指 允许 插入 和 蔡 换 数据 。 

UPDATE: 是 指 允许 更 改 数据 。 

DELETE: 是 指 允许 删除 数据 。 

FILE: 是 指 允 许 从 数据 中 导入 数据 ， 以 及 允许 将 数据 导出 至 文件 。 
【结构 选项 组 中 的 前 7 个 复 选 框 应 该 被 选中 ， 简 单 说 明 如 下 。 

回 “CTEATE: 允许 创建 新 的 数据 库 和 表 。 

回 ALTER: 允许 修改 现 有 表 的 结构 。 


加 加 加 四 加 


“Ts 





办 办 办 办 加 
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INDEX: 人 允许 创建 和 删除 索引 。 

DROP: 允许 删除 数据 库 和 表 。 

CREATE TEMPORARY TABLES: 允许 创建 暂时 表 。 
CREATE VIEW: 允许 创建 新 的 视图 。 

SHOW VIEW: 允许 查询 视图 。 


以 下 【结构 】 选 项 组 内 容 建议 不 选中 。 


回 
回 


CREATE ROUTINE: 允许 创建 新 的 存储 过 程 。 
ALTER ROUTINE: 允许 修改 存储 过 程 。 
EXECUTE: 人 允许 执行 查询 。 


以 下 【管理 】 选 项 组 内 容 建 议 不 选中 。 


办 办 办 办 办 多 多 凶 


GRANT: 允许 添加 用 户 和 权限 ， 而 不 允许 重新 载 入 权限 表 。 
SUPER: 允许 在 达到 最 大 允许 数目 时 仍 进行 连接 。 
PROCESS: 允许 查看 进程 列表 中 的 完整 查询 。 

RELOAD: 人 允许 重新 载 入 服务 器 设置 并 刷新 服务 器 的 缓存 。 
SHUTDOWN: 允许 关闭 服务 器 。 

SHOW DATABASES: 允许 访问 完整 的 数据 库 列表 。 

LOCK TABLES: 允许 锁 住 当前 线索 的 表 。 

REFERENCES: 在 此 版 本 的 MySQL 中 无 效 。 
REPLICATION CLIENT: 用 户 有 权 询问 附属 者 /控制 者 在 哪里 。 
REPLICATION SLAVE: 回复 附属 者 所 需 。 

CREATE USER: 允许 创建 和 重新 命名 的 用 户 账户 。 


【资源 限制 】 选 项 组 是 设置 数据 库 连接 查询 等 的 最 大 限制 数量 ， 一 般 建 议 全 部 填写 0， 不 要 做 限制 。 


MAX QUERIES PER HOUR。 

MAX UPDATES PER HOUR。 
MAX CONNECTIONS PER HOUR。 
MAX USER_ CONNECTIONS 。 





第 6 步 ， 按 要 求 填写 并 选中 权限 ， 最 后 单 击 右 下 角 的 【执行 】 按 钮 即 可 ， 如 图 20.11 所 示 。 


全 局 权限 。 门 全 达 


关 MySQL KR 
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20.11 执行 新 建 用 户 


“0 
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| 
第 7 步 ， 执 行 新 建 用 户 之 后 ， 返 回 用 户 列表 ， 在 页 面 右 侧 单 击 【 编 辑 权限 】 链 接 ， 然 后 可 以 返回 | 
上 一 步 设置 界面 ， 重 新 修改 该 用 户 的 各 种 权限 ， 如 图 20.12 所 示 。 | 








了 数据库 各 ME NA 加 S4 区 SA 四 3 LN 到 里 王子 和 于 包 绎 





二][ 编 纺 11 | 广 PHP 丰 习 1 
Ne 单 击 【 编 辑 权 限 】 链 接 ， 
用 户 概况 
可 以 修改 该 用 户 的 各 种 
用 户 主 册 。 守 “全 局 权限 培 m 报 。 提 作 
家 
口 sh% ar | -您 已 汉 加 了 一 个 新 用 户 - 是 。 疙 编 可 人 限 可 导出 
口 root localhost 是 ”at FRI 二 大 声 辐 识 阳 区 号 出 | 
Oe eee Sr soma | 
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侍 - 口 间 直 过 六 到 国 导出 


品 添加 用 己 


图 20.12 ”编辑 用 户 权限 


第 8 步 ，phpMyAdmin 直接 由 MySQL 权限 表 取 得 用 户 权限 。 修 改 完 用 户 权限 后 ， 需 要 返回 
phpMyAdmin 用 户 列表 页 面 ， 重 新 加 载 一 下 授权 ， 如 图 20.13 所 示 。 


mhont 
全 国 忆 曙 四 9 所 床 加 SQL 放下 有 记忆 34 同 SA 让 3 且 生 制品 变 便 Y 更 多 
( 昌 近 使 用 的 表 ) 可 人 口 & 千 考 p 有 加 人 


be 名 3a 户 
[a db_admin 
国 1g 由 board 
外 db pnm 
( 犹 庆 用户 所 有 权限 ,您 后 肝 际 两 户 ) 
天 -db_user 出 用 
外 os 口 出 | 与 用 户 后 名 加 缮 压 
-information_schema 

a mysql 

用 :1 porformaneo_schoma 

所 pnpmyadmm 


已 风险 选中 的 用 户 | 


注重 : phpMyAdmin 才 了 各 用 户 各 限 。 知 困 周 户 手动 生 入 而 ， 去 内 雁 信 可 能 与 于 务 吕 他 用 的 用 户 权限 有 号 。 
在 这 物 情 况 下 ， 您 应 在 幸 


百 | 








20.13 ”重新 载 入 权限 


20.2.3 创建 数据 库 


在 phpMyAdmin 中 可 以 快速 创建 一 个 数据 库 。 

【操作 步骤 】 

第 1 步 ， 启 动 bppMyAdmin， 在 首页 左 侧 导航 列表 中 单 击 【New】 选项， 或 者 在 右 侧 内 容 区 项 部 
导航 栏 中 单 击 【 数 据 库 】 导 航 选项 ， 切 换 到 数据 库 内 容 页 ， 如 图 20.14 所 示 。 | 

第 2 步 ， 在 【新 建 数据 库 】 文 本 框 中 输入 数据 库 的 名 称 ， 一 般 用 字母 表示 ， 如 db_test。 在 【排序 | 
规则 】 下 拉 菜 单 中 选择 数据 库 的 类 型 ， 一 般 选 择 gb2312_chinese_ci 表示 简体 中 文 ， 不 区 分 大 小 写 的 
意思 。 还 有 一 个 gb2312_bin 表示 简体 中 文 ， 二 进 制 。 当 然 ， 在 设置 数据 库 数据 类 型 时 要 与 页 面 和 程 
序 的 字符 编码 保持 一 致 。 例 如 ， 这 里 设置 数据 库 db_test 的 类 型 为 utfg_genera_ci， 如 图 20.15 所 示 。 
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全 加 局 回忆 
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! 二 主意 : 在 此 启用 数 天 库 绪 i| 避 能 号 到 同 汉 服务 器 科 MySQL 服务 甘 之 间 演 一 如 提 - 











雪 据 库 > 振 序 规划 
口 tb admi acf9_gcacral_ci 到 检查 权限 


图 20.14 进入 数据 库 操作 页 面 


phpMyAdmin 


会 到 忆 名 5 对 


RR 














图 20.15 设置 数据 库 名 称 和 类 型 
窑 提示 : utf8_bin 表示 将 字符 囊 中 的 每 一 个 字符 用 二 进 制 数据 存储 ， 区 分 大 小 写 。utf8_genera_ci 
不 区 分 大 小 写 ，ci 为 case insensitive 的 缩写 ， 即 大 小 写 不 敏感 。utf8_general cs 区 分 大 小 
写 ，cs 为 case sensitive 的 缩写 ， 即 大 小 写 敏 感 。 


第 3 步 ， 单 击 【 创 建 】 按 钮 ， 完 成 MySQL 新 数据 库 的 创建 。 此 时 ，phpMyAdmin 成 功 提示 数据 
库 创 建成 功 ， 并 在 下 面 的 数据 库 列 表 中 ， 如 图 20.16 所 示 。 


3 phonyadmivinder D ~ © A 
phpMyAdmin J - | 
会 国志 二 于 
(最 许 他 用 的 表 ) 回 





20.2.4 关联 用 户 和 数据 库 
| 在 202.2 节 中 介绍 了 如 何 添加 用 户 及 其 权限 ,在 20.2.3 节 中 介绍 了 如 何 创建 数据 库 ， 下 面 介绍 如 


-Te 
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| 

何 关联 权限 ， 把 数据 库 和 用 户 捆绑 在 一 起 。 | 

【操作 步 又】 | 

第 1 步 , 启动 phpMyAdmin， 登录 之 后 进入 phpMyAdmin 首页 ， 在 首页 右 侧 内 容 区 域 主导 航 栏 中 | 

单 击 【用 户 】 链 接 选项 。 | 

第 2 步 ， 在 用 户 管理 页 面 中 ， 显 示 当 前 的 MySQL 已 经 存在 的 会 员 账 号 列表 。 在 这 里 可 以 对 所 有 | 

用 户 的 权限 、 配 置 项 进行 重 设 ， 或 者 添加 和 删除 用 户 。 选择 要 操作 的 数据 库 用 户 名 , 单 击 【编辑 权限 】 
链接 ， 如 图 20.17 所 示 。 
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于 会 入 oF， 刁 
Moh tooo on Tam trvieges phonusen 
图 20.17 编辑 用 户 权限 


第 3 步 ， 在 打开 的 用 户 权限 页 面 中 ， 下 翻 页 面 找到 “ 按 数 据 库 指定 权限 ”设置 项 目 ， 从 数据 库 列 
表 中 找到 已 定义 的 db_test 数据 库 ， 如 图 20.18 所 示 。 
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数据 斥 。 可 限 质 梭 找 表 指定 积 陪 反 作 
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图 20.18 选择 数据 库 


第 4 步 ， 在 打开 的 页 面 中 ， 将 用 户 'tester'@'localhost 和 数据 库 db\_test 进行 绑 定 ， 并 指定 用 户 操 | 
作 该 数据 库 的 权限 明细 ， 如 图 20.19 所 示 。 

第 5 步 ， 一 般 选 中 【数据 】 选 项 组 的 全 部 权限 ， 以 及 【结构 】 选 项 组 的 7 个 权限 ， 详 细 说 明 可 以 
参阅 20.2.2 节 说 明 ， 当 然 可 以 全 部 选中 【数据 〗】 和 【结构 】 选 项 组 中 的 选项 ， 这 个 问题 不 大 ,【 管 理 】 
选项 组 中 的 选项 就 不 要 选 了 。 

第 6 步 ， 设 置 完毕 ， 单 击 右 下 角 的 【执行 】 按 钮 ， 完 成 用 户 和 数据 库 的 绑 定 操作 ， 由 于 按照 上 面 
的 设置 后 ， 就 看 不 到 数据 库 授权 绑 定 的 情况 ， 需 要 重新 进入 用 户 编辑 权限 页 面 ， 才 能 够 看 到 新 绑 定 的 
权限 信息 ， 如 图 20.20 所 示 。 
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可 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 
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图 20.20 ”显示 当前 用 户 绑 定 的 数据 库 和 权限 
旋 提示 :在 用 户 权限 页 面 下 面 还 可 以 修改 用 户 登录 密码 ， 如 图 20.21 所 示 。 如 果 不 需要 修改 密码 ， 





则 可 以 忽略 该 部 分 设置 。 
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20.21 修改 密码 


下 面 的 第 四 部 分 为 更 改 登录 信息 ， 也 就 是 修改 数据 库 用 户 名 的 信息 ， 如 图 20.22 所 示 。 当 网 站 数 
据 库 用 户 名 泄密 后 ， 可 以 在 这 里 快速 更 改 用 户 登 录 信息 。 

第 五 部 分 为 复制 数据 库 用 户 名 , 在 这 里 可 以 创建 一 个 同样 权限 的 数据 库 用 户 名 , 如 图 20.23 所 示 。 
该 部 分 功能 一 般 用 不 到 。 


.724 . 
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| 姑 收 如 录 信 生 等 抽 用 户 | 








图 20.22 更 改 用 户 登 录 信 息 
LLL 


图 。 你 留 日 用 户 * 
口 。 从 用 户 击 由 加 除 虽 用 户 < 

个- 巩 铺 日 用 户 的 所 有 积 梁 ， 然 后 出 除 |6 用 户 * 
站 -从 用户 才 中 障 院 昌 用 户 ,然后 重 前 线 入 积 卫 











图 20.23 ”复制 数据 库 用 户 名 


【拓展 】 当 一 台 服 务 器 多 个 人 管理 时 ， 就 需要 创建 多 个 管理 员 账号 ， 创 建新 的 MySQL 管理 员 用 


户 名 其 实 很 简单 : 


按 前 面 小 节 介 绍 的 方法 添加 一 个 新 用 户 名 , 设置 好 用 户 名 和 密码 ,在 数据 库 用 户 名 关联 的 数据 库 
名 中 不 要 绑 定 任何 数据 库 ， 然 后 在 用 户 权限 设置 项 目 中 选中 全 部 权限 ， 单 击 【 执 行 】 按 钮 ， 即 可 快速 


创建 一 个 管理 员 账 号 。 


要 删除 一 个 数据 库 ， 则 可 以 管理 员 身份 进入 phpMyAdmin， 按 如 图 20.24 所 示 操 作 即 可 。 
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选中 预 删除 的 数据 库 
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Paper 办 
图 20.24 ”删除 数据 库 
要 删除 用 户 名 ， 则 可 以 管理 员 身 份 进 入 phpMyAdmin， 按 如 图 20.25 所 示 操 作 即 可 。 
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RISE 单 击 【执行 】 按钮 删除 | | 
| 
可 以 同时 删除 同名 数据 库 [ew "| 


图 20.25 ”删除 用 户 名 





















20.3 管理 数据 库 


| 数据 库 管理 是 用 户 最 头疼 的 事情 ， 但 是 借助 pppMyAdmin 可 视 化 界面 ， 数 据 库 操作 变 得 非常 简 
| 单 ， 下 面 就 数据 库 常规 操作 进行 说 明 。 


| 20.3.1 检查 和 修改 数据 库 


当 需 要 检查 和 修改 数据 库 时 ， 可 以 按 如 下 步骤 操作 。 

【操作 步骤 】 

第 1 步 ， 登 录 并 进入 phpMyAdmin 首页 ， 在 左 侧 边栏 中 显示 服务 器 上 的 各 个 数据 库 ， 点 选 即 可 
| 进入 数据 库 ， 也 可 以 在 右 侧 内 容 区 项 部 导航 栏 中 单 击 【数据 库 】 图 标 进入 ， 如 图 20.26 所 示 。 
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一 二 单 击 可 以 打开 数据 库 














20.26 ”打开 数据 库 


We 
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第 2 步 ， 进入 数据 库 以 后 , 现在 左边 的 侧 边栏 里 显示 着 数据 库 的 各 个 表 ， 单 击 就 可 以 进入 ， 也 可 
以 单 击 右边 的 图 标 ， 如 图 20.27 所 示 。 
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三 | 在 操作 列 中 , 单 击 对 应 图 标 可 以 
浏览 数据 表 记 录 、 结 构 , 搜索 记 
录 , 插入 记录 , 清空 数据 表 , 或 
者 删除 数据 表 
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图 20.27 操作 数据 表 


第 3 步 ， 当 单 击 数据 表 的 结构 操作 图 标 ,可 以 打开 数据 表 结 构 ， 在 这 里 可 以 对 数据 表 字 段 进行 插 
入 、 修 改 、 删 除 等 各 种 操作 ， 如 图 20.28 所 示 。 
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20.28 ”编辑 字段 








20.3.2 ”修复 数据 库 


数据 表 损 坏 时 ， 可 以 通过 phpMyAdmin 进行 修复 。 

【操作 步 又】 

第 1 步 ， 登 录 phpMyAdmin， 进 入 需要 修复 的 数据 库 页面 ， 如 图 20.29 所 示 。 

第 2 步 ， 在 数据 库 操作 界面 中 ， 选 中 一 个 数据 表 ， 然 后 在 数据 表 列表 下 面 的 【选中 项 】 列 表 中 选 
中 【修复 表 】 选 项 ， 如 图 20.30 所 示 。 

第 3 步 , 执行 修复 操作 之 后 , phpMyAdmin 会 显示 修复 状态 信息 , 显示 当前 数据 表 被 修复 的 情况 ， 
如 图 20.31 所 示 。 
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20.3.3 ”备份 数据 库 


在 PHP 网 站 建设 中 ， 针 对 MySQL 数据 库 的 维护 是 日 常 工 作 ，MySQL 数据 库 的 导入 和 导出 实现 | 
备份 功能 就 是 其 中 之 一 。 本 节 介 绍 如 何 使 用 phpMyAdmin 对 MySQL 数据 库 进行 导入 和 导出 操作 , 以 | 
实现 数据 库 备 份 。 

【操作 步骤 】 

第 1 步 ， 启动 phppMyAdmin, 登录 之 后 进入 phpMyAdmin 首页 ， 在 首页 右 侧 内 容 区 域 主导 航 栏 中 

单 击 【 导 出 】 链 接 选 项 ， 如 图 20.32 所 示 。 
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图 20.32 选择 【导出 】 导 航 菜单 项 


第 2 步 ， 导 出 页 面包 含 左右 两 大 部 分 ， 左 侧 为 需要 导出 的 数据 库 列 表 ， 可 以 选择 全 部 导出 ， 也 可 
以 选择 导出 某 个 数据 库 。 然 后 在 右 侧 选择 pppMyAdmin 导出 的 文件 类 型 ， 默 认 导 出 的 是 SQL 格式 导 | 
出 ， 其 他 常用 的 导出 格式 有 CSV、WORD、XLS、YAML 等 ， 如 图 20.33 所 示 。 
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20.33 ”设置 导出 选项 
第 3 步 , 单 击 【 执 行 】 按钮 ， 此 时 浏览 器 会 弹出 保存 提示 条 ， 从 中 选择 【另存 为 ] 命令 , 打开 【 另 
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权 大 贡 设 计 与 网 站 建设 从 入 门 到 精通 


存 为 】 对 话 框 ， 把 SQL 文件 保存 到 本 地 文件 夹 中 ， 如 图 20.34 所 示 。 
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| 图 20.34 保存 备份 文件 
| 


| 20.3.4 ”导入 数据 库 


| 当 网 站 数据 库 发 生 异 常 时 ,如 果 之 前 备份 过 数据 库 ,只 要 通过 MySQL 命令 或 者 使 用 phpMyAdmin 
| 将 之 前 导出 的 SQL 文件 导入 相应 的 数据 库 中 即 可 。 
| 【操作 步骤 】 

第 1 步 , 启动 phpMyAdmin， 登 录 之 后 进入 phpMyAdmin 首页 ， 在 页 面 中 新 建 一 个 空 数据 库 , 或 
者 选择 一 个 已 经 建立 好 的 数据 库 ， 如 图 20.35 所 示 。 
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| 二 往 章 : 在 此 启用 数据 库 掏 计 司 能 导 玛 网 站 菇 扼 器 和 MySQL 服务 器 之 间 的 次 于 区 增 。 





菇 据 库 ~ 排序 规则 
20.35 ”新 建 空白 数据 库 


第 2 步 ， 在 首页 右 侧 内 容 区 域 主导 航 栏 中 单 击 【导入 】 链 接 选 项 ， 如 图 20.36 所 示 ， 打 开导 入 页 面 。 
| 第 3 步 ， 在 页 面 左 侧 数据 库 列表 中 ， 选 择 新 建 的 数据 库 ， 在 右 侧 内 容 区 域 单 击 【浏览 】 按 钮 ， 浏 
| 览 文件 位 置 ,选择 一 个 数据 库 文件 (db_northwind.sql), 注意 扩展 名 为 sql, 然后 设置 文件 的 字符 编码 ， 
| 确保 与 备份 数据 库 字符 编码 一 致 ， 设 置 “ 格 式 ” 为 SQL， 设 置 如 图 20.37 所 示 。 


| 次 提示 : 在 浏览 位 置 右 侧 有 最 大 限制 MB 的 提示 ， 它 表明 phpMyAdmin 默认 导入 的 最 大 文件 大 小 
| 限制 为 2MB， 如 果 希 望 phpMyAdmin 导入 大 文件 ， 最 简单 的 方法 是 修改 php.ini 配置 文件 
| 中 文件 上 传 大 小 的 配置 。 
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20.37 设置 导入 选项 


第 4 步 ， 导 入 文件 的 字符 集 ， 默 认 是 utfg， 这 里 需要 注意 phpMyAdmin 导入 、 导 出 的 SQL 文件 
字符 集 必须 要 相 一 致 ， 否 则 会 导致 MySQL 数据 库 出 现 乱 码 。 

部 分 导入 说 明 : 主要 应 用 在 大 文件 上 传 中 断 时 ， 可 以 从 中 断 行 开 始 继续 导入 。 

导入 文件 格式 与 phbpMyAdmin 导出 页 面部 分 类 似 ， 只 要 选择 正确 的 phpMyAdmin 导入 文件 格式 
即 可 。 

第 5 步 ， 单 击 【 执 行 】 按 钮 ， 即 可 完成 phpMyAdmin 的 导入 操作 ， 最 后 会 显示 导入 操作 成 功 的 
提示 信息 ， 如 图 20.38 所 示 。 
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图 20.38 ”完成 数据 库 导入 操作 
20.4 案例 实战 : 设计 简单 的 数据 库 


下 面 通过 一 个 简单 的 示例 介绍 如 何 使 用 phpMyAdmin 设计 数据 库 ， 以 方便 后 台数 据 管理 和 网 站 
开发 。 
| 【操作 步骤 】 
| 第 1 步 ， 在 phpMyAdmin 工具 主 界面 项 部 单 击 【 数 据 库 】 按 钮 ， 将 打开 “数据 库 ” 操 作 界 面 。 
| 在 打开 的 “数据 库 ” 操作 界面 中 输入 新 创建 的 数据 库 名 称 ， 如 db_board， 然 后 选择 数据 库 支持 的 字符 
| 编码 ， 也 可 以 省 略 ， 保 持 默认 编码 ， 最 后 单 击 【创建 】 按 钮 ， 开 始 创建 数据 库 ， 如 图 20.39 所 示 。 
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| 图 20.39 定义 新 的 数据 库 
| 第 2 步 ， 创 建 完毕 数据 库 ， 重 新 刷新 页 面 ， 这 时 就 可 以 在 phppMyAdmin 工具 主 界面 左 侧 数据 库 
| 列表 中 看 到 新 定义 的 数据 库 名 称 ， 单 击 该 数据 库 名 称 即 可 打开 数据 库 ， 如 图 20.40 所 示 。 
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图 20.40 打开 数据 库 


第 3 步 ， 在 打开 的 数据 库 主 界面 中 ， 输 入 数据 表 名 称 ， 以 及 该 表 包含 的 列 数 ， 单 击 【 执 行 】 按 钮 
即 可 定义 数据 表 ， 如 图 20.41 所 示 。 
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图 20.41 定义 数据 表 


第 4 步 ， 定义 数据 结构 ， 在 弹出 的 数据 表 界 面 中 ， 输 入 数据 表 结构 ， 包 括 数据 表 中 每 个 字段 的 名 
称 、 数 据 类 型 、 数 据 长 度 等 选项 ， 如 图 20.42 所 示 。 | 
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图 20.42 定义 数据 表 结 构 
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| 第 5 步 ， 填 写 完毕 字段 名 称 和 属性 ， 然 后 单 击 页 面 底部 的 【保存 】 按 钮 ， 则 phpMyAdmin 会 自 
| 动 保存 数据 ， 然 后 返回 数据 库 结构 页 面 ， 在 该 页 面 中 就 可 以 看 到 定义 的 数据 表 ， 单 击 该 表 名 称 ， 即 可 


| 打开 数据 表 结构 页 面 ， 如 图 20.43 所 示 。 
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在 此 可 以 编辑 每 个 字 
段 的 属性 , 也 可 以 添加 


展开 折叠 菜单 , 可 以 和 删除 字段 


查看 字段 列表 





图 20.43 ”查看 数据 结构 


第 6 步 ， 在 对 应 的 数据 库 和 数据 表 主 题 页 面 中 对 数据 库 和 数据 表 进行 操作 ， 如 删除 、 修 改 、 添 加 
等 操作 。 具 体操 作 就 不 再 演示 ， 用 户 可 以 借助 页 面 说 明 进行 快速 操作 。 
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使 用 PHP 操作 文件 
( 名: 视频 讲解 ，65 分 钟 ) 


在 网 站 开发 中 ， 考虑 到 网 络 安 全 问题 , 文件 操作 一 直 是 比较 难 的 技术 门槛 。 在 CIMS 应 用 系 
统 中 ,文件 操作 是 非常 有 用 的 ， 用 户 经 常 遇 到 生成 文件 目录 、 文 件 ( 夫 ) 编辑 等 操作 。PHP 能 
够 非常 好 地 支持 文件 操作 ， 借 助 配置 文件 和 函数 可 以 轻松 操作 文件 和 文件 夫 ， 自 如 应 对 远程 用 
户 上 传 的 文件 


【 学 习 重 点 】 


| 


吾 理 吾 吾 


使 用 PHP 操作 本 地 文件 
使 用 PHP 操作 本 地 目录 
远程 操作 文件 
文件 上 传 

操作 XML 文档 


a OO 


21.1 操作 文件 


| 

| 

| 

| 

文件 操作 包括 打开 /关闭 文件 、 读 写 文件 等 。 掌 握 文件 处 理 需 要 读者 理 清 思路 ， 并 能 够 灵活 应 用 

Note | 常用 文件 操作 函数 。 当 然 ， 读 者 也 应 该 清楚 文件 操作 的 一 般 步骤 : 

| 第 1 步 ， 打 开 文件 。 

| 第 2 步 ， 读 写 文件 ， 文 件 操作 的 主要 内 容 都 包含 在 该 步骤 中 ， 如 显示 文件 内 容 、 编 辑 内 容 、 写 入 

| 内 容 等 ， 或 者 设置 文件 属性 ， 如 文件 遍历 、 文 件 属性 等 。 

| 第 3 步 ， 关 闭 文件 。 

| 

21.1.1 打开 和 关闭 文件 

| 打开 文件 使 用 fopen0 函 数 ， 关 闭 文件 使 用 fclose0 函 数 。 注 意 ， 在 打开 文件 时 应 该 务必 小 心 ， 一 

| 不 小 心 可 能 就 会 把 文件 内 容 删 除 。 

| 1. 打开 文件 

| 操作 文件 之 前 ， 应 该 先 打开 文件 ， 这 是 进行 文件 存 取 的 第 一 步 。 在 PHP 中 使 用 fopen0 函 数 打开 

| 文件 。 语 法 格式 如 下 : 
| Tesource fopen( string $filename , string $mode [, bool $use_include path [. resource $zcontext ]] ) 
! 
| 参数 filename 指定 要 打开 的 文件 路 径 和 文件 名 ， 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 ， 如 果 没 有 
| 任何 前 级 则 表示 打开 的 是 本 地 文件 。 
| 参数 Node 表示 打开 文件 的 方式 ， 可 取 的 值 说 明 如 表 21.1 所 示 。 
! 
! 
| 
| 
| 
| 
| 
| 
| 
! 
| 
| 
| 
| 
| 
| 
| 


表 21.1 fopen() 中 参数 Node 的 取 值 列表 


取 值 | 模式 名 称 说 了 明 

r 只 读 读 模 式 ， 将 文件 指针 指向 文件 头 ， 进 行 读 取 

本 读 写 读 写 模式 ， 将 文件 指针 指向 文件 头 ， 进 行 读 写 。 在 现 有 文件 内 容 的 末尾 之 前 进行 写 入 
就 会 覆盖 原 有 的 内 容 

只 写 写 模式 , 将 文件 指针 指向 文件 头 并 将 文件 大 小 截 为 零 。 如 果 文 件 不 存在 则 尝试 创建 之 ， 
进行 写 入 文件 

+ 读 写 写 模式 , 将 文件 指针 指向 文件 头 并 将 文件 大 小 截 为 零 。 如 果 文 件 不 存在 则 尝试 创建 之 

a 追加 写 入 方式 打开 文件 ， 将 文件 指针 指向 文件 末尾 。 如 果 文件 不 存在 则 尝试 创建 之 


at 追加 读 写 方式 打开 文件 ， 将 文件 指针 指向 文件 末尾 。 如 果 文件 不 存在 则 尝试 创建 之 





写 模 式 打开 文件 ， 从 文件 头 部 开始 写 ， 如 果 文 件 存在 ， 则 该 文件 将 不 被 打开 ， 而 是 返 




















坟 慎重 写 

回 false 

读 写 模式 打开 文件 ， 从 文件 头 部 开始 写 ， 如 果 文 件 存在 ， 则 该 文件 将 不 被 打开 ， 而 是 
X+ 慎重 写 返回 false 

以 二 进 制 模式 进行 操作 ， 用 于 与 其 他 模式 进行 连接 ， 如 果 文 件 系统 能 够 区 分 二 进 制 文 
b 二 进 制 件 和 文本 文件 ， 可 能 会 使 用 它 。Windows 可 以 区 分 ，UNIX 则 不 可 区 分 ， 推 荐 使 用 这 





种 选项 ， 便 于 获取 最 大 程度 的 可 移植 性 ， 它 是 默认 模式 
bt 文本 用 于 与 其 他 模式 进行 结合 ， 这 种 模式 只 是 Windows 下 的 一 个 选项 
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第 三 个 参数 use_include_path 是 可 选 的 ， 该 参数 在 配置 文件 php.ini 中 指定 一 个 路 径 ， 如 果 希 望 服 | 
务 器 在 这 个 路 径 下 打开 所 指定 的 文件 ， 则 可 以 设置 为 1 或 者 tue。 | 
【示例 1】 下 面 代码 使 用 fopen0 函 数 打开 指 定 的 外 部 文件 。 
<?php 
S$handle = fopen("/home/rasmus/file.txt", "r"); 
$handle = fopen("/home/rasmus/file.gif", "wb"): 
S$handle = fopen("http://www.example.com/", "r"): 
S$handle = fopen("ftp://user:password@example.com/somefile.txt", "Ww"); 
Ws 








如 果 在 打开 和 写 入 文件 上 遇 到 问题 ， 记 住 要 确保 所 使 用 的 文件 是 服务 器 进程 所 能 够 访问 的 。 在 
Windows 平台 上 ， 要 小 心 转 义 文件 路 径 中 的 每 个 反 斜 线 ， 或 者 用 斜 线 。 如 : 

<?php 

S$handle = fopen("c:\\data\\info.txt", "r"); | 

?> | 

2， 关闭 文件 | 

对 文件 操作 结束 后 ,应 该 关闭 文件 ， 否则 会 引起 错误 ,在 PHP 中 可 以 使 用 felose0 函 数 关闭 文件 ， 
该 函数 的 语法 如 下 : 

bool fclose( resource $handle ) 

该 函数 将 handle 指向 的 文件 关闭 。 成功 时 返回 tue， 在 失败 时 返回 false。 注 意 , 文件 指针 必须 有 
效 ， 并 且 是 通过 fopen0 或 fsockopen0 成 功 打 开 的 。 如 : 

【示例 2】 下 面 使 用 felose0 函 数 关 闭 打 开 的 文件 。 

<?php 


Shandle = fopen('somefile.txt', T"): 
fclose($handle): 
?> 





21.1.2 读 取 文件 内 容 


从 文件 中 可 以 读 取 一 个 字符 、 一 行 字符 或 者 整个 文件 ， 还 可 以 读 取 任意 长 度 的 字符 串 。 

1. 读 取 整 个 文件 

读 取 整个 文件 可 以 使 用 readfile0、file0 和 file_get_contents0 函 数 。 这 3 个 函数 的 用 法 说 明 如 下 。 

readfile() | 

readfile0 函 数 用 于 读 入 一 个 文件 ， 并 将 其 写 入 到 输出 缓冲 ， 如 果 出 现 错误 则 返回 false。 语 法 格式 | 
如 下 : 

int readfile( string $filename [. bool $use_include_path [. resource $context ]] ) 

该 函数 能 够 返回 从 文件 中 读 入 的 字 节 数 。 如 果 出 错 返 回 false， 显 示 错 误 信 息 。 

如 果 想 在 include_path 中 搜索 文件 ， 可 以 使 用 可 选 的 第 二 个 参数 并 将 其 设 为 true。 | 
< 轴 注意 ;使 用 readfile0 函 数 不 需 要 打开 和 关闭 文件 ， 不 需要 echo、print 等 输出 语句 ， 直 接 写 出 文 

件 路 径 即 可 。 | 
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| CD 


回 fae0 

file0 函 数 可 以 读 取 整 个 文件 的 内 容 ， 不 过 file0 函 数 将 文件 内 容 按 行 存放 在 数组 中 ， 包 含 换行 符 
在 内 ， 如 果 失 败 ， 则 返回 false。 语 法 格式 如 下 : 

鲜 | | array file( string $filename [. int $use include path [. resource $context ]] ) 


Note 与 fe_get_contents0 函 数 一 样 ,只 除了 fle0 将 文件 作为 一 个 数组 返回 。 数 组 中 的 每 个 单元 都 是 文 
| 件 中 相应 的 一 行 ， 包 括 换行 符 在 内 。 如 果 失 败 ，file0 函 数 将 返回 false。 如 果 想 在 include_path 中 搜寻 
| 文件 的 话 ， 可 以 将 可 选 参数 use_include_path 设 为 "1"。 
【示例 1】 通 过 HTTP 从 URL 中 取得 HTML 源 文件 ， 并 将 文件 读 入 数组 。 
<?php 
Slines = file(http://www.baidu.com/"): 
// 在 数组 中 循环 ， 显 示 HTML 的 源 文件 并 加 上 行 号 
foreach ($lines as $line num => $line) { 
echo "Line #<b>{$line num}</b> : ". htmlspecialchars($line) . "<br />\n"; 


| } 
| ?> 
| 
| 加 file_get contents() 

名 e_get_contentsO 函 数 能 够 将 文件 内 容 读 入 一 个 字符 串 ， 如 果 有 offset 和 maxlen 参数 ， 将 在 参数 
offset 指定 的 位 置 开 始 读 取 长 度 为 maxlen 的 内 容 。 如 果 失 败 ， 则 返回 false。 

string file get contents(string $filename [, bool $use include path [，resource $context [，int $offset [，int 
Smaxlen ]]]] ) 

file_get_contents() 函 数 是 用 来 将 文件 的 内 容 读 入 到 一 个 字符 串 中 的 首选 方法 。 如 果 操 作 系 统 支持 
还 会 使 用 内 存 映射 技术 来 增强 性 能 。 如 果 要 打开 有 特殊 字符 的 URL (如 空格 ), 就 需要 使 用 urlencodeO 
进行 URL 编码 。 

【示例 2】 使 用 上 述 3 个 函数 分 别 读 取 me.txt 文本 文件 内 容 ，me.txt 文本 文件 内 容 如 图 21.1 所 示 ， 

则 演示 效果 如 图 21.2 所 示 。 案 例 详细 代码 如 下 : 


<body> 
<d> 


<df> 使 用 Teadfile0) 函 数 读 取 文 件 内 容 : </d> 
<dd> 
<?php readfile('me.txt): ?> 


</dd> 
<dt> 使 用 file0 函 数 读 取 文件 内 容 : </dt> 
<dd> 


<Iphp 
$f arr= file(me.txt): 
foreach($f arr as $cont){ 
echo $cont."<br>"; 


} 
> 
<Jdd> 
| <dt> 使 用 fle_get_contents0 函 数 读 取 文件 内 容 : </dt> 
| <?php 
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> 


$f chr = file_ get contents(‘me.txt"); | 
echo Sf chr: | 


x 
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图 21.1 metxt 文本 文件 内 容 图 21.2 读 取 文本 文件 内 容 并 进行 显示 

2. 读 取 一 行 数据 

读 取 单行 和 数据 可 以 使 用 fgets0 和 fgetss0 函 数 ， 具 体 说 明 如 下 。 

回 “fgetsO 

fgets0 函 数 用 于 一 次 读 取 一 行 数据 ， 语 法 格式 如 下 : 

String feets( int $handle [, int $length ] ) 

该 函数 能 够 从 参数 handle 指向 的 文件 中 读 取 一 行 并 返回 长 度 最 多 为 length-1 字 节 的 字符 串 。 在 
读 取 中 如 果 碰 到 换行 符 (包括 在 返回 值 中 )、EOF 或 者 已 经 读 取 了 length-1 字 节 后 停止 。 如 果 没 有 指 
定 length， 则 默认 为 IKB， 或 者 说 1024 字 节 。 如 果 读 取出 错 ， 则 返回 false。 

回 fgetss() 

fgetssO 函 数 是 fgets0 函 数 的 变 体 ， 两 者 功能 完全 相同 ， 用 于 读 取 一 行 数据 ， 同 时 fgetss0) 函 数 会 过 
滤 掉 读 取 内 容 中 的 HTML 和 PHP 标记 。 其 语法 格式 如 下 : 

string feetss( resource $handle [. int $length [, string $allowable_tags ]] ) 

【示例 3】 使 用 上 述 两 个 函数 分 别 读 取 me.php 页 面 内 容 ，me.php 代码 如 图 21.3 所 示 ， 则 演示 效 
果 如 图 21.4 所 示 。 案 例 详 细 代码 如 下 : 


<body> 

<d> 
<dt> 使 用 feets 函数 : </dt> 
<dd> 


<?php 
Sfopen =fopen(me.php'rb): 
while(!feof($fopen)){ 
echo feets($fopen): 
} 
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felose($fopen): 
re 


<ldd> 
<d 忆 使 用 fgetss 函数 : </dt> 
<dd> 


<2php 


Note | Sfopen = fopen('me.php'rb): 
| while(!feof($fopen){ 


| echo feetss($fopen): 


EECEEEG FE 





图 21.3 mephp 网 页 源 代码 图 21.4” 读 取 网 页 内 容 并 显示 出 来 
3. 读 取 一 个 字符 
如 果 要 获取 一 个 字符 ， 则 使 用 fgetc0 函 数 ， 当 对 文件 中 某 个 字符 进行 查找 时 ， 需 要 有 针对 性 地 对 
某 个 字符 进行 读 取 ， 此 时 使 用 feetcO 函 数 就 派 上 了 用 场 。 人 feetc0 函 数 的 语法 格式 如 下 : 
String feetc( Tesource $handle ) 
该 函数 返回 一 个 包含 有 一 个 字符 的 字符 串 ， 该 字符 从 handle 指向 的 文件 中 得 到 。 碰 到 EOF 则 返 
回 false。 
< 全 注意 : 文件 指针 必须 是 有 效 的 ， 必 须 指向 由 fopen0 或 fsockopen0 成 功 打 开 的 文件 ， 并 且 还 没有 
调用 felose() 函 数 关闭 文件 。 


【示例 4】 打 开 this.txt 文件 ， 逐 个 字符 地 读 取 文 件 内 容 并 显示 出 来 。 


<Iphp 
S$fopen = fopen('this.txt ‘rb); 
while(false 一 (Schr = feetc(Sfopen))){ 
echo Schr 
| 国 
| felose(Sfopen): 

?> 
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I | 
如 果 要 读 取 多 个 字符 ， 则 可 以 使 用 fread0 函 数 ， 该 函数 的 用 法 如 下 : | 
string fread( int $handle ,int $length ) | 
freadO 函 数 从 文件 指针 handle 读 取 最 多 length 个 字 节 。 该 函数 在 读 取 完 最 多 length 个 字 节 数 ， 或 | 
到 达 EOF 时 ， 就 会 停止 读 取 文件 。 如 果 出 错 就 返回 false。 | 国 
【示例 S】 打 开 this.txt 文件 ， 然 后 读 取 前 面 38 个 字符 。 
<?php 
S$fopen = fopen('this.txt','rb"); 
echo fread($fopen,38); 
fclose($fopen):; 
?> 


) 六 





21.1.3 ” 写 入 文件 内 容 


写 入 数据 比较 常用 ， 在 PHP 中 可 以 使 用 fwrite0 和 file_put_contents0 函 数 向 文件 中 写 入 数据 。 
fwrite() 函 数 也 可 以 写作 fputs0 函 数 ， 它 们 的 用 法 相同 ， 其 语法 格式 如 下 : 


int fwrite( resource $handle , string $string [, int $length ] ) 


fwrite() 把 string 的 内 容 写 入 文件 指针 handle 处 。 如 果 指 定 了 length， 当 写 入 了 length 个 字 节 或 者 | 
写 完了 string 以 后 ， 写 入 就 会 停止 。 该 函数 将 返回 写 入 的 字符 数 ， 出 现 错误 时 则 返回 false。 | 
| 

| 


< 负 注 意 : 如 果 给 出 了 length 参数 ， 则 magic_quotes runtime 配置 选项 将 被 忽略 ， 而 string 中 的 儿 线 | 
将 不 会 被 抽 去 。 


file_put_contents() 函 数 是 PHP5 新 添加 的 ， 该 函数 的 语法 格式 如 下 : 
int file put_contents( string $filename . string $data [, int $flags [. resource $context ]] ) 


该 函数 的 功能 与 依次 调用 fppen0、fwrite0 和 felose0 功 能 一 样 。 参 数 说 明 如 下 。 
filename: 指定 要 被 写 入 数据 的 文件 名 。 
data: 要 写 入 的 数据 。 类 型 可 以 是 string、array 或 者 是 stream 资源 。 
flags: 可 以 是 FILE USE INCLUDE PATH、FILE APPEND、LOCK _EX (获得 一 个 独占 锁 
定 ) ， 然 而 使 用 FILE_ USE_INCLUDE PATH 时 要 特别 谨慎 。 

context: 一 个 context 资源 。 

该 函数 将 返回 写 入 到 文件 内 数据 的 字 节 数 。 

【示例 】 分 别 调用 上 述 两 个 函数 向 服务 器 中 的 文件 写 入 一 段 ， 代 码 如 下 (fwrite.php )， 演 示 效 果 
如 图 21.5 所 示 。 


<?php 

Sfilepath = "that.txt"; 

$str="<dd> 你 自己 的 代码 如 果 超 过 6 个 月 不 看 ， 再 看 的 时 候 也 一 样 像 是 别人 写 的 </dd>"; 
echo "<dt>fwrite 函数 写 入 文件 : </dt>"; 

$fopen = fopen($filepath.'wb') or die( 文 件 不 存在 7) 

fwrite($fopen.$stD: 

felose($fopen): 

readfile($filepath): 

echo "<dt>file_put_contents 函数 写 入 文件 :</dt>"; 

file_put contents($filepath, $str): 


回回 四 
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readfile($filepath); 
?> 


© ERT EC [TAR 


你 自己 的 代 本 如 果 起 这 6 个 月 不 看 , 再 看 全 时 姓 也 一 样 像 是 别人 写 的 


Note | 你 自己 的 代 砚 如 果 超 过 6 个 月 不 看, 青帮 乐 时候 也 一 样 像 是 别人 写 的 





图 21.5 向 文件 中 写 入 内 容 


21.1.4 ”编辑 文件 


| 除了 对 文件 内 容 进 行 读 写 外 ， 读 者 还 可 以 对 文件 自身 的 很 多 属性 进行 操作 ， 如 复制 文件 、 重 命名 
| 文件 、 查 看 和 修改 文件 日 期 等 。 完 成 这 些 任 务 主要 依靠 PHP 强大 的 内 置 函 数 来 完成 ， 这 些 函 数 使 用 
| 简单 ， 用 法 也 大 同 小 异 ， 详 细 说 明 如 表 21.2 所 示 。 

| 

表 21.2 PHP 常用 文件 操作 函数 


函数 说 阴 


bo pC i es 复制 到 dest。 成 功 时 返回 true, 或 者 在 失败 时 


bool rename( string $oldname . string $newname | 尝试 把 oldname 重 命 名 为 newname。 成 功 时 返回 true, 或 者 在 


,resoUurce $context 失败 时 返回 false 

bool unlink( string $filename ) 删除 flename。 成 功 时 返回 tue， 或 者 在 失败 时 返回 false 
| int fileatime( string $filename ) 返回 文件 上 次 被 访问 的 时 间 ， 如 果 出 错 则 返回 false。 时 间 以 
| UNIX 时 间 稚 的 方式 返回 
| _int filemtime( string $filename 返回 文件 上 次 被 修改 的 时 间 ， 出 错时 返回 false 


返回 文件 大 小 的 字 节 数 ， 如 果 出 错 返回 false 并 生成 一 条 
E_WARNING 级 的 错误 

返回 一 个 关联 数组 包含 有 path 的 信息 。 包括 以 下 的 数组 单元 : 
dimame、basename 和 extension 

string realpath( string $path 返回 规范 化 的 绝对 路 径 名 。 如 果 失 败 ， 则 返回 false 

获取 由 fename 指定 的 文件 的 统计 信息 。 如 果 fename 是 符 
号 连接 ， 则 统计 信息 是 关于 被 连接 文件 本 身 的 ， 而 不 是 符号 
连接 。lstat0 和 stat0 相 同 ， 只 除了 它 会 返回 符号 连接 的 状态 。 
如 果 出 错 ，stat0 返 回 false， 并 且 发 出 一 条 警告 


| 在 读 写 文件 时 ， 除 了 file0 和 readfile0 等 少数 几 个 函数 外 ， 其 他 操作 函数 在 使 用 前 ， 都 必须 先 使 
| 用 fopen0 函 数 打开 文件 ， 最 后 再 使 用 felose0 函 数 关 闭 文件 。 而 读 取 文件 信息 的 函数 ， 则 不 需要 打开 
文件 ， 如 filesize 和 filename 等 。 


int filesize( string $filename ) 


| 
| mixed pathinfo( string $path [, int $options ]) 
| 


array stat( string $filename ) 


21.2 操作 目录 


| 目录 是 一 种 特殊 的 文件 , 要 浏览 目录 下 的 文件 , 读者 需要 先 打开 目录 , 浏览 完毕 , 应 该 关闭 目录 ， 
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这 与 文件 操作 类 似 。 目 录 操 作 主要 包括 打开 目录 、 浏 览 目录 和 关闭 目录 。 | 
| 

21.2.1 打开 和 关闭 目录 


打开 和 关闭 目录 与 打开 和 关闭 文件 操作 相同 , 但 是 打开 的 文件 如 果 不 存 在 ， 就 会 自动 创建 一 个 新 | 仿 路 
文件 ， 而 打开 的 目录 如 果 不 存在 ， 则 会 报错 。 | 





1. 打开 目录 
使 用 opendir0 函 数 可 以 打开 目录 ， 该 函数 的 语法 格式 如 下 : 
Tesource opendir( string $path [, resource $context ] ) 
参数 path 表示 要 打开 的 目录 路 径 。 如 果 打 开 成 功 ， 则 返回 目录 句柄 的 resource; 如 果 失 败 ， 则 返 
回 false。 
< 和 注意 ， 如果 path 不 是 一 个 合法 的 目录 或 者 因为 权限 限制 或 文件 系统 错误 而 不 能 打开 目录 ，opendir0 
返回 false 并 产生 一 个 了 WARNING 级 别 的 PHP 错误 信息 。 为 了 避免 错误 信息 ， 可 以 在 
opendirO 函 数 前 面 加 上 人 @ 符 号 来 抑制 错误 信息 的 输出 。 
2. 关闭 目录 
关闭 目录 使 用 closedir0 函 数 ， 该 函数 的 语法 格式 如 下 : 
Void closedir( resource $dir handle ) 
参数 dir_handle 表示 目录 句柄 的 resource， 之 前 是 由 opendir0 所 打开 的 。 
【示例 】 打 开 和 关闭 目录 的 结构 代码 如 下 : 
<2php 
$dir = "php/"; 
if (is dir(Sdir) { 
if ($dh = opendir($dir)) { 
while (($file = readdir($dh)) ! 一 false) { 
echo "filename: $file filetype: " . filetype($dir . $file) . "<br>": 


} 
closedir($dh): 
} 
} 
?> 


21.2.2 浏览 目录 

浏览 目录 可 以 使 用 scandir0 函 数 ， 该 函数 的 语法 格式 如 下 : 

array scandir( string $directory [. int $sorting_order [. resource $context ]] ) 

参数 directory 表示 要 被 浏览 的 目录 ，sorting_order 表示 默认 的 排序 顺序 是 按 字 母 升 序 排列 。 如 果 
使 用 了 可 选 参数 sorting_order( 设 为 1)， 则 排序 顺序 是 按 字 母 降序 排列 。 

该 函数 返回 一 个 array， 包 含有 directory 中 的 文件 和 目录 。 如 果 操作 成 功 ， 则 返回 包含 有 文件 名 
的 array, 如 果 失 败 则 返回 false。 如 果 directory 不 是 个 目录 , 则 返回 布尔 值 false 并 生成 一 条 E_WARNING 
级 的 错误 。 
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这 is dir(Spath){ 
$dir = scandir($path): 
foreach($dir as $value){ 
echo $value."<br>"; 
} 
jelse{ 
echo "目录 错误 !"; 


hp_site 
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目录 结构 和 内 容 在 网 页 中 读 取 目录 内 容 效 果 
图 21.6 浏览 目录 内 容 








21.2.3 ”编辑 目录 


除了 浏览 目录 外 ， 读 者 还 可 以 进行 各 种 常规 操作 ， 如 新 建 目录 、 删 除 目录 、 获 取 目 录 的 信息 等 ， 


这 些 函 数 用 法 也 大 同 小 异 ， 详 细 说 明 如 表 21.3 所 示 。 


表 21.3 PHP 常用 目录 操作 函数 
函数 
bool mkdir( string $pathname [. int $mode 
, bool $recursive [. resource $context ]]] ) 


说 了 明 
尝试 新 建 一 个 由 pathname 指定 的 目录 
尝试 删除 dimame 所 指定 的 目录 。 该 目录 必须 是 空 的 , 而 且 要 有 相 








Po ey 应 的 权限 。 成 功 时 返回 true， 或 者 在 失败 时 返回 flse 
et 取得 当前 工作 目录 如 果 成 功 则 返回 当前 工作 目录 , 失败 返回 false 
bool chdir( string $directory ) 将 PHP 的 当前 目录 改 为 directory 





给 出 一 个 包含 有 一 个 目录 的 字符 串 ， 本 函数 将 根据 相应 的 文件 系 


float disk free_space( string $directory ) 统 或 磁盘 分 区 返回 可 用 的 字 节 数 





给 出 一 个 包含 有 一 个 目录 的 字符 串 ， 本 函数 将 根据 相应 的 文件 系 


float disk total_space( string $directory ) 统 或 磁盘 分 区 返回 所 有 的 字 节 数 





返回 目录 中 下 一 个 文件 的 文件 名 。 文 件 名 以 在 文件 系统 中 的 排序 


string readdir( resource $dir handle ) 返回 





void rewinddir( resource $dir handle ) 将 dir handle 指定 的 目录 流 重 置 到 目录 的 开头 
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21.3 远程 操作 文件 


在 21.1 节 和 21.2 节 中 主要 介绍 了 PHP 操作 文件 和 目录 的 基本 方法 ,本 节 将 结合 案例 讲解 如 何在 | 


网 站 开发 中 对 远程 文件 进行 操作 ， 以 及 如 何 实现 文件 上 传 操作 等 。 
21.3.1 远程 访问 


在 实现 远程 访问 之 前 ， 读 者 需要 在 php.ini 中 配置 如 下 参数 : 

allow_url fopen = On 

在 php.ini 配 置 文件 中 找到 上 述 参数 ， 然 后 把 值 改 为 Oon， 即 开启 远程 访问 功能 ， 这 样 PHP 就 支持 
通过 URL 方式 访问 远程 文件 ， 并 对 远程 文件 执行 操作 。 

配置 完毕 ， 重 启 服务 器 即 可 使 用 HTTP 或 者 FTP 的 URL 格式 访问 远程 文件 。 
21.3.2 ”远程 定位 和 查询 

PHP 通过 文件 指针 的 方式 进行 远程 文件 的 定位 和 查询 , 文件 指针 函数 包括 rewind0、fseek0、feof0 
和 ftell0。 

1，rewind0) 

该 函数 将 文件 handle 的 指针 设置 为 文件 流 的 开头 。 其 语法 格式 如 下 : 

bool rewind( resource $handle ) 

如 果 操 作成 功 则 返回 true， 否 则 返回 false。 如 果 将 文件 以 附加 ("a" 或 者 "at") 模式 打开 ， 写 入 
文件 的 任何 数据 总 是 会 被 附加 在 后 面 ， 不 管 文件 指针 的 位 置 。 

2. fseekO 

该 函数 能 够 实现 指针 的 定位 。 其 语法 格式 如 下 : 

int fseek( resource $handle , int $offset [. int Swhence ] ) 

该 函数 能 够 在 与 handle 关联 的 文件 中 设 定 文件 指针 位 置 ， 如 果 操 作成 功 则 返回 0， 否则 返回 -1。 
注意 移动 到 EOF 之 后 的 位 置 不 算 错误 。 

新 位 置 从 文件 头 开 始 以 字 节 数 度 量 ， 是 以 whence 指定 的 位 置 加 上 offset。whence 定义 为 如 下 几 
个 值 。 
SEEK_SET: 设 定位 置 等 于 offset 字 节 。 
SEEK_CUR: 设 定位 置 为 当前 位 置 加 上 offset。 
SEEK_END: 设 定位 置 为 文件 尾 加 上 offset。 要 移动 到 文件 尾 之 前 的 位 置 ， 需 要 给 offset 传 
递 一 个 负 值 。 
如 果 没 有 指定 whence， 默 认为 SEEK_SET。 
3，feofO 
该 函数 能 够 测试 文件 指针 是 否 到 了 文件 结束 的 位 置 ， 其 语法 格式 如 下 : 
bool 全 of resource $handle ) 


加 加 加 
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《> 
如 果 文 件 指针 到 了 EOF 或 者 出 错时 则 返回 tue， 和 否则 返回 一 个 错误 ， 其 他 情况 则 返回 false。 
4. ftell0 
Ap 该 函数 返回 文件 指针 读 / 写 的 位 置 ， 其 语法 格式 如 下 : 
入 - roe he) 
Note | handle 指定 的 文件 指针 的 位 置 ， 也 就 是 文件 流 中 的 偏 移 量 。 如 果 出 错 ， 返 回 false。 
| 4 全 注意 文件 指针 必须 是 有 效 的 ， 且 必须 指向 一 个 通过 fopen0 或 popen0] 成 功 打 开 的 文件 。 在 附加 
| 模式 (加 参数 "a" 打开 文件 ) 中 fiell0 会 返回 未 定义 错误 。 


| 【示例 】 使 用 上 述 几 个 函数 分 别 读 取 文件 的 大 小 、 指 针 位 置 ， 输 出 指定 位 置 内 容 (rewind.php)， 
| 则 演示 效果 如 图 21.7 所 示 。 案 例 详细 代码 如 下 : 


<?php 

Sfilename = "this.txt": 

S$total = filesize($filename): 

这 is file(Sfilename)) { 
echo "<dl>"; 
echo "<dt> 文 件 总 字 节 数 : </dt><dd>".$total."</dd>"; 
S$fopen = fopen($filename,rb): 
echo "<dt> 初 始 指针 位 置 是 : </dP><dd>".ftell($fopen)."</dd>": 
fseek(Sfopen.21): 
echo "<dt> 使 用 fseek0 函 数 后 指针 位 置 </dt><dd>".ftell($fopen)."</dd>"; 
echo "<dt> 输 出 当前 指针 后 面 的 内 容 : </dt><dd>".fgets($fopen)."</dd>"; 
这 feofSfopen)) 

echo "<dt> 当 前 指针 指向 文件 末尾 : </dt><dd>".ftell($fopen)."</dd>"; 

Tewind($fopen): 
echo "<dt> 使 用 rewind0 函 数 后 指针 的 位 置 : </dt><dd>".fell($fopen)."</dd>"; 
echo "</d>"; 
felose($fopen): 

}else{ 


echo "文件 不 存在 "; 
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| 读 取 的 文件 内 容 在 网 页 中 显示 读 取 的 文件 内 容 
| 21.7 文件 指针 及 应 用 
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1 

| 

21.3.3 文件 锁定 | 
当 用 户 在 操作 文件 时 ， 为 了 避免 其 他 用 户 同 时 操作 该 文件 ， 应 该 在 操作 之 前 锁定 文件 。 在 PHP | 


中 锁定 文件 的 函数 是 flockO， 该 函数 的 语法 格式 如 下 : | 如 
bool flock( int $handle , int $operation [, int &$wouldblock ] ) 





flock0 函 数 操作 的 handle 必须 是 一 个 已 经 打开 的 文件 指针 。 参 数 operation 可 以 是 如 下 几 个 值 。 
加 ”共享 锁定 ( 读 取 的 程序 ) ， 将 operation 设 为 LOCK_SH。 
回 ”独占 锁定 〈 写 入 的 程序 ) ， 将 operation 设 为 LOCK_EX。 
释放 锁定 〈 无 论 共享 或 独占 ) ， 将 operation 设 为 LOCK_UN。 
如 果 不 希 望 flock0 在 锁定 时 堵塞 ， 则 给 operation 加 上 LOCK_NB。flock0 人 允许 执行 一 个 简单 的 可 
以 在 任何 平台 中 使 用 的 读 取 / 写 入 模型 , 可 选 的 第 三 个 参数 会 被 设置 为 true 锁定 操作 也 可 以 被 flose0 | 
释放 。 执 行 该 函数 时 ， 如 果 成 功 则 返回 tue， 失 败 返 回 false。 | 
【示例 】 在 下 面 示例 中 将 锁定 文件 me.txt， 然 后 再 打开 它 。 | 
! 


<?php 
$ 印 = fopen("me.txt" "w+"); 
if (flock($fp, LOCK EX)) { // 进 行 排他 型 锁定 
fwrite($fp, "Write something here\n"):; 
flock($fh, LOCK_UN): // 释 放 锁 定 
}else{ 
echo "不 能 够 锁定 该 文件 ""; 


felose(Sfp); 
?> 


由 于 flock0 需 要 一 个 文件 指针 , 因此 可 能 不 得 不 用 一 个 特殊 的 锁定 文件 来 保护 打算 通过 写 模式 打 
开 的 文件 的 访问 ， 在 fopen0 函 数 中 加 入 "w" 或 "w+"。 


21.4 远程 文件 上 传 


通过 HTTP 协议 上 传 文件 ， 需 要 在 php.ini 配置 文件 中 对 上 传 参数 进行 修改 和 设置 ， 同 时 需要 了 
解 预定 义 变量 $_ FILES 和 move_uploaded_file0 函 数 的 使 用 , 其 中 $_FILES 变量 用 来 对 上 传 文件 进行 限 
制 和 判断 ， 然 后 使 用 move_uploaded_file0 函 数 完成 文件 上 传 操作 。 


21.4.1 初始 化 配置 参数 


在 实现 远程 访问 之 前 ， 读 者 需要 在 php.ini 中 配置 文件 上 传 的 相关 信息 。 打 开 php.ini， 找 到 并 设 
置 如 下 几 个 配置 选项 。 

回 file uploads =on : 

是 否 允 许 通过 HITP 上 传 文件 的 开关 。 默 认为 ON， 即 是 开启 的 。 

回 upload tmp dir= 

文件 上 传 至 服务 器 上 存储 临时 文件 的 地 方 ， 如 果 没 指定 就 会 用 系统 默认 的 临时 文件 夹 。 
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回 upload max filesize = 2m:; 


| 
| 允许 上 传 文件 大 小 的 最 大 值 ， 默 认为 2MB。 
| 
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| post_ max size = 8m ; 
伟 办 | 通过 表单 POST 给 PHP 所 能 接收 的 最 大 值 ， 包 括 表 单 里 的 所 有 值 ， 默 认为 8MB。 
| 一 般 设 置 好 上 述 4 个 参数 后 ， 在 网 络 正常 的 情况 下 上 传 小 于 等 于 8MB 的 文件 不 成 问题 。 但 如 果 
Note 要 上 传 大 于 8MB 的 大 文件 ， 只 设置 上 述 四 项 还 不 一 定 能 行 。 除 非 网 速 等 于 大 于 100M/S， 否则 读者 还 
| 需要 设置 如 下 参数 。 
回 max execution time = 600; 
每 个 PHP 页 面 运行 的 最 大 时 间 值 ( 秒 )， 默 认为 30 秒 。 如 果 设 置 为 0， 则 表示 没有 时 间 限 制 。 
回 max_input time = 600; 
每 个 PHP 页 面 接收 数据 所 需 的 最 大 时 间 ， 默 认为 60 秒 。 
memory limit= 8m : 
| 每 个 PHP 页 面 占用 的 最 大 内 存 ， 默 认为 SMB。 
| 把 上 述 参数 修改 后 ， 在 网 络 所 允许 的 正常 情况 下 ， 就 可 以 上 传 大 体积 文件 。 
! 


| 21.4.2 设置 预定 义 变量 $_FILES 





| $_FILES 变量 存储 的 是 上 传 文件 的 相关 信息 ， 这 些 信息 对 于 上 传 功能 有 很 大 的 作用 ， 该 变量 以 二 
| 维 数组 的 形式 保存 的 信息 如 表 21.4 所 示 。 


上 
上 
| 表 21.4 ”预定 义 变量 $_FILES 元 素 


| 元 素 名 说 。 明 
| _$ FILES[filename][name 存储 上 传 文件 的 文件 名 
| _$_FILES[filename] [size 存储 上 传 文件 的 大 小 ， 单 位 为 字 节 
| $_FILES[filename] [tmp_name 文件 上 传 时 ， 首 先 在 临时 目录 中 被 保存 为 临时 文件 ， 该 变量 为 临时 文件 名 
| _$_FILES[filename] [typ 上 传 文件 的 类 型 
$_FILES[filename] [error 存储 了 上 传 文件 的 结果 ， 如 果 返 回 0， 则 说 明 上 传 成 功 


【示例 】 如 何 获取 上 传 文件 的 相关 信息 ， 页 面 代 码 如 下 〈$_FILES.php)， 演 示 效 果 如 图 21.8 所 示 。 


<body> 
<form action="" method="post" enctype="multipart/form-data"> 
<d> 
<dt> 上 传 文件 : </di> 
<dd> 
<input type="file" name="upfile"/> 
<input type="submit" name="submit" value=" 上 传 " /> 
</dd> 
</d> 
</form> 


<dt> 上 传 文件 信息 : </dt> 
<?php 
: if(!empty($ FILES)){ 
| foreach($ FILES[upfile] as $name => $value) 
| echo "<dd> ". $name.' = '$value'</dd> 
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type = image/jpes 
Up_numc = C:\Windows\Temp\php4770. Lab 
error - 0 


size = 438878 





21.8 上 传 文件 的 信息 
21.4.3 上传 文件 


要 上 传 文件 ， 必 须 调用 move_uploaded_file0 函 数 ， 该 函数 的 语法 格式 如 下 : 
bool move_uploaded file( string $filename , string $destination ) 


该 函数 将 检查 并 确保 由 参数 filename 指定 的 文件 是 合法 的 上 传 文件 ， 即 通过 PHP 的 HTTP POST 
上 传 机 制 所 上 传 的 。 如 果 文件 合法 ， 则 将 其 移动 为 由 destination 指定 的 文件 。 

如 果 flename 不 是 合法 的 上 传 文件 ， 不 会 出 现任 何 操作 ，move_uploaded_file0 将 返回 false。 如 果 
filename 是 合法 的 上 传 文件 ， 但 出 于 某 些 原因 无 法 移动 ， 不 会 出 现任 何 操作 ，move_uploaded file0 将 
返回 flse。 此 外 还 会 发 出 一 条 警告 。 如 果 目 标 文 件 已 经 存在 ， 将 会 被 覆盖 。 

【示例 】 如 何 使 用 move_uploaded_file0) 函 数 将 远程 文件 上 传 到 服务 器 上 指定 目录 中 ， 页 面 代码 
如 下 (move_uploaded_file.php)， 演 示 效 果 如 图 21.9 所 示 。 


<body> 
<form action="" method="post" enctype="multipart/form-data"> 


<d> 
<dt> 上 传 文件 : </dt> 
<dd> 
<input type="file" name="upfile"/> 
<input type="submit" name="submit" value=" 上 传 " /> 
</dd> 
<d> 
</form> 


<2php 

这 !empty($_FILES[up_file][name])){ 
Sfileinfo =$ FILES[up file]: /获取 文件 信息 
这 $fileinfo['size] < 1000000 && S$fileinfo['size]> 0){ 1/ 判断 文件 大 小 
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move Uploaded file(Sfileinfo[tmp name].Sfileinfo[name]): /将 上 传 的 文件 移动 到 新 位 置 
echo '<p> 上 传 成 功 </p>': 

Jelse{ 
echo '<p> 无 法 上 传 <p>"; 








图 21.9 执行 文件 上 传 操作 


21.5 操作 XML 文档 


XML 是 目前 比较 流行 的 语言 ， 是 Web 开发 中 常用 的 数据 格式 ， 无 论 是 RSS 订阅 、Web 服务 ， 还 
是 Ajax 技术 ， 都 需要 与 XML 有 着 直接 的 联系 ， 通 过 PHP 可 以 对 XML 数据 进行 操作 。 


21.5.1 创建 XML 文档 


PHP 不 仅 可 以 动态 生成 网 页 ， 还 可 以 生成 XML 文档 。 
【示例 】 快 速生 成 XML 文档 〈xmlphp )。 代 码 如 下 : 


<?php 

header(CContent-type:text/xml): 

echo '<?xml version="1.0" encoding="gb2312"?>": 

echo < 留言 本 > 

echo < 留言 > 

echo '< 用 户 名 性 别 =" 男 " QQ="666666666" Email=-"zhangsan@263.net"> 张 三 </ 用 户 名 >': 
echo < 留言 内 容 > 这 里 是 张 三 的 留言 </ 留 言 内 容 >': 

echo < 留言 时 间 >2014-2-5 16:39:26</ 留 言 时 间 > 

echo '</ 留 言 >'; 

echo < 留言 >: 

echo < 用 户 名 性 别 =" 女 " QQ="777777777" Email="lisi@263.net'> 李 四 </ 用 户 名 > 
echo < 留言 内 容 > 这 里 是 李 四 的 留言 </ 留 言 内 容 >': 

echo '< 留 言 时 间 >2014-3-5 16:39:26</ 留 言 时 间 >': 

| echo </ 留 言 > 

| ”echo '</ 留 言 本 >'; 

| ?> 
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| 
在 生成 的 XML 文档 代码 中 第 一 行 必须 使 用 header0 函 数 设 置 文 档 的 类 型 。 在 浏览 器 中 预览 ， 则 | 
演示 效果 如 图 21.10 所 示 。 | 


Oo Bw -Sol “上 


<?xml version="1.0" encoding="GB2312"?> 





hang son nt QQ “666666666 生 列 =" 男 "> 张 二 </ 月 广 各 > 
这 里 是 张 三 的 留言 </ 窜 言 内 
则 > 2016-2-5 16:39: RB 


二 月 户 各 Emailici@263 netv QQ="777777777" 入 别 -=""> 李 由 </ 用户 名 > 
< 久 言 内 厨 芝 时 好 四 的 禄 训 </ 窑 寺内 全 > 
sh -3-5 16:39:26</ 留 言 时 间 > 


/> 





图 21.10 生成 的 XML 文档 


21.5.2 创建 SimpleXML 对 象 


PHP 对 XML 数据 的 操作 有 很 多 方法 ， 如 XML 语法 解析 函数 、DOMXML 函数 和 SimpleXML 函 | 
数 等 ， 其 中 SimpleXML 函数 操作 比较 简单 ， 本 节 所 有 PHP 操作 XML 数据 都 采用 这 种 方法 。 | 

使 用 SimpleXML 首先 要 创建 对 象 ， 创 建 SimpleXML 对 象 的 方法 有 3 种 。 | 

simplexml load_string0 函 数 : 将 创建 的 字符 串 解 析 到 内 存 中 。 | 

simplexml load_fileO) 函 数 : 将 指定 的 文件 解析 到 内 存 中 。 

simplexml import_dom() 函 数 : 将 一 个 使 用 DOM 函数 创建 的 DOMDocument 对 象 导 入 到 内 


存 中 。 
【示例 】 分 别 使 用 上 述 3 个 函数 导入 XML 文档 ,然后 使 用 print_r0 函 数 输出 XML 对 象 到 页 面 中 ， 
显示 效果 如 图 21.11 所 示 。 


<?php 
header('Content-Type:text/html:charset=utf-8"): 
/第 一 种 方法 所 
$xmll = simplexml load file("message.xml"); 
print rSxml]): 
/# 第 二 种 方法 所 
$str =<<<XML 
<?xml version="1.0" encoding="gb2312"?> 
< 留言 本 > 
< 留言 > 
< 用 户 名 性 别 =" 男 " QQ="666666666"” Email="zhangsan(@263.net"> 张 三 </ 用 户 名 > 
< 留言 内 容 > 这 里 是 张 三 的 留言 </ 留 言 内 容 > 
< 留言 时 间 >2016-2-5 16:39:26</ 留 言 时 间 > 
</ 留 言 > 
< 留言 > 
< 用 户 名 性 别 =" 女 ” QQ="777777777” Email="lisi@263.net"> 李 四 </ 用 户 名 > 
< 留言 内 容 > 这 里 是 李 四 的 留言 </ 留 言 内 容 > 
< 留言 时 间 >2016-3-5 16:39:26</ 留 言 时 间 > 
</ 留 言 > 
</ 留 言 本 > 


-TT 
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XML: 

S$xml2 = simplexml load string($stD: 
echo ‘<p>"; 

Print_r($xml2): 

证 第 三 种 方法 */ 

$dom = new domDocumentO: 

S$dom -> loadXML($str); 

$xml3 = simplexml import dom($dom); 
echo ‘<p>; 

print (Sxml3); 

?> 


| .|S mr + Sc | 三- 


Sim pl Object ([ 罚 言 ] => Aray ( [0] => SimpleXMLElement Object ( [用 户 名 ]=> 
张 三 [留言 内 容 ] => 这 里 是 张 三 的 留言 i 20162.5 16: 39-26) [1]=—> 
Simpl LM El me Object ( [用 户 名 ] => 李 四 [留言 内 容 ] => 这 里 是 李 四 的 留言 [留言 时 间 ] 
=> 2016-3-5 16:39:26))) 


SimplomL Element Ovid [留言 ]= Amay ( 遇 => SimpleXMLElement Object ( | 用 户 名 ] => 
张 三 的 留言 [留言 时 间 ] => 2016-2-5 16: 


张 三 ee 
SimpleXMH Ble een 2 ([ 用 户 名 ] 一 李 由 [ 窗 言 内 容 ] => 这 里 是 李 四 的 留言 [留言 时 间 ] 
=> 2016-3-5 163926))] 


Ne Object ( [留言 ] => Array ( [0] => SimpleXMLElement Object ( [用 户 名 ] => 
张 三 [留言 内 容 ] => 这 里 是 张 三 的 留言 人 => 2016-2-5 16:39:26) ME 

SimpleXMI] Ei Object ( [用 户 名 ] => 李 四 [留言 内 容 ] => 这 里 是 李 四 的 留言 [留言 时 间 ] 
=> 2016-3-5 16:39:26))] 





图 21.11 输出 的 SimpleXML 对 象 
通过 上 面 示例 可 以 看 到 ， 不 同 数据 源 的 XML， 只 要 结构 相同 ， 那 么 输出 的 结果 都 是 相同 的 。 


21.5.3 读 取 XML 元 素 


创建 XML 对 象 之 后 ， 就 可 以 调用 SimpleXML 对 象 的 函数 来 读 取 数据 ， 这 里 主要 调用 children0 
函数 和 foreach 循环 语句 遍历 所 有 子 节点 元 素 。 

【示例 】 使 用 第 一 种 方法 ， 通 过 simplexml load file0 函 数 导入 外 部 XML 文档 ， 然 后 遍历 该 文档 
结构 ， 使 用 children0 函 数 获取 每 个 子 元 素 信息 打印 在 页 面 中 ， 如 图 21.12 所 示 。 


<?php 
header('Content-Type:text/html:charset=utf-8"): 
$xml = simplexml load file("message.xml"): 
foreach($xml->children() as $layer_1){ 

echo " 


人 1->children() as $layer 2){ 
Print _r(S$layer 2): 
echo '<br>': 
} 
echo ‘<hr>"; 
} 
?> 


“Te 


第 2] 间 使 用 P3{zP 操 作文 件 一 


| 
| 
Oo Bo -aclec | | 
| 


SimpleXMLElemeat Object ( | 用 户 吉 ] => 张 三 [留言 内 容 ] ~> 这 里 是 张 三 的 留言 [留言 时 间 ] = 2016.2.5 163926) 





SimpleXMLElement Object ( [@artributes] 一 Array ( (性别 ] 一 男 [QQ] 一 656666666 [Email] 一 zhangsan@263 net ) ) 
SimplcXMLEIlcmcnt Object () 
SimplcXMLElcment Obicct (] 








SimpleXMLElement Object( | 用户 名 ] 一 李 四 [留言 内 容 ] 一 这 里 是 李 四 的 留言 [留言 时 间 ] 一 2016-3-5 16:39:26 ) 


SimpleXML Element Object ( [@artributes] 一 Array ( [性别 ] => 女 [QQ 一 777777777 [Email] => lisi@263.net)) 
SimpleXML Element Object () 
SimpleXML Element Object () 











图 21.12 遍历 XML 文档 元 素 
21.5.4 读 取 XML 属性 


使 用 SimpleXML 对 象 的 attributes() 函 数 可 以 读 取 XML 文档 中 元 素 的 属性 ， 其 用 法 与 children0 | 
函数 相似 。 | 
【示例 】 使 用 第 一 种 方法 ， 通 过 simplexml load file0 函 数 导入 外 部 XML 文档 ， 然 后 遍历 该 文档 





结构 ， 使 用 attributesO 函 数 获 取 每 个 元 素 属性 信息 ， 并 把 这 些 属性 信息 显示 在 页 面 中 ， 如 图 21.13 所 示 。 | 
<?php 
header('Content-Type:text/html:charset=utf-8"): 
$xml = simplexml load file("message.xml"); 
->children() as $layerl){ 
foreach($layerl->attributesO as Sn => $v){ | 
echo $n.=".$V; 
echo '<br>': 
} 
echo ‘<hr>"; 
foreach($layerl->children() as E 
as $n1 => $vI){ | 
echo $n1."=".$v1 | 
echo '<br>'; | 
} | 
} | 
echo ‘<hr>"; 
} 


Ce -|S mE - So 
性 别 = 男 

QQ=666666666 

Email=zhangsan@263 net 








性 别 = 女 
QQ=777777777 
Email=lisi@263.net 








21.13 遍历 XML 文档 属性 
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21.5.5 ”访问 特定 元 素 和 属性 


| SimpleXML 对 象 除了 可 以 通过 遍历 的 方式 访问 每 一 个 元 素 和 属性 ， 同 时 也 允许 访问 特定 的 元 素 
全 一 | 和 属性 ，SimpleXML 对 象 可 以 通过 子 元 素 的 名 称 对 该 子 元 素 进行 赋值 ， 或 者 使 用 子 元 素 的 名 称 数 组 


， 来 对 该 子 元 素 的 属性 进行 赋值 。 
Note | 通过 SimpleXML 对 象 的 数组 映射 ， 快 速 访问 特定 元 素 以 及 元 素 包含 的 属性 值 。 


! 【示例 】 使 用 SimpleXML 对 象 数组 ， 读 取 根 元 素 的 属性 value 的 值 ， 然 后 通过 数组 映射 ， 找 到 
| 子 元 素 包 含 的 数据 ， 如 图 21.14 所 示 。 


<?php 
header('Content-Type:text/html:charset=utf-8"); 
$str=<<<XML 
<?xml version='1.0' encoding="utf-8"?> 
<book value=' 留 言 本 > 
<bookl> 
<name> 大 事 记 </name> 
</bookl> 
<book2> 
<name value=' 日 常 琐事 '/> 
</book2> 
</book> 
XML: 
$xml = simplexml load string($str): 
echo $xml['value'].'<br>"; 
echo $xml->book1[0]->name.'<br>"; 
echo $xml->book2[0]->name['value'].'<br>"; 
?> 








图 21.14 访问 特定 元 素 和 属性 


21.5.6 编辑 XML 数据 


| SimpleXML 对 象 除 了 可 以 读 取 XML 数据 外 ， 还 允许 对 XML 文档 进行 编辑 。 编 辑 的 方法 与 读 取 
| 特定 元 素 和 属性 的 用 法 相同 ， 直 接 向 其 赋值 即 可 。 
| 【示例 】 结 合 21.5.5 节 示 例 ， 使 用 SimpleXML 对 象 数组 ， 映 射 到 特定 元 素 和 属性 ， 然 后 重新 为 
| 其 赋值 ， 演 示 如 图 21.15 所 示 。 
<?php 
header('Content-Type:text/html:charset=utf-8"): 
$str = <<<XML 
| <?xml version=1.0' encoding-'gb23127> 
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XML: 

$xml = simplexml load string($str): 

S$xml[value] = iconv(gb2312vutf.8' 我 的 留言 本 9 | 
$xml->book1[0]->name = iconv(gb2312wutf.8" 国 内 外 大 事 记 )): | 
$xml->book2[0]->name['value'] = ”iconv('gb2312','utf-8"' 家 庭 日 常 正事 "): | 


echo $xmlf'value'].<br>": 

echo $xml->bookl[0]->name.'<br>"; | 
echo $xml->book2[0]->name[value]'<br>': | 
?> | 


‘3 locehost 





图 21.15 编辑 XML 数据 


将 提示 : iconvO 函 数 是 编码 转换 函数 ， 该 函数 能 够 把 不 同 编码 的 字符 转换 为 特定 格式 的 字符 ， 这 样 
就 能 够 避免 在 编辑 XML 数据 时 ， 因 为 编码 不 一 致 导 致 的 乱码 现象 。 在 本 例 中 通过 把 | 
gb2312 编码 转换 为 utf-8， 从 而 实现 字符 数据 的 一 致 性 。 


21.5.7 ”保存 XML 数据 


当 使 用 SimpleXML 对 象 编辑 XML 数据 之 后 ， 这 些 被 修改 的 数据 仅 在 内 存 中 存在 ， 原 文档 并 没 | 
有 发 生变 化 ， 为 此 还 需要 对 编辑 后 的 XML 数据 进行 保存 ， 只 有 这 样 才能 够 确保 编辑 行为 有 效 。 保 存 
XML 数据 主要 用 到 file_put_contents() 函 数 。 

【示例 】 使 用 包 e_put_contents0 〇 函数 把 21.5.6 节 修 改 后 的 XML 数据 保存 为 book.xml， 并 重新 读 
取保 存 的 book.xml 文档 数据 ， 如 图 21.16 所 示 。 


<?php 
header('Content-Type:text/html:charset=utf-8"): 
$str=<<<XML 
<2xml version='1.0' encoding='utf-8"?> 
<book value=' 留 言 本 > 

<bookl> 

<name> 大 事 记 </name> 
</bookl> 
<book2> 
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no 


<?xml version="1.0" encoding="UTF-8"?> 
- <book value=" 我 的 究 言 本 "> 


<bookl> 
<name> 国 内 外 大 事 记 </name> 
</book1> 


<book2> 
<name value=" 家 庭 日 党 融 事 "/> 
</book2> 
</book> 





图 21.16 保存 XML 文档 
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综合 案例 : 设计 留言 板 


( 嫩 视频 讲解 : 70 分 钟 ) 


留言 板 是 网 站 与 访客 进行 沟通 的 简单 工具 。 用 户 在 留言 板 上 可 以 发 表 自 己 的 一 些 看 法 ， 而 
管理 员 可 以 对 用 户 的 看 法 及 时 作出 回应 ， 实 现 良好 互动 。 留 言 板 的 形式 多 种 多 样 ， 有 简易 留言 
板 、 分 类 留言 板 、 具 有 版 主 回复 的 留言 板 等 


【 学 习 重 点 】 

WI 能 金 开发 一 个 功能 完善 的 留言 板 
MH 增添 签 写 留言 

WI 添加 敏感 词 、 过 滤 敏 感 词 

MI 给 版 主 的 悄悄 话 、 回 显 版 主 信 息 
MH 版 主 单 帖 管理 


eg 网 于 向 计 与 网站 秆 设 人 入门 天皇 关 


22.1 设计 思路 


留言 板 的 基本 功能 是 方便 用 户 查 看 留言 、 发 表 留 言 ,管理 员 查 看 留言 、 回 复 留言 和 删除 留言 。 本 
Note | 章 留言 板 是 高 级 的 留言 管理 系统 ， 实 现 了 签 写 留言 ， 添 加 私人 留言 〈 即 悄悄 话 功能 )、 支 持 简单 的 表 
| 情 图 标 及 人 物 头像 、 添 加 关键 字 过 滤 功能 、 回 复 留言 、 管 理 留 言 、 查 询 留言 、 向 文本 文件 中 添加 敏感 
| 词 、 回 显 版 主 信息 、 版 主 单 帖 管理 和 支持 屏蔽 悄悄 话 显示 等 特色 功能 。 
| 本 模块 在 介绍 基本 功能 实现 的 同时 ， 介 绍 了 一 些 新 的 编程 方法 和 SQL 语句 构造 技巧 。 在 留言 板 
| 的 实现 中 , 运用 了 MySQL 数据 库 的 多 表 联合 查询 。 另 外 , 在 管理 留言 时 一 次 可 以 删除 多 条 留言 信息 ， 
| 并 可 以 同时 删除 该 留言 的 回复 信息 ， 这 种 方法 应 用 in 关键 字 实现 ， 并 且 需 要 一 定 的 技巧 来 构造 SQL 
| 语句 。 


| 22.1.1 框架 规划 
| 
| 留言 板 的 前 台 主要 功能 结构 如 图 22.1 所 示 。 























22.1 前 台 功 能 结构 图 
留言 板 的 后 台 主要 功能 结构 如 图 22.2 所 示 。 








发 表 文 章 | 读 取 敏感 词 








| 22.2 ”后台 功能 结构 图 
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< 
22.1.2 设计 流程 


留言 板 设计 流程 很 简单 ， 首 先 签 写 留言 信息 ， 然 后 对 留言 内 容 进 行 敏 感 词 过 滤 ， 如 果 提 交 成 功 ， 则 | 
将 留言 信息 显示 在 前 台 首 页 ， 最 后 由 管理 员 对 留言 信息 进行 后 台 管 理 。 留 言 板 模块 的 设计 流程 如 图 22.3 | 全 
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22.3 ”设计 流程 图 


222 案例 预览 


在 具体 学 习 之 前 ,用户 有 必要 先 借助 本 书 完成 源 代 码 体验 网 站 运行 的 整体 效果 ,为 具体 实践 商定 
扎实 的 基础 。 
【操作 步骤 】 | 
第 1 步 ， 附 加 MySQL 数据 库 。 在 光盘 源 代码 目录 中 ， 将 本 章 实例 子 目录 下 database 文件 夹 中 的 | 
db_leaveword 文件 夹 复制 到 MySQL 配置 文件 my.ini 中 定义 的 数据 库存 储 目录 中 ， 具 体位 置 应 根据 读 | 
者 在 安装 MySQL 的 设置 而 定 ， 默 认 路 径 如 下 : | 
#Path to the database root | 
datadir="C:/ProgramData/MySQL/MySQL Server 5.7/Data/" 


第 2 步 ， 将 程序 发 布 到 PHP 服务 器 站 点 根 目录 下 。 具 体位 置 应 根据 读者 在 安装 Apache 的 设置 而 | 
定 ， 即 在 httpd 配置 文件 中 定义 的 站 点 文档 位 置 。 | 
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# 

# DocumentRoot: The directory out of which you will serve your 

# documents. By default. all requests are taken from this directory. but 
# symbolic links and aliases may be used to point to other locations. 


| DocumentRoot "D:/www" 
Note | # 

| # This should be changed to whatever you set DocumentRoot to. 
# 


<Directory "D:/www"> 
AllowOverride None 


Order allow.deny 
Allow from all 
</Directory> 
第 3 步 ， 打开 正 浏 览 器 ， 在 地 址 栏 中 输入 “http://127.0.0.1/” 或 者 “http://localhost/”， 即 可 预览 
本 案例 首页 效果 ， 如 图 22.4 所 示 。 
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图 22.4 网 站 首页 

| 交 提示 : 在 地 址 栏 中 输入 的 127.0.0.1 的 默认 端口 号 为 80， 在 安装 Apache 服务 器 时 如 果 端 口号 采 
用 的 不 是 上 默认 设置 ， 而 是 用 户 自 定义 的 (如 8080)， 那么 需要 在 地 址 栏 中 输入 “127.0.0.1: 
8080”， 即 可 正确 运行 程序 。 


| 在 本 案例 首页 中 单 击 【留言 】 超 链接 ， 可 以 发 表 留 言 。 单 击 【 管 理 】 超 链接 ， 输 入 管理 员 用 户 
| 名 admin， 密 码 admin， 进 入 后 台 主 页 面 ， 如 图 22.5 所 示 。 在 后 台 可 对 文章 、 留 言 信息 及 敏感 词 进行 
| 管理 。 


J 
| 窟 提示 : 在 留言 管理 中 ， 使 用 “是 否 回复 ”条 件 查询 时 ， 用 1 和 0 表示 回复 和 未 回复 . 
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图 22.5 网 站 后 台 管 理 首页 


22.3 难点 详解 


本 案例 结构 设计 也 不 是 很 复杂 , 但 对 于 初学 者 来 说 ,仍然 将 面临 许多 未 知 的 技术 难题 和 门槛 ， 为 
此 本 节 就 案例 中 几 个 主要 难点 技术 进行 说 明 。 


22.3.1 过 滤 敏感 词 


敏感 词 是 指 网 站 管理 者 为 了 正常 经 营 , 减少 不 必要 的 纠纷 ， 消 除 不 良 影响 ， 人 为 设 定 的 一 些 较 易 
引起 人 们 歧义 的 词汇 。 当 系统 或 管理 员 发 现 帖 子 里 含有 特定 的 敏感 词汇 时 ,该 帖 会 自动 被 限制 发 表 或 
删除 。 

一 般 来 说 ， 敏 感 词 主 要 包括 以 下 几 类 : 

党 和 国家 领导 人 。 

宗教 信仰 敏感 词汇 。 

加 ”关于 群体 事件 的 词汇 ， 如 上 访 、 静 坐 、 示 威 、 游 行 、 双 规 等 。 

突 发 性 事件 。 这 类 突 发 性 事件 一 般 是 指 网 络 突 发 事件 ， 如 重大 事件 的 当事人 ， 管 理 员 有 权 
将 其 设 为 敏感 词 ， 而 不 能 发 表 。 

一 个 词汇 是 否 可 以 作为 禁用 词汇 , 在 概念 上 并 没有 明确 的 规定 ,只 有 网 站 的 管理 员 可 以 结合 自身 
网 站 的 特点 、 社 会 与 外 界 的 各 方面 因素 进行 自 定义 设 管 ， 设 置 成 功 后 将 自动 生效 。 

很 多 微 博 、 论 坛 、 评 论 、 贴 吧 都 有 过 滤 敏 感 词 的 功能 。 过 滤 敏 感 词 通常 使 用 一 对 一 的 过 滤 形 式 。 
例如 ， 要 过 滤 “ 色 情 ”这 个 词汇 ， 那 么 就 是 考虑 内 容 里 边 是 否 包含 “ 色 情 ” 这 个 词 ， 对 于 敏感 词 过 滤 ， 
本 系统 主要 使 用 正则 表达 式 preg_matchO 函 数 实现 。 

preg_match() 函 数 用 来 在 字符 串 中 搜索 所 有 与 给 出 的 正则 表达 式 匹配 的 内 容 ， 如 果 存 在 则 返回 
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加 
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true， 否 则 返回 false。 基 本 语法 如 下 : 
intpreg match( string $pattern . string $subject [ array &$matches [. int $flags = 0[ int $offset = 0 ]]]) 
参数 说 明 如 下 。 
pattem: 要 搜索 的 模式 ， 字 符 串 类 型 。 
subject: 输入 字符 串 。 
matches: 如 果 提 供 了 参数 matches， 它 将 被 填充 为 搜索 结果 。S$matches[0] 将 包含 完整 模式 匹 
配 到 的 文本 ，$matches[]1] 将 包含 第 一 个 捕获 子 组 匹配 到 的 文本 ， 依 此 类 推 。 
回 fags: flags 可 以 被 设置 为 以 下 标记 值 。PREG_OFFSET CAPTURE 如果 传递 了 这 个 标记 对 
于 每 一 个 出 现 的 匹配 返回 时 会 附加 字符 串 偏 移 量 ， 相 对 于 目标 字符 串 。 
回 offset: 默认 搜索 从 目标 字符 串 的 开始 执行 ， 可 选 参数 offset 用 于 指定 从 目标 字符 串 的 某 个 
未 知 开 始 搜索 〈 单 位 是 字 节 ) 。 
preg_match() 函 数 返回 pattem 的 匹配 次 数 。 它 的 值 将 是 0 次 (不 匹配 ) 或 1 次 ， 因 为 preg_matchO 
在 第 一 次 匹配 后 将 会 停止 搜索 ，preg_match_all0 不 同 于 此 ， 它 会 一 直 搜索 subject 直到 到 达 结 尾 。 如 
果 发 生 错误 ，preg_match0 返 回 false。 
本 系统 实现 过 滤 敏 感 词 的 实现 方法 如 下 : 
首先 ， 应 用 file0 函 数 读 取 存储 在 文本 文件 中 的 敏感 词汇 ， 每 个 敏感 词 独立 成 一 行 ， 并 将 其 存储 
在 数组 $file word 中 。 
然后 ， 应 用 For 循环 语句 自动 读 取 数组 元 素 敏感 词 ， 直 接 通过 正则 表达 式 检验 用 户 提交 的 留言 信 
息 是 否 含有 敏感 词 。 
当 用 户 发 表 留 言 信息 后 ， 提 交 留 言 信 息 时 ， 将 留言 信息 与 存储 在 数组 中 的 敏感 词 进行 对 比 ， 如 果 
留言 信息 中 含有 敏感 词 ， 那 么 将 弹出 提示 信息 ， 否 则 留言 信息 发 布 成 功 。 
实现 敏感 词 过 滤 的 关键 代码 如 下 (note_check.php): 
<?php 
require("global.php"); 
这 $ POST){ 
还 (is_file("./filterwords.txt")){// 判 断 给 定 文件 名 是 否 为 一 个 正常 的 文件 
$filter_word = file("./filterwords.txt"); /把 整个 文件 读 入 一 个 数组 中 
$str=$ POST[content]: 
for($i=0:$i<count($filter_ word):Sit+H){ /应 用 For 循环 语句 对 敏感 词 进行 判断 
/应 用 正则 表达 式 ， 判 断 传递 的 留言 信息 中 是 否 含有 敏感 词 
这 preg match("/".trim($filter word[$i])."/i". Sstr){ 
echo "<script> alert( 留 言 信息 中 包含 敏感 词 ! "):history.back(-1):</script>"; 
exit: 


} 
} 
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} 
} 
> 


preg_match(O) 函 数 中 的 %i"， 是 指 在 进行 敏感 词汇 比较 时 不 区 分 字母 大 小 写 。 

在 用 户 提交 留言 信息 后 ,系统 将 签 写 的 留言 信息 与 系统 设 定 的 敏感 词 进行 一 一 对 比 ， 如 果 在 用 户 
签 写 的 留言 信息 中 存在 敏感 词 ， 例 如 设置 “游行 ”为 敏感 词 ， 则 当 留 言 中 出 现 “ 游 行 ”一 词 时 ， 就 会 
弹出 留言 中 含有 敏感 词 的 警告 信息 ， 如 图 22.6 所 示 。 
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图 22.6 过 滤 敏 感 词 
22.3.2 ”添加 敏感 词 


在 本 系统 中 ， 敏 感 词汇 可 以 由 管理 员 自 定义 设置 。 在 后 台 的 添加 敏感 词 页 面 中 添加 敏感 词汇 ， 将 
其 写 入 文本 文件 中 ， 从 而 完成 自 定义 敏感 词汇 的 功能 。 向 文本 文件 添加 敏感 词汇 的 效果 如 图 22.7 所 示 。 
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图 22.7 添加 敏感 词 

在 PHP 中 向 文本 文件 写 入 字符 串 主 要 用 到 下 面 5 个 函数 。 

回 is_writable0 函 数 

is_writable0 函 数 用 于 判断 某 文件 是 否 存在 ， 并 且 是 否 可 写 ， 如 果 满足 条 件 则 返回 tue， 和 否则 返回 


false。 基 本 语法 如 下 : 
bool is_writable( string $filename ) 
filename 参数 可 以 是 一 个 允许 进行 是 否 可 写 检 查 的 目录 名 。 示 例 代码 如 下 : 


Sfilename = 'test.txt'; 
if (is_writable($filename)) { 
echo ' 当 前 文件 可 写 : 


else { 
echo ' 当 前 文件 不 可 写 ': 


} 
9 


fopen0 函 数 
fopenO 函 数 用 于 打开 某 文 件 ， 并 返回 该 文件 的 标识 指针 。 该 文件 可 以 是 本 地 文件 ， 也 可 以 是 远程 
文件 ， 通 过 URL 指定 。 如 果 打开 失败 ， 则 函数 返回 false。 基 本 语法 如 下 : 


Tesource fopen( string $filename . string $mode [. bool $use_include path [. resource $zcontext ]] ) 
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参数 说 明 如 下 。 

flename: 必要 参数 。 用 于 指定 要 打开 文件 的 本 地 地 址 。 

mode: 必要 参数 。 用 于 指定 要 打开 文件 的 模式 。 

use-include-path: 可 选 参数 。 如 果 将 该 参数 设置 为 tue，PHP 会 尝试 按照 include_path 标准 
包含 路 径 中 的 每 个 指向 去 打开 文件 。 


Note | 回 context: 可 选 参数 。 设 置 提高 文件 性 能 的 一 些 选项 。 
【示例 1】 使 用 fopen0 函 数 以 不 同 的 方式 打开 不 同位 置 的 文件 ， 代 码 如 下 : 


<?php 

S$handle = fopen("/home/rasmus/file.txt", "r"): 

Shandle = fopen("/home/rasmus/file.gif", "wb"): 

S$handle = fopen("http://www.example.com/", "r"): 

S$handle = fopen("ftp://user:password@example.com/somefile.txt", "w"); 
?> 


fseek0 函 数 
fseekO 函 数 用 于 设置 文件 指针 的 位 置 。 基 本 语法 如 下 : 
int fseek( resource $handle , int $offset [, int Swhence ] ) 


参数 说 明 如 下 。 

handle: 必要 参数 。 打 开 某 文件 后 返回 的 文件 标识 。 

offset: 必要 参数 。 用 于 设 定 文件 指针 的 位 置 。 要 移动 到 文件 尾 之 前 的 位 置 , 需要 给 offset 传 
递 一 个 负 值 。 

whence: 可 选 参数 。 该 参数 包含 值 有 有， SEEK_SET 设 定位 置 等 于 offset 字 节 ; SEEK_CUR 
设 定位 置 为 当前 位 置 加 上 offset，SEEK_END 设 定位 置 为 文件 尾 加 上 offset。 

【示例 2】 使 用 fopen0 函 数 打开 文件 testtxt， 然 后 读 取 该 文件 4096 个 字 节 的 内 容 ， 最 后 应 用 fseekO 

函数 将 文件 指针 恢复 到 原 位 置 。 


<?php 

$fp = fopen('test.txt,, T"); 
$data = feets($fp, 4096); 
人 eek($ 印 . 0): 

?> 


加 ”fwrite0 函 数 
fwrite(0) 函 数 用 于 将 字符 串 写 入 指定 的 文件 中 ， 并 可 以 规定 写 入 字 节 的 大 小 。 基 本 语法 如 下 : 
int fwrite( resource $handle . string $string [. int $length ] ) 


参数 说 明 如 下 。 
handle: 必要 参数 。 文 件 标识 指针 。 
回 string: 必要 参数 。 要 写 入 某 文件 的 字符 串 。 
加 ”length: 可 选 参数 。 指 写 入 文件 的 长 度 ， 如 省 略 该 参数 ， 将 指定 字符 串 的 所 有 内 容 写 入 文 
件 中 。 

| 【示例 3】 使 用 fwrite0 函 数 将 字符 串 写 入 test.txt 文件 中 。 代 码 如 下 : 

| < 

| Sfilename = 'testtxt: 

1 $somecontent = "添加 这 些 文字 到 文件 m": 
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// 首 先 确定 文件 存在 并 且 可 和 写 
if (is writable($filename)) { 

// 使 用 添加 模式 打开 $filename, 因此 文件 指针 将 会 在 文件 的 开头 , 那 就 是 当 使 用 fwriteO 时 , $somecontent ， 

将 要 写 入 的 地 方 | 
if (!$handle = fopen($filename, 'a)) { 

echo "不 能 打开 文件 $filename"; 


exit; 





} 
// 将 $somecontent 写 入 到 打开 的 文件 中 
if (fwrite($handle, $somecontent) —— FALSE) { 
echo "不 能 写 入 到 文件 $filename"; | 
exit; | 
| 


小 
echo "成 功 地 将 $somecontent 写 入 到 文件 Sfilename": 
位 lose($handle): 
}else{ 
echo "文件 $filename 不 可 写 ": 
} 
?> 


fclose0 函 数 
fclose0) 函 数 用 于 关闭 指定 的 文件 标识 指针 所 指 的 文件 。 基 本 语法 如 下 : 
bool felose( resource $handle ) 
参数 handle 为 fopen0 〇 函数 或 者 fockopen() 函 数 成 功 打开 某 文件 后 所 返回 的 文件 标识 。 例 如 , 应 | 
用 fopen0 函 数 打开 “ec:/me.php"， 然 后 使 用 fclose0 函 数 关闭 该 文件 ， 代 码 如 下 : 
<2php 
S$handle = fopen('c:/me.php ', 7'); 
felose($handle): 
> | 
在 留言 板 系统 中 ， 通 过 以 上 介绍 的 函数 实现 向 文本 文件 filterwords.txt 中 添加 敏感 词 的 功能 。 具 | 
体 代 码 如 下 (manage/word_add.php): | 
| 


<2?php 
这 $_POST){ /提交 表单 信息 
$filename="../filterwords.txt"; 
iftis_writable($filename)){// 判 断 文件 是 否 存在 
$file=fopen($filename.'r+"): 


else{ 
echo "文件 ".$filename." 不 可 写 ": 


} 

/在 文件 尾 写 文件 
fseek($file.0.SEEK_END): 
$word=$ POST[txt word]: 
fwrite($file. $word): 
fwrite($file."\m\n"): 
fclose($file); 
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在 开发 留言 板 模块 的 过 程 中 ， 添 加 敏感 词 是 本 模块 的 一 个 重点 ， 也 是 本 模块 的 亮点 。 在 向 文本 文 


| 件 中 写 入 敏感 词汇 时 ， 总 会 将 添加 的 敏感 词 写 到 一 行 上 ， 这 样 在 读 取 敏 感 词汇 时 ， 就 不 能 正确 读 出 敏 
| 感 词汇 。 为 了 找 出 问题 的 原因 ， 来 分 析 一 下 添加 敏感 词 的 原理 。 


首先 ， 指 定 存储 敏感 词 的 文件 ， 然 后 以 写 的 方式 打开 该 文件 ， 将 指针 定位 到 文件 的 末尾 ， 写 入 敏 


| 感 词 ， 最 后 关闭 。 


经 过 仔细 的 分 析 ， 找 到 问题 的 原因 ， 那 就 是 在 将 指针 定位 到 文件 的 末尾 后 ， 向 文本 文件 中 写 入 敏 
感 词 ， 这 时 ， 指 针 的 焦点 仍然 在 当前 行 的 末尾 ， 并 没有 换行 ， 所 以 在 添加 下 一 个 敏感 词 时 仍然 写 入 到 
该 词 的 末尾 ， 这 样 就 将 多 个 敏感 词汇 写 在 一 行 上 了 ， 因 此 出 现 了 问题 。 

解决 的 方法 是 ， 在 每 添加 一 个 敏感 词 后 ， 需 要 及 时 按 Enter 键 换行 ， 然 后 再 添加 下 一 个 敏感 词 。 
因此 ， 在 应 用 fwrite0 函 数 写 入 敏感 词 后 ， 添 加 这 样 一 条 语句 。 


fwrite($file,"\r\n"); 
在 应 用 以 上 方法 添加 敏感 词 后 ， 该 问题 迎刃而解 。 


22.3.3 读 取 敏感 词 


在 本 留言 板 中 ， 敏 感 词汇 是 由 管理 员 自 定义 添加 的 。 在 后 
台 的 添加 敏感 词 版 块 中 添加 敏感 词汇 ， 将 其 写 入 文本 文件 中 ， 
从 而 完成 自 定义 敏感 词汇 的 功能 。 向 文本 文件 添加 敏感 词汇 的 
运行 效果 如 图 22.8 所 示 。 22.8 添 记 

下 面 详细 讲解 应 用 PHP 读 取 文本 文件 中 敏感 词汇 应 用 的 主 四 Dd 
要 函数 。 

is_readableO 函 数 

is_readable() 函 数 用 于 判断 某 文 件 是 否 存 在 ， 并 且 是 否 可 读 ， 如 果 满 足 上 述 条 件 则 返回 tue， 否 则 
返回 false。 基 本 语法 如 下 : 

bool is_readable( string $filename ) 


参数 flename 用 于 指定 文件 的 完整 路 径 。 
【示例 1】 使 用 is readableO 函 数 判断 test.txt 是 否 为 一 个 可 读 文 件 ， 代 码 如 下 : 


<?php 

Sfilename = 'test.txt'; 

if (is readable($filename)) { 
echo ' 此 文件 为 只 读 ': 





else { 
echo ' 此 文件 为 非 只 读 ': 
} 
ge 


file0 函 数 

fne0 函 数 用 于 读 取 某 文件 的 内 容 ， 并 将 结果 保存 到 数组 中 , 数组 内 每 个 元 素 的 内 容 对 应 读 取 文件 
的 一 行 。 基 本 语法 如 下 : 

array file( string $filename [. int $use_include path [. resource $context ]] ) 

参数 说 明 如 下 。 

filename: 必要 参数 。 用 于 指定 读 取 文件 的 完整 路 径 。 
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二 | 

use_include_path: 可 选 参数 。 如 果 将 该 参数 设置 为 tue，PHP 会 尝试 按照 include-path 标准 | 
包含 路 径 中 的 每 个 指向 去 打开 文件 。 | 





context: 可 选 参数 。 设 置 提高 文件 流 性 能 的 一 些 选 项 。 | 

fle0 将 文件 作为 一 个 数组 返回 。 数 组 中 的 每 个 单元 都 是 文件 中 相应 的 一 行 ， 包括 换行 符 在 内 。 如 | 
果 失 败 , file0 函 数 将 返回 false。 如 果 也 想 在 include_path 中 搜寻 文件 , 可 以 将 可 选 参 数 use_include_path | 
设 为 “1” 

【示例 2】 通过 HTTP 从 URL 中 取得 HTML 源 文件 ， 将 一 个 文件 读 入 数组 ， 然 后 把 HIML 源 代 | 
码 显示 出 来 。 | 





<2php | 
// 将 一 个 文件 读 入 数组 | 
Slines = file('http://www.example.com/"); | 
/在 数组 中 循环 ， 显 示 HIML 的 源 文 件 并 加 上 行 号 
foreach ($lines as $line num => $line) { 

echo "Line#<b>{$line num}</b> : " . htmlspecialchars($line) . "<br />\n"; | 
} | 
> | 

加 ”each0 函 数 

each0 函 数 用 于 返回 当前 指针 位 置 的 数组 值 ， 并 将 指针 推进 一 个 位 置 。 返 回 的 数组 包含 4 个 键 ， | 
键 名 为 0、1、key 和 value。 其 中 , 键 0 和 key 包含 键 名 ， 而 键 1 和 value 包含 相应 的 数据 。 如 果 程 序 | 
在 执行 each0) 函 数 时 ， 指 针 已 经 位 于 数组 末尾 ， 则 返回 false。 基 本 语法 如 下 : | 


array each( array &$array ) 


参数 array 用 于 指定 函数 要 操作 的 数组 。 
【示例 3】 将 数组 foo 中 的 值 进 行 转换 操作 ， 输 出 形式 如 下 。 


<?php 

$foo = array("bob" "fred", "jussi", "jouni", "egon", "marliese"): 
$bar = each($foo): 

Print_r($bar): 

?> 


$bar 现在 包含 有 如 下 的 键 / 值 对 : 


Amay{ 
[1]=> bob 
[value] => bob 
[0 一 0 
[key] =>0 


} 
通常 情况 下 ， 应 用 each0 函 数 的 工作 原理 与 listO 函 数 相配 合 遍历 数组 。 代 码 如 下 : 


<?php 
S$fruit = array(a' => 'apple'. 'b' => ‘banana'. 'c' => 'cranberry"): 
reset($fruit): 
while (list($key. $val) = each($fruit)) { 
echo "$key => $val\n": 


} 
= 
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2 
上 面 代 码 输出 结果 : 
a => apple 
b => banana 
全 | c=> cranberry 
| 在 本 系统 留言 模块 中 , 通过 上 面 3 个 函数 实现 读 取 文本 文件 中 的 敏感 词汇 (manage /word readphp)。 
I 
! Sfilename="../filterwords.txt": 
iis readable($filename)){ 
Sarr=file($filename); 





} 
else{ 
echo "文件 ".$filename." 不 可 读 ": 


} 
while(list($name,$value)=each($am)){ /遍历 数组 
$a="Svaluer 


} 
echo "<br> 敏 感 词 如 下 : <br>".$a: 
?> 


22.3.4 设计 验证 码 


验证 码 技术 ， 是 为 了 防止 用 户 名 被 暴力 破解 ， 在 签 写 留言 页 面 中 要 求 输入 验证 码 ， 通 常情 况 下 ， 
如 果 输 入 的 验证 码 错误 ， 将 重新 刷新 页 面 ， 所 签 写 的 留言 信息 被 清空 ， 这 样 给 用 户 操作 造成 了 一 定 的 
| 损失 。 为 了 避免 这 一 现象 的 发 生 ， 本 模块 在 实现 签 写 留言 信息 时 ， 验 证 码 在 当前 页 进行 验证 ， 即 使 验 
证 码 输入 错误 ， 也 不 会 丢失 留言 信息 ， 而 会 保留 原始 的 留言 信息 ， 效 果 如 图 22.9 所 示 。 















我 要 留言 
| [村 
| 去 
| 
| 
| 
内 寄 : a 
A @ 思 goBco@ogsoRoe@eoaaoegool 
验证 码 : [e555 785 0 自 。 口 给 版 主 的 悄悄 活 





图 22.9 验证 码 错误 提示 


【操作 步骤 】 
第 1 步 ， 设 置 验证 码 的 表单 元 素 ， 然 后 添加 一 个 隐藏 域 ， 用 来 记录 随机 数 的 值 。 
<input name= "checkcode" type="text" id="checkcode" size="12" /> 
<input type="hidden" name="createcheckcode" value=""> 
第 2 步 ， 获 取 验 证 码 。 验 证 码 通过 Math random0) 函 数 生成 随机 数 的 方式 得 到 ，rand0 函 数 可 以 获 
| 取 指 定 范围 内 的 随机 数 。 在 签 写 留言 页 面 上 生成 一 组 4 位 的 随机 数 (index.php)。 


*。768 


第 22 章 综合 业 例 :设计 留言 极 





<script language="javascript"> | 
Var numl=Math round(Math random()*10000000):; | 
Varnum=numl.toStringO.substr(0.4): 
document.forml.createcheckcode.value=num: 
document.write("<img name=codeimg4 src='checks.php?num="+num+">"); 
</script> 
第 3 步 ， 显示 随机 数 图 片 。 显 示 随机 数 的 方式 很 多 ,将 随机 数 写 入 一 个 图 片 中 再 显示 是 目前 常用 | 
的 方法 。 | 
【拓展 】 在 PHP 中 ， 可 以 使 用 GD 函数 库 来 实现 显示 随机 数 图 片 。 用 户 需 要 先 在 php.ini 配置 文件 | 
中 去 除 extension = php_gdz.dll 前 面 的 分 号 ， 打 开 GD 函数 库 扩展 ， 然 后 重新 启动 Apache 服务 器 即 可 。 

加 ”imagecreate0 函 数 

imagecreate0 函 数 用 来 创建 一 个 基于 调 色 板 的 空白 图 像 源 ， 这 是 生成 图 片 的 第 一 步 。 该 函数 的 基 
本 语法 如 下 : 

Tesource imagecreate( int $x_size , int $y_size ) 

参数 $x_size 和 $y_size 分 别 指定 了 图 像 的 宽 和 高 。 

imagecolorallocate0 〇 函数 

imagecolorallocate0 函 数 可 以 为 创建 后 的 图 像 分 配 颜 色 。 该 函数 的 基本 语法 如 下 : | 

int imagecolorallocate( resource $image , int $red , int $green , int $blue ) | 

| 

参数 image 是 一 个 图 像 源 。red、green 和 blue 则 表示 红 、 黄 、 蓝 3 种 颜色 。 每 种 颜色 的 取 值 范围 | 
在 1~255 之 间 。 

imagestring0 函 数 

图 像 创 建 完成 后 ， 就 可 以 使 用 imagestring0 函 数 添加 图 像 文 字 。 该 函数 的 语法 如 下 : 

bool imagestring( resource $image . int $font , int $x , int $y , string $s , int $col ) 

imagestring() 函 数 使 用 col 颜色 将 字符 串 s 画 到 image 所 代表 的 图 像 的 x、y 坐标 处 ， 这 是 字符 串 
左上 角 坐 标 ， 整 幅 图 像 的 左上 角 为 0、0。 如 果 font 是 1、2、3、4 或 5， 则 使 用 内 置 字体 。 

imagepng0 函 数 

该 函数 将 创建 完成 的 图 片 以 png 的 格式 输出 。 该 函数 的 语法 如 下 : 

bool imagepng( resource $image [. string $filename ] ) 

参数 image 是 要 保存 的 图 像 源 , 参数 filename 是 要 保存 的 图 像 名 。 如 果 省 略 , 则 直接 输出 到 浏览 器 。 

imagedestroy() 函 数 

图 像 保 存 完毕 后 ， 使 用 imagedestroy0 函 数 来 释放 内 存 。 该 函数 的 语法 如 下 : 





bool imagedestroy( resource $image ) | 

在 本 系统 中 ， 应 用 GD 函数 库 生 成 随机 图 片 的 实现 方法 如 下 checks.php): | 
| 

<Iphp | 

session _start(: /启动 Session 会 话 ! 

header("content-type:image/png"): /设置 创建 图 像 的 格式 

S$image_ width=70: // 设 置 图 像 宽 度 

Simage_height=18; // 设 置 图 像 高 度 


Snew_number=$_ GET[num]: 
Snum image=imagecreate($image width.$image height): // 创 建 一 个 画布 
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| imagecolorallocate($num image.255.255.255): // 设 置 画 布 的 颜色 
| for($i=0:$i<strlen(Snew_number):Sir+){ // 循 环 读 取 SESSION 变量 中 的 验证 码 
| Sfont=mt rand(3.5): /设置 随机 的 字体 
| $x=mt rand(1,8)+$image width*$i/4: // 设 置 随机 字符 所 在 位 置 的 坐标 
食 凡 | | S$y=mt_rand(1.$image_height/4): /设置 随机 字符 所 在 位 置 的 Y 坐标 
| $color=imagecolorallocate($num image,mt_rand(0,100),mt_rand(0,150).mt_rand(0,200)); /设置 字符 的 颜色 
pte | imagestring(Snum_ image.$font.$x.$y.Snew_number[$i].$color); // 水 平 输出 字符 
} 
| imagepng($num image): // 生 成 PNG 格式 的 图 像 
| imagedestroy($num image): // 释 放 图 像 资源 
| > 
| 提交 表单 信息 后 ， 调 用 自 定义 函数 check form0 来 实现 在 当前 页 验证 输入 的 验证 码 是 否 正确 
| (index.php )。 
<script language="JavaScript"> 
function check form(form]){ 
wa 


if(forml .checkcode.value—""){ 
alert(" 验 证 码 不 能 为 空 ! "):fomml.checkcode.focusO:retum false; 


} 
if(form!l.checkcode.value!=num){ 
| alert(" 您 输入 的 验证 码 不 正确 ， 重 新 输入 ! "):forml.checkcode.focusO:retum false:; 
| } 

| 国生 

</script> 


22.3.5 复 选 框 全 选 


在 网 页 中 根据 数据 库 内 容 应 用 For 循环 语句 动态 创建 复 选 框 的 个 数 , 被 全 选 或 反选 的 复 选 框 必须 
| 设置 name 为 note id[]， 复 选 框 的 值 是 留言 信息 的 ID 号 。 
| <input type="checkbox" name="note id[]” value="<?php echo $id:?>"/> 
| 
| 添加 一 个 全 选 的 复 选 框 ， 作 为 要 选择 的 内 容 。 当 选中 该 复 选 框 时 ， 调 用 自 定义 函数 check_all0 来 
| 设置 复 选 框 的 全 选 。 

<input type="checkbox" name="select_all" onClick="check all(this.form)" /> 

<span class="stylel"> 全 选 </span>&nbsp:&nbsp: 

全 选 的 实现 ， 遍 历 所 有 的 复 选 框 fpmm.elements[j， 然 后 设置 各 多 选项 的 checked 属性 为 tue。 代 

码 如 下 (manage/index.php): 

<script language="JavaScript"> 

/选择 表单 中 所 有 check box 

function check all(form){ 

for(var i=0;i<form.elements.length-2:i++){ 


Var e=form.elements[i]: 
e.checked=tme: 


} 
| b 
| </script> 
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设置 或 获取 复 选 框 的 状态 ， 其 值 tme 为 选中 ，false 为 未 选中 。 在 登录 后 台 首 页 ， 选 中 【全 选 】 
复 选 枉 ， 所 有 name 为 note_id[] 的 复 选 框 将 被 选中 。 
添加 一 个 反选 的 复 选 框 ， 作 为 取消 选择 的 内 容 。 当 选中 【反选 】 复 选 框 时 ， 调 用 自 定义 函数 
inverse0， 设 置 复 选 框 当前 值 的 相反 设置 。 
<input type="checkbox" name="select_reverse" onClick= "inverse(this form)" /> 
<span class="style1"> 反 选 </span> 
反选 的 实现 ， 人 遍历 所 有 复 选 框 form.elements [了 j， 获 取 复 选 框 的 checked 属性 值 ， 如 果 是 true， 则 
设置 为 alse， 和 否则 设 为 tue， 即 作为 当前 值 的 相反 设置 ， 演 示 效 果 如 图 22.10 所 示 。 
<script language="JavaScript"> 
// 反 选 表单 中 checkbox 
function inverse(form){ 
for (var i=0:i<form.elements.length-2:i++){ 
Var € = form.elements[i]: 
echecked — true ? e.checked = false : e.checked = true; 























} 
4 
</script> 
ET oans 
文章 版 块 选择 上 是 作者 是 二 回复 发 布 时 间 
> 发表 文章 回 无 法 攻 好 时 到 名 已 @ 夏 2016-09-11 13:44:18 
”> 7 生理 团 所 伟 丰 片 化 时 代 吉 司 进行 广告 业 闪 投 该 bpehina 已 回复 2016-09-07 12:25:29 
得 三 问 版 块 团 是 的 二 主 未 回复 2016-99-07 12:21:21 
该 取 地 有 网 4 张 三 已 回复 2016-09-07 12:05:51 
> 流 角 交 回 后 ES 未 回复 2016-08-08 23:00:49 
留言 板块 Mt 萱 名 未 回复 2016-08-08 23:00:12 
> 留言 管理 团 不 许 看 于 名 未 回忆 2016-08-08 17:20-46 
2 男 这 问题 和 取 六 未 回复 2016-08-07 22:43:57 
返回 首页 adnin duin 已 四 复 2016-08-07 21:50:16 
a 至 名 未 回复 2016-08-07 10:06:47 
人 网 ? 千 Rs Cm 共 [Hz 条 每 页 C10 条/ 共 [2 页 第 -页 上 一 页 下 一 页 最 后 -页 
查询 条 件 : | 留言 主题 v| 查询 





图 22.10 全 选 复 选 框 


22.4 页 面 开发 


现 
) 六 





本 节 将 详细 讲解 整个 网 站 的 开发 过 程 。 在 开发 过 程 中 ， 读 者 应 该 重视 下 面 两 个 问题 ， 虽 然 它们 不 | 





是 本 书 讲解 的 重点 ， 但 是 它们 对 于 网 站 的 点 击 维护 具有 重要 价值 。 
回 ”设计 美观 得 体 的 页 面 是 开发 人 员 所 必须 考虑 的 要 素 之 一 ， 当 然 为 了 提高 页 面 访问 速度 ， 尽 
量 将 页 面 图 片 存储 为 sf 或 jpg 格式 , 这 两 种 格式 图 片 具 有 所 占 空间 小 、 画面 质量 高 等 特点 ， 
从 而 可 以 有 效 提高 网 站 的 传输 率 。 
加 ”一 个 优秀 的 Web 程序 ， 不 仅 应 具有 合理 的 代码 编写 规则 和 较 高 的 代码 执行 效率 ， 合 理 的 页 
面 设计 方式 和 美观 的 页 面 也 是 不 可 缺少 的 ， 为 了 保证 整个 留言 板 页 面 的 一 致 性 ， 在 设计 页 
面 时 ， 将 留言 板 的 头 部 内 容 存储 在 header.html 文件 中 ， 将 用 于 显示 版 权 信息 的 尾部 内 容 存 


PEs 


3 砚 贡 设计 与 网 站 建设 从 入 门 到 精通 


| 储 在 footer.html 文件 中 ， 这 样 ， 在 新 建 留言 板 的 功能 页 面 时 ， 只 需 在 页 面 的 适当 位 置 应 用 
| include 语句 调用 这 两 个 静态 页 文件 即 可 。 应 用 这 种 页 面 设计 方式 ， 还 可 以 提高 程序 的 开发 
| 效率 和 易 维护 性 。 


22.4.1 设计 数据 结构 


Note | 留言 板 模块 是 一 个 中 小 型 的 信息 平台 ， 关 于 数据 库 的 选择 需要 充分 考虑 到 成 本 问题 及 用 户 需求 ， 
| 如 跨 平台 等 问题 ,而 MySQL 是 世界 上 最 为 流行 的 开放 源码 的 数据 库 ， 是 完全 网 络 化 的 跨 平台 的 关系 
| 型 数据 库 系 统 ， 因 此 ， 本 系统 采用 MySQL 数据 库 作为 数据 库 开发 平台 。 

| 数据 库 的 设计 与 功能 的 层次 紧密 相连 。 结 合 实际 情况 及 对 用 户 需求 的 分 析 ， 留 言 板 中 应 用 的 db_ 

| leaveword 数据 库 主 要 包含 4 张 数据 表 ， 如 图 22.11 所 示 。 

| ET 年 到 攻 E ODSSEWGH 

师 结 网 名 SQL 邯 执 索 回 坦 鹿 司 SL 加 号 几 损 作 汪 朴 限 咯 程 序 加 事件 更 多 


表 = 操作 行 数 。 类 型 。 排序 规则 大 小 多余 


tb_file 请 贺 浏 览 是 结构 仿 搜 索 也 括 入 二 青空 @ 刚 除 5 MyISAM gb2312 chinese ci = 14.5 7,920 
了 


th_note 寅 站 浏览 大 结构 过 搜 索 对 括 入 名 清 宇 加 出 放 。 14 MyISAM gb2312_chinese ad 5.4 KB 1,288 


也 _note_answer 寅 轩 浏览 0 关 构 念 搜 索 绪 括 入 甸 再 宇 @@ 刚 除 4 MyISAM gb2312 chinese ci 4.3 KB 2 
th_word 请 站 浏览 六 结构 考 搜 索 丝 插 入 鄞 清空 加 删除。 4 MyISAM gb2312 chinese ai 2.1 了 


4 张 表 总 计 27 gb2312_chinese_ci 。 26.3 
[3 





图 22.11 留言 板 数据 结构 


下 面 介绍 其 中 两 个 主要 数据 表 的 表 结 构 。 
tb_note〈 留 言 信息 表 ) 
留言 信息 表 主 要 用 来 存储 用 户 发 表 的 留言 信息 。 该 数据 表 的 结构 如 图 22.12 所 示 。 


一 » 
国 流 结构 司 SQL 了 搜索 Por 号 SL 加 导入 王权 限 六 操作 总 触发 器 





| # 名 字 类 型 排序 规则 属性 空 转 认 区 外 操作 
| 口 1mote dp int1) 否 元 ”AUTO_INCREMENT 上 做 改 @ W 除 轧 主 社 围 唯一 更 多 
| DD 7 note_nser varchar(20) gh7317_chinese_ 否 元 7 修改 园 刚 除 岂 主 键 加 唯一 吃 征 科 
| 口 3 notetite varchar(40) gb2312_chinese_ci 否 元 人 改 加 W 际 力主 键 转 唯 一 更 
| 百 4 note_content varchar(500) gb2312_chinese 下 本 修改 @ 刚 除 六 主键 问 唯一 更 多 
| 口 5 note_mood varchar(200) gb2312_chinese_ci 否 元 妇 从 改 加 出院 内 主键 国 唯 一 更 
| 口 Snotetime datetime 香 云 少 此 孙 加 出 除 少 主 社 加 唯一 更 多 
| 口 7 mote_user_pic varchar(200) gb2312_chinese_ci 否 元 太 八 小 加 出 除 户主 社 转 唯 一 更 多 
百 8 note answer int(1) 否 0 7 修改 @ 出 除 户主 键 加 唯一 v 更 参 
口 9 note_flag int(1) 否 0 要 让 区 @ 几 除 内 主 建 国 唯 一 更 多 








图 22.12 留言 信息 表 数 据 结构 


| 回 也 note answer (回复 信息 表 ) 
| 回复 信息 表 主 要 用 来 存储 管理 员 回 复 用 户 的 留言 信息 。 该 数据 表 的 结构 如 图 22.13 所 示 。 
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[il ET 
由 浏览 所 结 鬼 加 SQL 对 执 索 了 插入 避 SU 层 呈 入 as 权限 少 执 作 渤 者 发 到 


# 名 字 类 型 排序 规则 属 空转 格外 摊 作 
性 认 


1noanidS int(11) 否 无 AUTO_INCREMENT 忆 修 次 @ 刚 除 贿 主 键 转 唯一 ! 
oi 全 


上 


2 noan_note id int(11) EB: 回国 只 | 
更 : 


3 noan_content 。 varchar(500) gb2312_chinese_ci 天 只 个 改 @ 出 除 户主 社 国 唯一 Note 
一 更 和 】 


4 noan_time datelime 7 位 改 加 删除 少 主 建 国 唯 一 
了 地理 全 





5 noan_user_name varchar(10) gb2312_chinese 无 妇 个 履 @ 刚 除 户主 社 轩 唯一 
了 可 和 





图 22.13 ”回复 信息 表 数 据 结构 | 
22.4.2 ”访问 数据 库 


本 节 将 定义 数据 库 访问 类 ，PHP 通过 class 关键 字 加 类 名 来 定义 类 。 具 体格 式 如 下 : 


<2php 
class MyClass { 
/类 代码 


} 

?> 

两 个 大 括号 中 间 的 部 分 ， 就 是 类 的 全 部 内 容 。 上 面 的 MyClass 就 是 一 个 最 简单 的 类 。MyClass 类 
仅仅 有 一 个 类 的 骨架 ， 什 么 功能 都 没有 实现 ， 不 过 这 并 不 影响 它 的 存在 。 
< 似 注意 ; 一 个 类 ， 就 是 一 对 大 括号 之 间 的 全 部 内 容 都 要 在 一 段 代码 段 中 ， 即 一 个 “<?php” 和 “?>” 

之 间 ， 不 能 分 割 成 多 个 块 ， 下 面 用 法 是 不 合法 的 : 
<?php 
class MyClass { 


/类 代码 
?> 


<?php 

/类 代码 
1 
?> 


为 了 便于 维护 ， 减 少 代 码 元 余 ， 本 系统 使 用 了 一 个 简单 的 自 定 义 数据 库 类 。 定 义 数据 库 访问 类 的 
代码 如 下 (common/db_mysql.class.php): 


/ 率 六 六 率 率 六 率 六 率 订 站 率 六 率 闵 让 率 六 六 六 率 率 率 率 六 于 六 六 六 六 六 来 率 让 站 率 订 六 


* 数 据 库 访问 类 


本 素来 六 率 六 来 冰 率 玉 六 率 六 六 率 六 率 六 六 六 于 六 六 率 丰 六 订 六 闪 本 订 太 厅 率 太太 亲本 订 / 


class DB MySQL{ 














人 ! 
Var $Host = "127.0.0.1"; // 服 务 器 地 址 | 
var $Database = "db_leaveword": // 数 据 库 名 称 | 
Var $User = "root"; /用 户 名 | 
var $Password= "111111": /用 户 密码 | 
从 L 


“T1793* 
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var$Link ID =0: /数据 库 连接 
var$Query ID =0: /查询 结果 

Var $Row_Result = array(): /结果 集 组 成 的 数组 

var $Field Result = amay0: // 结 果 集 字段 名 组 成 的 数组 
var $Affected Rows: /| 影响 的 行 数 

Var $Rows: /结果 集中 记录 行 数 

var $Fields:; /结果 集中 字段 个 数 

Var $Row_Position = 0; /记录 指针 位 置 索引 


定义 构造 函数 。 其 中 ，$this 是 指向 当前 对 象 的 指针 。 代 码 如 下 : 


function constructO{ 
$this->connectO: 
} 
定义 解析 函数 。 代 码 如 下 : 
function destructO{ 
mysql_close($this->Link ID): 
定义 连接 服务 器 和 选择 数据 库 的 方法 。 代 码 如 下 : 
function connect($Database = "".$Host = "",$User = "",$Password = ""){ 
if ("=— $Database){ 
S$Database = $this->Database: 
. 
if ("=— $Hos){ 
$Host = $this->Host; 


} 
if ("= $Usen){ 
S$User = $this->User; 

} 

if(""=— $Password){ 

$Password = $this->Password; 

让 (0 一 $this->Link ID ){ 

S$this->Link ID=@mysql_pconnect($Host, SUser $Password): 
if(!$this->Link ID) { 
Sthis->halt(" 连 接 数 据 库 服务 端 失 败 !"); 

} 

if (!mysql select_db($this->Database,$this->Link ID)) { 
Sthis->halt(" 不 能 打开 指定 的 数据 库 :".$this->Database); 

} 


b 
return $this->Link ID: 
} 
定义 释放 内 存 方法 。 代 码 如 下 : 


function freeO{ 
if( @mysql free result($this->Query_ID)) 
unset (Sthis->Row_Result): 
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S$this->Query ID =0: 
} 
定义 执行 查询 方法 。 代 码 如 下 : 
function query($Query_ String){ 

让 释放 上 次 查询 占用 的 内 存 */ 


if (Sthis->Query ID){ 
Sthis->free(); 





} 
这 0 一 $this->Link ID){ 
$this->connectO; 


} 
// 设 置 中 文字 符 集 
@mysql_ query("set names gb2312".$this->Link ID): 
S$this->Query_ ID = @mysql query($Query_String.$this->Link ID); 
if(!S$this->Query_ID){ | 
S$this->halt("SQL 查询 语句 出 错 : "SQuery_Sting): | 
} ! 

return $this->Query_ ID: 
} 
定义 以 数组 方式 返回 结果 集 的 方法 。 代 码 如 下 : 
function get rows arrayO{ 

S$this->get_rows(: 

for($i=0:$i<$this->Rows:$iH+){ 

这 !mysql_data_seek($this->Query ID.Si){ 
S$this->halt("mysql_data_seek 查询 语句 出 错 "); 。“// 调 用 自 定义 函数 





} 
S$this->Row Result[$i] = mysql fetch array($this->Query ID): 


} 
Teturn $this->Row Result; 
} 
定义 以 对 象 返回 的 结果 集 数 组 的 方法 。 代 码 如 下 : 
function get fields arrayO{ 
S$this->get fieldsO: 
for($i=0:$i<$this->Fields:$i++){ 
$obj = mysql fetch field($this->Query ID.SiD: 
S$this->Field Result[$i] = $obj->name: 














} 
return $this->Field_Result: 
} 
定义 返回 结果 集 的 记录 行 数 的 方法 。 代 码 如 下 : 
function get rowsO{ 
S$this->Rows = mysql num rows($this->Query ID): 
Teturn $this->Rows: 
} 


定义 返回 结果 集中 字段 个 数 的 方法 。 代 码 如 下 : 


= 


一 一 人 绝 以 入 站 到 持 适 


function get fieldsO{ 
Sthis->Fields = mysql num fields($this->Query_ID): 
Teturn $this->Fields: 

} 


全 ~ | 定义 执行 SQL 语句 并 返回 由 查询 结果 中 第 1 行 记录 组 成 的 数组 。 代 码 如 下 : 


= 
| Sthis->query($sqD): 
| return mysql fetch array($this->Query_ID): 

} 
定义 打印 错误 信息 的 方法 。 代 码 如 下 : 
finction halt(Smsg){ 

S$this->Error=mysql_errorO; 

printft"<BR><b> 数 据 库 发 生 错误 :</b> %s<br>\n", $msg): 

printf"<b>MySQL 返回 错误 信息 :</b> %s <br>\n",S$this->Error); 


} 
22.4.3” 写 入 留言 


| 在 签 写 留言 时 ， 同 时 支持 过 滤 敏 感 词 、 添 加 留言 心情 、 支 持 给 版 主 写 悄 悄 话 〈 私 帖 )， 还 可 以 选 
| 择 有 个 性 的 头像 。 同 时 ， 为 了 方便 用 户 查 看 留言 后 及 时 签 写 留言 信息 ， 在 留言 板 首页 的 查看 留言 的 正 
| 下 方 设置 了 签 写 留言 版 块 ， 以 及 在 留言 板 头 部 导航 栏 中 设置 了 签 写 留 言 的 超 链接 。 用 户 可 以 进行 双向 
| 选择 签 写 留言 信息 。 签 写 留 言 页 面 的 运行 结果 如 图 22.14 所 示 。 


| 四 -|B tei//127.0.01 /esveword odd.php - 昌 CG| 乱 127.001 x 
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| 图 22.14 签 写 留言 
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签 写 留言 功能 的 实现 过 程 如 下 。 | 
【操作 步骤 】 | 
第 1 步 ， 使 用 include 语句 引用 顶部 头 文件 headerhtml。 | 


<?php include("header.html"):?> 
第 2 步 ， 使 用 include 语句 引用 底部 的 版 权 信息 文件 footerhtml。 
<?php include("footer.html"):?> | 
第 3 步 ， 设 计 表 单 结 构 。 签 写 留 言 页 面 涉 及 的 HTML 表单 的 重要 元 素 如 表 22.1 所 示 。 | 
表 22.1 签 写 表 单 结构 的 元 素 
| 














时 | 
forml form 表单 action="note checkphp"” method="post" | 
User name text 用 户 昵称 ”| value=" 匿名 " maxlength="64" | 
title text 留言 标题 “| maxlength="64" size="30" | 

hn | cols="60" rows="8" | 
言 内 容 | 
Ce bi style="backeround:url( /images/mrbccd.gif)" | 
| Value="&ltimg src='images/face/1 .gif &gt;" checked="checked， | 
2 | 
checkcode text id="checkcode" size="12" : 
! 
createcheckcode | hidden value="" | 
checkbox checkbox Value="1" | 
ead 本 checked="checked" value="01" | 
和 | 
全 ee class="btn1”id="submit”value=" 签 写 留言 ”onclick="retum | 
check form(forml):" 
Teset Teset class="btnl" value=" 清 除 留言 " 


第 4 步 , 提交 表单 信息 到 数据 处 理 页 , 首先 需要 对 用 户 的 留言 信息 进行 敏感 词 过 滤 , 然后 应 用 POST 
方法 接收 用 户 提交 的 留言 信息 (note_check.php)。 


$content =$ POST[content]: 
$user name =$ POST[user name']: 


<?php | 
Tequire("global.php"); | 
这 $_POST){ | 
if(is_file("./filterwords.txt"){ // 判 断 给 定 文件 名 是 否 为 一 个 正常 的 文件 | 
$filter_word = file("./filterwords.txt"): // 把 整个 文件 读 入 一 个 数组 中 | 

$str=$_ POST['content]: | 
for($i=0:$i<count($filter_word):$i++){ // 应 用 For 循环 语句 对 敏感 词 进 行 判断 | 
iftpreg_match("/".trim($filter_ word[$i])."/i".$str)){ /应 用 正则 表达 式 , 判断 传递 的 留言 信息 中 | 

是 否 含有 人 敏感 词 | 
echo "<script> alert( 留 言 信息 中 包含 敏感 词 ! "):history.back(-1):</script>"; | 

exit: | 

} | 

} | 

: 

! 
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和 Snote flag=$ ] 
人 ifSnote flag!=1){$note | 让 
Eu S$datetime=date("Y-m-d H:i:s"); 
Note | $sql = "insert into tb_note (note_ user.note title.note_content.note mood.note time.note_ user pic.note flag) 


变量 Snote_flag 用 来 记录 用 户 发 送 的 留言 信息 是 否 为 私 帖 ， 即 给 版 主 的 悄悄 话 ， 该 变量 的 默认 值 
| 为 1 ( 非 私 帖 )， 如 果 该 变量 不 等 于 1， 则 赋予 其 值 为 0， 说 明 是 私 帖 ， 在 接 下 来 的 查看 留言 信息 时 会 
| 对 私 帖 进行 处 理 。 
| 


| 22.4.4 显示 留言 


| 留言 显示 主要 技术 难度 就 是 分 页 显示 问题 。 分 页 查看 留言 是 指 将 留言 信息 按 查 询 结 果 分 页 显示 ， 
| 版 主 信息 回 显 是 针对 该 留言 信息 版 主 做 出 的 回复 。 当 用 户 从 数据 库 中 查询 出 的 留言 信息 较 多 时 ， 如 果 
| 用 一 个 页 面 来 显示 所 有 的 记录 ， 不 仅 运行 速度 较 慢 ， 也 会 给 用 户 浏览 带 来 诸多 不 便 。 这 时 就 可 以 通过 
| 对 查询 结果 进行 分 页 显示 来 解决 这 一 问题 。 分 页 查看 留言 信息 及 版 主 信息 回 显 页 面 的 运行 结果 如 
图 22.15 所 示 。 
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在 检索 留言 信息 时 ， 应 用 了 左 外 联接 技术 (left join ...on) 将 两 个 表 或 多 个 表 连 接 起 来 ， 返 回 部 分 
或 全 部 匹配 行 。 左 外 联接 基本 用 法 如 下 : 

select field1[field2...] 
from tablet left [outer] | 全 
on join_condition Ee” 

[where search_calition] 
参数 left outer join 表示 表 之 间 通 过 左 连接 方式 相互 连接 ， 也 可 以 简写 成 left join， 参数 on join_ 
condition 指 多 表 建 立 连接 所 使 用 的 连接 条 件 。 参数 where search condition 是 可 选项 , 用 于 设置 查询 条 件 。 


深 提示 : 外 联接 分 为 左 外 联接 和 右 外 联接 ， 除 了 上 面 介绍 的 左 外 联接 外 ， 还 有 一 个 右 外 联接 right 
outer join, 右 外 联接 返回 的 查询 结果 包含 左 表 中 的 所 有 符合 连接 条 件 以 及 右 表 中 所 有 满足 
查询 条 件 的 行 。 

分 页 查看 留言 信息 , 不 但 可 以 减少 页 面 纵向 延伸 的 面积 ,同时 也 不 会 影响 网 站 的 运行 速度 。 
下 面 讲解 分 页 查看 留言 的 实现 过 程 ,版 主 信息 回 显 功能 的 实现 方法 穿插 在 分 页 中 进行 讲解 
(index.php ) 。 


【操作 步骤 】 
第 1 步 ， 调 用 数据 源 文件 。 
Tequire( "global php ); 
第 2 步 ， 应 用 左 外 联接 实现 多 表 联 合 查询 巧妙 地 构造 SQL 语句 ， 检 索 留言 信息 表 和 
中 的 数据 ， 并 按 签 写 留言 的 时 间 降 序 排列 。 联 合 查询 构造 的 SQL 语句 如 下 : 
$sql = "select tb note.*.answ.* 位 om tb note left join"; 
$sql .= " (select noan note id.noan contentnoan time from tb note answer)as answ "; 
$sql .= " on answ.noan note id=tb note.note id "; 
$sql .=" order by note_time desc "; 
第 3 步 ， 确 定 记 录 跨 度 $row_per_page， 即 每 页 显示 的 记录 数 ， 这 里 设置 为 每 页 显示 3 条 留言 信 
息 。 也 可 以 根据 页 面 的 实际 情况 由 设计 者 自己 规定 。 根 据 公 式 “ 总 记录 数 / 跨 度 ”” 如 果 有 余数 则 进位 
取 整 来 计算 总 页 数 Spage count。 获 取 传 递 的 当前 页 数 $Spage_ num， 通 过 三 目 运 算 符 计算 判断 第 一 页 或 
者 是 最 后 一 页 的 位 置 。 最 后 为 SQL 语句 添加 limit 子 句 ， 计 算 查 询 的 起 始 行 位 置 ， 并 执行 SQL 语句 ， 
将 结果 集 存储 到 数组 中 。 
这 $ GED){ 
/得 到 要 提取 的 页 码 
$page num=$ GET[page num]?2$ GET[page num']: 1: 


) 六 











复 信息 表 | 








} 

else{ 
// 首 次 进入 时 ， 页 码 为 1 
$page num= 1; 


0 

// 得 到 总 记录 数 

SDB->query($sq)): 
S$row_count_sum = $DB->get_rows():; 


// 每 页 记录 数 ， 可 以 使 用 默认 值 或 者 直接 指定 值 
Srow_per page =3; 


a 


a OO 
| 


// 总 页 数 

$page count= ceil($row count sum/$row per page): 
// 判 断 是 否 为 第 一 页 或 者 最 后 一 页 

Sis first=(1 一 $page num) ?1:0; 

Sis last=($page nm 一 $page counD ? 1:0; 
/查询 起 始 行 位 置 

$start row = ($page_num-1) * $row_per page; 
/为 SQL 语句 添加 limit 子 句 

$sql = " limit $start row.,$row_per page":; 

// 执 行 查询 

S$DB->query($sqD); 

Sres = $DB->get rows array(): 

// 结 果 集 行 数 


$rows_count=count($res); 


第 4 步 ， 通 过 for 循环 语句 分 页 显示 查询 结果 。 代 码 如 下 : 


<?php 
for($i=0:$i<$rows_count:$i++){ 


Stitle=Sres[$iJ[note title']: // 标 题 

$author = $res[$il[mote_user]: /作者 
S$note_content=$res[$il[mote_content]: /内 容 
$mood=$res[$i]['note_ mood']; /心情 

$datetime = $res[$i]['note_time']: /时 间 
$note_pic=$res[$il[mote_user pic]:; /头像 

$id = SreslSilmote id]: // 当 前 行 note_id 
Snote_flag=$res[$i]['note_flag’]; // 是 否 是 版 主 悄悄 话 
Snote_answer=$res[$i]['note_answer’]: // 显 示 版 主 是 否 回复 标识 
// 版 主 回复 的 留言 信息 


$noan_content=$res[$i]['noan_content’]; 
$noan time=$res[$i]['noan_ time']: 
?> 


第 5 步 ， 输 出 留言 人 、 留 言 头像 和 留言 时 间 。 代 码 如 下 : 

<?php echo "<font color=#205401>".$author."</font>":?> 

<img src="images/face/pic/<?php echo $note_pic:?>" width="90" height="90"> 
<?php echo $datetime;?> 

第 6 步 ， 留 言 心情 的 实现 过 程 如 下 : 


<th width="61%" height="24" align="left" scope="col">&nbsp:&nbsp: 

<?php if($note_flag 一 1){echo "( 给 版 主 的 悄悄 话 …)":} else{ echo $title:}?></th> 

<td width="16%" align="left" scope="col"><span class="STYLE13"> 留 </span><span class="STYLE21"> 言 
| </span><span class="STYLE16"> 心 </span><span class="STYLE20"> 情 </span>: &nbsp:<?php echo $mood:?></td> 





<?php if($note flag—1){ echo "<img src='images/whisper.gif>&nbsp:( 给 版 主 的 悄悄 话 ..)":}else{ echo Snote_ 
content; }?> 


| 
| 
| 第 7 步 ， 本 模块 中 的 前 台 首 页 留言 信息 显示 区 ,通过 嵌入 在 留言 信息 中 的 特殊 方式 显示 版 主 回 复 
| 
| 
| 





| 的 信息 ， 如 图 22.15 所 示 。 版 主 信息 回 显 的 实现 方法 如 下 : 


if($note_flag—0 and $note_answer—1){ 
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3 | 
<TABLE width="500" cellPadding=2 cellSpacing=1 bgcolor="#205401" > | 
<TBODY> | 
<IR> ! 
<TD width="500" bgcolor="#FFFFFF" style="padding-top:10px: padding-left:10px: padding-bottom: 图 
10px: padding-right:10px:line-height:18px"><SPAN | 一 
style="FONTWEIGHT: bold; COLOR: #000000">&nbsp: 版 主 回复 : </SPAN> <SPAN Note 
style="COLOR: #000000">(<?php echo $noan time:?>)</SPAN>&nbsp: ! 
<hr color=#205401 size=1 style="width:500px: "> | 
<IMG src="images/face/pic/01.gif’ width="90" height="90" class=face style="FLOAT: left: | 
MARGIN: 2px Spx Spx 2px">&nbsp:&nbsp:<SPAN style="COLOR: #000000"><?php echo $noan content:?> | 
</SPAN> </TD> | 
| 


) 从 





第 8 步 ， 留 言 信息 分 页 汇总 。 代 码 如 下 : 

<td align="center”bgcolor="#F9F8EF"> 『 &nbsp; 当 前 第 &nbsp:<font color="#AA0066"><?php echo $page_ 
Dum:?></font>&nbsp: 页 / 共 &nbsp:<font color="#AA0066"><?php echo S$page_count:?>&nbsp:</font> 页 &nbsp:」 
&nbsp;&nbsp: 每 页 [&nbsp:<font color="#AA0066"><?php echo $Srow_per_page:?></font>&nbsp;」 条 &nbsp;&nbsp; 
&nbsp:&nbsp: 

<?php 

这 !Sis first) { 

?> 


<a href="./index.php?page_num=1"> 第 一 页 </a> <a href="./index.php?page_num=<?php echo ($page_ 
num-1) ?>"> 上 一 页 </a></td> 


第 9 步 ， 输出 分 页 控制 链接 ,实现 “第 一 页 ””“ 上 一 页 ”、“ 下 一 页 ”和 “最 后 一 页 ”的 链接 指向 ， 
并 进行 页 码 参 数 传递 。 代 码 如 下 : 

<2php 

} 

else{ 

> 


第 一 页 &nbsp:&nbsp: 上 一 页 
<2php 


} 
这 !Sis 1ast){ 
?> 


<a href="./index.php?page_ num=<?php echo ($page num+1) ?>"> 下 一 页 </a> <a href="./index.php?page_ 
Dum=<?php echo $page_count ?>"> 最 后 一 页 </a> 
<?php 


else{ 

7 
下 一 页 &nbsp:&nbsp: 最 后 一 页 
<?php 


号 


“Fe 


i 


第 10 步 ， 查 看 全 部 留言 信息 。 单 击 【 全 部 留言 】 超 链接 ， 传 递 变 量 id=-1 到 处 理 页 user note_ 
Tread.php， 注 意 ， 这 里 传递 给 id 的 值 是 -1。 
<a href="./user_note read.php?id=-1" target="” blank"> <span class="style2"> 全 部 留言 </span> </a> 
全 ”ia 的 值 等 于 -1 时 ， 执行 下 面 的 SQL 语句 ， 没 有 where 条 件 进行 限制 ,检索 全 部 的 留言 信息 和 
| 版 主 回复 信息 (user_note_read.php)。 
Note | Snote_ id=$_ GET[id]: /得 到 超 链接 中 的 参数 
| $sql = "select note.*.noan.* from tb note as note lef join tb note answer as noan on note.note id = 
noan.noan note id"; 


if($note id!="-1"){ 
$sql=" where note.note id=".Snote id: 














} 
// 最 后 加 上 排序 语句 ， 按 note_time 降序 ， 按 noan_time 降序 
$sql .= " order by note.note_time desc"; 
$DB->query($sqD); 
Snote = $DB->get_rows_array($sq]l); 


22.4.5 ”检索 留言 


| “信息 检索 是 对 已 存在 于 数据 库 中 的 数据 按 条 件 进行 筛选 浏览 , 是 查看 历史 信息 和 确认 数据 操作 最 
| 为 快速 、 有 效 的 办 法 。 

| 在 留言 板 首页 的 搜索 留言 版 块 中 输入 欲 查询 的 关键 字 ， 如 “幸福 ” 单 击 【 检 索 】 按 钮 ， 对 指定 
| 条 件 的 留言 信息 进行 模糊 查询 ， 并 输出 与 查询 条 件 相 匹配 的 结果 集 到 浏览 器 。 其 中 ,对 查询 结果 的 处 
| 理 有 3 种 显示 形式 : 第 1 种 是 无 版 主 回 复 的 留言 信息 ; 第 2 种 是 带 版 主 回复 的 留言 信息 ; 第 3 种 是 给 
版 主 悄悄 话 的 留言 信息 (由 于 是 私 帖 ， 对 真实 的 留言 信息 进行 屏 项， 以 特殊 方式 进行 显示 )， 在 首页 
Cindex.php) 的 搜索 框 中 输入 “PHP” 关 键 字 ， 然 后 执行 搜索 ， 则 搜索 结果 如 图 22.16 所 示 。 


CES 右 htpy/127.0.0.1/search.php A ED 1 雪 汕 各 直 


站 内 搜索 :test 可 技 标题、 内容、 姓名 、 时 





搜索 结果 列表 : 
teat 
匿名 : 说 


teatteatteatteat 


留言 时 间 : 2016-08-07 10:06:47 


留言 时 间 : 2016-08-09 10:25:11 v 





图 22.16 检索 留言 


| 在 对 数据 进行 查询 后 ， 本 系统 使 用 LIKE 进行 模糊 查询 。LIKE 关键 字 需 要 使 用 通配符 在 字符 串 
| 内 查找 指定 的 模式 ， 所 以 读者 需要 了 解 通配符 及 其 含义 。 通 配 符 的 含义 如 表 22.2 所 示 。 
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| 
表 22.2 LIKE 关键 字 中 的 通配符 及 说 明 | 
| 

















通 配 符 说 了 明 | 
% | 由 零 个 或 更 多 字符 组 成 的 任意 字符 串 | 
| 任意 单个 字符 | 
0 | 用 于 指定 范围 ， 如 [a- 切 ， 表 示 a 到 范围 内 的 任何 单个 字符 | 
四 用 于 指定 范围 外 ， 如 [na 加， 表示 a 到 范围 外 的 任何 单个 字符 





对 于 满足 数据 表 中 多 个 字段 中 的 任 一 字段 时 ， 可 以 使 用 or 运算 符 将 多 个 条 件 连接 起 来 。 
检索 留言 及 回复 信息 的 实现 过 程 如 下 。 
【操作 步骤 】 
第 1 步 ， 在 leftphp 页 面 中 添加 留言 信息 检索 模块 的 表单 元 素 。 代 码 如 下 (left.php): 
<form target="_blank" method="post" action="search.php"> 
<table width="180" height="40" border="0" align="center" cellpadding="0" cellspacing="1"> 
<tr> 
<td align="center" valign="middle" bgcolor="#FFFFFF"><input name="key Words" type="text" class= 
"btn1" value="” 搜索 关键 字 " size='19' />&nbsp; 
<input name="submit" type="submit" class="btn1" value=" 检 索 " /> 














</td> 





<2?php 
require("global.php"); 
if($_POST){ 
S$key words =$ POST['key words']: 
/检索 留言 信息 
$sql = "select note.*.noan.* 位 om tb note as note lef join tb note answer as noan on note.note id = noan. 
noan note id"; 
$sql.=" where note.note_title like '%".Skey_ Words."%' or note.note_content like '%".$key_words."%%' or note. 
note_time like '%".$key_words."%' or note.note_user like '%".$key_words."%"; 
$DB->query($sqD: 
$note = $DB->get rows array($sq)): 
S$note_count = count($note): 


bh 


?> 


第 3 步 , 应 用 foreach 结构 遍历 数组 ,输出 符合 查询 条 件 的 留言 信息 及 回复 信息 结果 集 。 代码 如 下 : 


<2php 
foreach($note as $V){ 
$id = $v['note_id"]: 
$note title=S$v[note title]: 
S$note_content = $v[mote_content]: 
S$note user = $v['note user]: 
$note time = $v[mnote time]: 
$note_user pic = $v[mote user pic]: 
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Snote_answer=$v['note answer]: 
Snote flag=$v['note flag']; 

// 回 复 信息 表 中 的 数据 

Snoan id = $v['noan id']: 

仿 7 | Snoan note id =$v[moan note id ']: 
$noan content= $v['noan _ content]: 


Note | $noan user = $v['noan user name']: 
| $noan time = $v['noan time]: 

| /符合 条 件 的 留言 信息 
这 $note_ counb{ 


?> 

第 4 步 ， 输 出 留言 信息 的 主题 和 用 户头 像 。 代 码 如 下 : 
<?php if($note_flag 一 1){echo "(给 版 主 的 悄悄 话 ...)":} 

else{ echo $note title;} 

?> 

<img src="images/face/pic/<?php echo $note user pic:?> 


| 

| 

| 应 用 让 条 件 语 句 进行 判断 ， 如 果 变 量 $note_flag 等 于 1， 说 明 用 户 提交 给 版 主 的 是 私 帖 ， 其 他 用 
| 户 没 有 查看 权限 ， 需 输出 “给 版 主 的 悄悄 话 ” 字 符 串 和 用 户头 像 ， 否 则 输出 留言 主题 和 用 户头 像 。 
第 5 步 ， 输 出 留言 信息 的 昵称 。 如 果 用 户 提交 的 并 非 私 帖 ， 则 输出 用 户 昵 称 。 代 码 如 下 : 

<?php if($note flag!=1){ echo $note_user:?> 


第 6 步 ， 对 给 版 主 的 私 帖 进行 特殊 处 理 。 如 果 变 量 $note_flag 等 于 1， 说 明 用 户 提交 给 版 主 的 是 
私 帖 ， 输 出 图 片 标识 和 给 “给 版 主 的 悄悄 话 ” 提 示 字 符 串 ， 否 则 输出 留言 内 容 。 代 码 如 下 : 


<?php if($note flag—1){ echo "<img src='images/whisper.gif>&nbsp:( 给 版 主 的 悄悄 话 ...)";}else{ echo $note_ 
content: }?> 


第 7 步 , 输出 版 主 回复 信息 ,如 果 变 量 $Snote_flag 等 于 0, 说明 不 是 给 版 主 的 私 帖 。 如 果 $note_answer 
等 于 1， 说 明 该 留言 信息 版 主 给 予 了 回复 。 当 同时 满足 这 两 个 条 件 时 ， 输 出 留言 信息 和 对 应 该 留言 版 
主 的 回复 信息 。 代 码 如 下 : 

<?php 这 $note_flag 一 0 and $note_answer—1){?> 

<TABLE width="700" align="center" cellPadding=2 cellSpacing=1 bgcolor="#D9D2B6" class=embedbox > 

<TBODY> 
<TR> 

<TD width="700" bgcolor="#FFFFFF" style="padding-top:6px: padding-left:10px: padding-bottom 
2px: padding-right:10px:line-height:18px"><SPAN style="FONT-WEIGHT: bold: COLOR: #000000">&nbsp: 版 主 回 
复 : </SPAN> <SPAN style="COLOR: #000000">(<?php echo $noan time:?>)</SPAN>&nbsp: 

<hr color=#D9D2B6 size=1l style= "width:700px: " > 

! <IMG src="images/face/pic/01.gif' width="90" height="90" class=face style="FLOAT: left: 
| MARGIN: 2px Spx Spx 2px">&nbsp:&nbsp:<SPAN style="COLOR: #000000"><?php echo $noan content:?> 
| <SPAN> </TD> 














<?php } ?> 
| 第 8 步 ， 输 出 留言 时 间 。 代 码 如 下 : 
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留言 时 间 : &nbsp:<?php echo $note_time; ?> 
<Iphp | 

» | 
| gy 
| 鲜 - 
22.4.6 回复 留言 


版 主 回复 留言 功能 是 建立 在 后 台 留 言 信息 管理 的 基础 上 ,在 后 台 首页 面 ， 包 括 分 页 、 单 条 、 多 条 
留言 及 回复 删除 、 版 主 回帖 、 查 找 、 查 看 留言 功能 ， 基 于 这 几 项 功能 的 实现 方法 在 本 章 都 做 了 不 同 层 
次 的 讲解 ， 因 此 本 节 重 点 讲解 版 主 回 复 留 言 功能 的 实现 方法 。 通 过 选择 相应 的 留言 信息 标题 ， 跳 转 到 
版 主 回复 留言 页 面 。 版 主 回复 留言 页 面 的 前 后 运行 结果 如 图 22.17 所 示 。 




















后 台 留 言 回 复 显示 界面 
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前 台 留 言 回 复 显示 界面 
图 22.17 留言 回复 
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| 版 主 回复 留言 功能 的 实现 过 程 如 下 。 
| 【操作 步骤 】 

| 第 1 步 , 在 留言 板 后 台 管理 首页 ， 以 分 页 的 形式 显示 留言 的 全 部 信息 〈 不 包含 给 版 主 的 悄悄 话 贸 
)。 如 标题 、 作 者 、 是 否 回复 以 及 发 布 时 间 。 在 留言 标题 上 添加 如 下 超 链接 (manage/index. php )。 
<a href="note read php?note id=<?php echo $id?>" target=" blank"><?php echo Stitle:7></a> 


第 2 步 ， 用 户 单 击 留言 标题 信息 ， 将 该 留言 的 id 号 传递 给 数据 处 理 页 面 note_read.php， 在 该 页 
| 面 添加 版 主 回复 的 表单 元 素 。 代 码 如 下 manage/note_read .php): 
<form name="note" action="" method="post" onSubmit="retum(check formO)"> 
| <t> 
| <td width="111" height="24" align="center" bgcolor="F9F8EF"> 回 复 内 容 : <br></td> 
| <td width="661" height="24" bgcolor="F9F8EF"><textarea name="content" rows="8" cols="80"></textarea> 











</tr> 

| <tr> 

| <td height="35" colspan="2" align="center" bgcolor="F9F8EF"><input name="submit" type="submit" class= 
| "btn1" value=" 回复 "size="8"> 

! &nbsp:&nbsp: 

| <input name="button" type="reset" class="bin1” onClick="clear form(note)"” value=” 清除 "size="8"> 
| <htd> 

</t> 

</form> 


| 第 3 步 ， 提 交 表 单 信息 到 本 页 ， 应 用 POST 方法 接收 版 主 回复 的 信息 ， 应 用 insert 语句 将 版 主 回 
| 复 的 留言 信息 添加 到 回复 信息 表 ， 同 时 记录 当前 留言 信息 的 ID 号 ， 再 应 用 update 语句 更 新 留言 信息 
| 表 中 的 该 了 D 号 所 对 应 的 回复 标记 ， 将 其 设置 为 1， 从 而 完成 版 主 回复 留言 的 功能 。 代 码 如 下 : 


| 
i 
| Tequire("user.php"): 
if($_POST){ 
$content = $_POST['content]: 
S$datetime=date("Y-m-d H:i:s"): 
$sql = "insert tb_note_answer (noan note_ id,noan content.noan time,noan user name)"; 
$sql .=" values(".$note_id.".".$content.™,".$datetime.",".$default_ user name.")"; 


| S$DB->query($sq]): 
| $sqll= "update tb_note set note_answer=] Where note_id=".$note_id."™": 
| S$DB->query($sql11): 
| > 
| 
| <script language="javascript">alert(" 留 言 信息 回复 成 功 ! "):</script> 
| <?php 
// 跳 转 

| $url = "note read.php?note id=".$note id: 
| redirect once($url): 
| } 

ie 


| 第 4 步 ， 构造 SQL 语句 ， 根 据 当前 传递 过 来 的 ID 号 通过 多 表 联合 (left join...on 外 联接 语句 ) 检 
| 索 出 该 ID 号 所 对 应 的 留言 信息 及 回复 信息 。 
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<Iphp 
require(". /global_ manage.php"): 
if($_GET){ 
Snote id=$ GET['note id]; // 得 到 超 链接 中 参数 
} 
else 
Snote id=-1; // 如 果 是 非 超 链接 方式 进入 ， 则 $note_id 为 -1 





// 根 据 Snote id 不 同情 况 进 行 查询 | 
$sql = "select note.*.noan.* from tb note as note left join tb note answer as noan on note.note id = noannoam | 
note id ": | 
/如 果 是 查询 指定 留言 ， 则 加 上 where 子 句 | 
if($note id !=-D{ /查询 指定 留言 | 
$sql .=" where note.note id=".$note id: | 


} 

// 加 上 排序 语句 ， 按 note_time 降序 ， 按 noan_time 降序 

$sql = " order by note note time desc,noan.noan time desc": | 

$DB->query($sql): | 

S$note = $DB->get rows array($sql); ! 

?> 

最 后 ,应 用 foreach 遍历 数组 的 方法 输出 存储 在 数组 Snote 中 的 留言 信息 及 版 主 回复 信息 ， 其 实现 | 
方法 与 22.4.5 节 的 输出 方式 类 似 ， 这 里 不 再 装 述 ， 请 读者 参见 光盘 源 代码 。 | 

第 5 步 , 管理 员 可 以 对 版 主 回复 的 留言 信息 进行 删除 。 在 输出 的 版 主 回复 信息 中 添加 【删除 】 超 | 
链接 。 

<a href="answer_del. php?id=<?php echo $noan id:?>&note id=<?php echo $id:?>"> 有 删除 </a> 


第 6 步 ， 单 击 【 删 除 】 超 链接 ， 将 版 主 回复 的 留言 ID 传递 到 处 理 页 answer_delphp， 应 用 delete 
语句 删除 回复 信息 表 中 指定 ZD 的 数据 ， 从 而 完成 删除 版 主 回复 的 留言 信息 。 代 码 如 下 (answer_ 
del.php ): 





<2php 
require("../global manage.php"): 
// 获 取 传 递 来 的 fle id 及 查询 条 件 
$id=$_GET['id]: 
$note jd-$ GET[mote id]: 
$sql = "delete from tb_note_answer Where noan id = ".$id: 
S$DB->query($sqD: 
全 


<script language="javascript">alert(" 成 功 删除 版 主 回 复 的 留言 信息 !"):</script> 


<2?php 
/将 原来 的 查询 条 件 返回 
$url = "./note readphp?note id=$note_ id" 
Tedirect_once($SurD: 
?> 


22.4.7 ”删除 留言 


在 留言 板 的 后 台 首页 ， 可 以 对 留言 信息 及 版 主 的 回复 信息 进行 管理 。 选 中 【全 选 】 复 选 框 可 以 实 
现 快速 选择 当前 页 的 所 有 留言 信息 。 选 中 【反选 】 复 选 框 可 以 实现 快速 在 原 有 留言 选择 的 状态 进行 反 
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a 


项 选择 ， 单 击 【 删 除 】 按 钮 ， 即 可 删除 选中 的 留言 信息 及 其 对 应 的 版 主 回复 信息 。 批 量 删 除 留言 及 回 














复 信息 页 面前 后 的 对 比 效果 如 图 22.18 所 示 。 








六 言 管理 0 管理 留言 
文章 版 块 选择 标量 作者 是 否 回 夏 
发 表 文章 口 无 法 本 录 呵 医 名 己 回 夏 
”文章 管理 口 媒体 次 片 化 时 代 如 何 进行 广告 精准 投放 了 Dhpchina 已 回复 
竹 感 司 版 块 口 是 的 博 主 未 回复 
了 读 取 生 局 词 口 扣 张 = 已 回复 
| 口 后 匿名 未 回复 
留言 板 甘 口 Wt 匿名 未 回 夏 
>” 留言 管理 口 不 许 看 医 名 未 回复 
”版 主 单 贴 口 别 常 旺 程序 党 已 回 厂 
返回 首页 Hl wi i 已 回复 
te 区 名 未 加 
Os Og Cu] 
删除 前 
EET 。*awr+ 
文章 版 块 迁 笃 标题 作者 是 百 回 夏 
> 发 表 文章 口 ”无 小 登录 呵 匿名 已 回 夏 
> 文章 管理 口 媒体 次 片 化 时 代 如 何 谤 行 广告 精准 投 ? phpchina 已 回复 
禾 感 间 版 块 口 是 的 博 主 未 回复 
》 设 取 本 订 口 4 张 = 已 
> 浸 加 避 习 启 口 操 区 名 未 回复 
留言 板 其 口 铀 式 匿名 未 回 夏 
>” 留言 管理 口 不 许 看 攻 名 未 回复 
天 口 号 常 晰 程序 已 回复 
返回 首页 -st pr 已 @ 夏 
口 中 过 Ea 未 四 夏 
tT Os Og CW] 
删除 后 


22.18 ”删除 留言 


批量 删除 留言 及 回复 信息 功能 的 实现 过 程 如 下 。 
【操作 步骤 】 
第 1 步 ， 设 置 批量 删除 留言 信息 的 表单 元 素 如 下 (manage/index.php): 


<form action="./note_delete.php" method="post" name="note" id="note"> 

<tr valign="middle" bgcolor="<?php echo $col:?>" height="24"> 

<td align="center"><input type="checkbox" name="note id[]" 
<td><!-- 在 标题 上 添加 连接 --> 


<a href="note_read php?note_id=<?php echo $id?>" target="_blank"><?php echo $title:?2></a></td> 


<!-- 作 者 --> 
<td><?php echo $author:?></td> 


发 布 时 间 
2016-09-11 13:44:13 
2016-09-07 12:25:29 
2018-09-07 12:21:21 
2018-09-07 12:05:51 
2018-08-08 23:00: 匠 
2016-08-08 23:00:12 
2015-08-09 17:20: 始 
2018-08-07 22:43:57 
2018-08-07 21 





:1 
2018-08-07 10:06:47 


共 [12] 条 每 页 (10 条/ 共 [2J 页 第 -页 上 一 页 下 一 页 最 后 -页 


发 布 时 间 
2018-09-11 13:44:19 
2016-09-07 12:25:29 
2018-09-07 12:21:21 
2018-09-07 12:05:51 
2018-08-08 23:00: 匠 
2016-08-08 23:00:12 
2018-08-09 17:20: 始 
2018-08-07 22:43:57 
2018-08-07 21:50:16 
2018-08-07 10:05:22 


共 [1 条 超 页 [10) 条 / 共 [22 页 第 -页 上 一 页 下 一 页 最 后 -页 


value="<?php echo $id:?>" /></td> 


<td align="center"><?php if($answer 一 0){ echo "未 回复 "; }else{ echo "已 回复 ":}?></td> 


<td><?php echo $time:?></td> 
</t> 

<input type="checkbox" name="select all" onClick="check all(this.form)" /> 
<span class="style1"> 全 选 </span>&nbsp;&nbsp: 
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<input type="checkbox" name="select Teverse" onClick="inverse(this.form)" /> | 
<span class="stylel"> 反 选 </span>&nbsp:&nbsp: | 
<input name="submit" type="submit" value = "删除" class="btn1" /> 








</form> | 大 

第 2 步 ， 单 击 【 删 除 】 按 钮 ， 提 交 表 单元 素 到 数据 处 理 页 note_delete php。 | 鳄 ) 

第 3 步 ， 用 POST 方法 接收 留言 信息 的 ID 号 。 代 码 如 下 (manage/note_delete.php): 
require("../global manage.php"): | 

if($ POST){ 


/获取 传递 来 的 news id 及 查询 条 件 | 
S$note id=$ POST['note id]: | 
S$note id str=""; | 

第 4 步 ， 巧 妙 地 构造 SQL 语句 ,计算 用 户 选 择 留 言 的 个 数 ， 当 变量 $note_id 的 值 大 于 1 时 ， 表 示 | 
选择 多 条 留言 ， 否 则 表示 选择 一 条 留言 。 当 选择 一 条 留言 时 ， 直 接应 用 where 条 件 语句 指定 数组 的 第 | 

0 个 元 素来 检索 该 条 留言 执行 删除 操作 即 可 。 当 选择 多 条 留言 时 ， 应 用 each 遍历 数组 ， 每 个 ID 号 之 

间 用 逗号 进行 分 隔 , 对 循环 输出 的 ID 串 应 用 substr0 函 数 删 除 结尾 多 余 的 逗号 , 最 后 使 用 in 关键 字 删 

除 所 有 被 选择 的 留言 及 该 留言 所 对 应 的 回复 信息 。 其 中 ，S$sql 构造 的 SQL 语句 实现 删除 留言 信息 ， 

而 $sql 构造 的 SQL 语句 实现 删除 指定 留言 ID 所 对 应 的 回复 信息 。 代 码 如 下 : 

$sql = "delete from tb_note": // 删 除 留言 信息 表 中 的 数据 
$sqll="delete from tb_note_answer"; // 删 除 留言 回复 信息 表 中 的 数据 
这 count($note id)>1){ ”// 当 选择 多 个 留言 时 
while(list($name,$value)=each($note_id)){ /遍历 数组 
$a.="Svalue"."": 


by 

$a= substr($a.0,-1): 

// 使 用 ip 关键 字 删除 所 有 被 选择 留言 

$sql .= "where note_id in(".$a.")"; /指定 多 个 条 件 值 
$sqll = " where noan_note id in(".$a.")"; /指定 多 个 条 件 值 


} 

/只 删除 一 条 留言 

elsef 
$sql .=" where note id= "Snote id[0]: /指定 单个 条 件 
$sql1.=" where noan_note_ id=".$note id[0]: // 指 定单 个 条 件 


} 
SDB->query($sq)): 
SDB->query($sql1): 
?> 


第 5 步 ， 留 言 信息 及 回复 信息 删除 成 功 后 ， 弹 出 提示 信息 ， 并 返回 到 留言 板 后 台 首页 。 | 
<script language="javascript">alert(" 留 言 信 息 删 除 成 功 ! "):</script> | 
| 


<?php 
/将 原来 的 查询 条 件 返回 
$url = "Jindex.php": 
Tedirect_once($urD: 

} 

2> 
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22.4.8 设计 悄悄 话 


& | 在 留言 板 后 台 管理 页 面 中 ， 单 击 左 侧 导航 菜单 中 的 【版 主 单 帖 】 超 链接 ， 进 入 版 主 悄悄 话 管理 页 
| 面 ， 该 页 面 主要 实现 查看 给 版 主 的 悄悄 话 留言 、 分 页 浏览 、 删 除 悄悄 话 留言 功能 。 其 中 ， 删 除 悄悄 话 
Note | 与 删除 留言 的 实现 方法 基本 相同 。 本 节 重点 讲解 查看 给 版 主 的 悄悄 话 功能 ， 页 面 运行 结果 如 图 22.19 
所 示 。 
| 


msra oss: 














文章 版 块 适 绎 4 硬 全 发 时间 
》 发 表 文章 口 况 旁观 者 2016-08-07 22:44:58 
》 文章 管理 口角 区 名 2016-08-07 22:06:02 
| 音声 语 版 块 toss Ogs Ca 共 [ 耻 条 每 页 lg) 条 / 共 I 页 第 一 页 上 一 页 下 一 页 最 后 -页 
| 》 ” 读 取 敏 大 记 
| 》 添加 二 间 
| 留言 板块 
| 》 留守 管理 
| a 
| 








打开 悄悄 话 留言 


留言 时 间 : 2016-08-07 22:44:58 v 





查看 悄悄 话 
图 22.19 悄悄 话 实 现 
查看 给 版 主 的 悄悄 话 功能 的 实现 过 程 如 下 。 
【操作 步骤 】 
第 1 步 ， 在 左 侧 导航 栏 中 ， 添 加 【版 主 单 帖 】 导 航 链接 。 代 码 如 下 〈manage/m_leftphp ): 
<a hre 人 f="../manage/manage_note.php"> 版 主 单 贴 </a> 
第 2 步 ， 单 击 【 版 主 单 帖 】 导航 链接 ， 打 开 管 理 悄悄 话 留言 页 面 ， 在 留言 标题 栏 中 添加 如 下 语句 
(Cmanage/manage_note.php ): 
<a href="m note read php?note id=<?php echo $id:?>" target="_blank"> <?php echo Stitle:?> </a> 
| 第 3 步 ， 将 留言 的 人 D 号 传递 到 数据 处 理 页 ， 构 造 SQL 语句 ， 查 询 留言 ID 和 私 帖 字段 标记 为 1 
| 的 留言 信息 ， 应 用 foreach 遍历 数组 ， 并 将 悄悄 话 留言 信息 循环 输出 到 浏览 器 端 (manage/m note_ 
| read.php )。 
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<Iphp 

Tequire("../global manage.php"): 

Snote id=$ GET['note id]: // 得 到 超 链接 中 的 参数 
/根据 $note id 不 同情 况 进行 查询 

$sql = "select * from tb note where note id=".$note id" and note flag=1 "; 





$DB->query($sq)): 
S$note =$DB->get rows_array($sq]): 
?> ! 
< 
foreach($note as $v){ 
$id = $v['note id']: // 留 言 人 号 | 
Snote title = Sv[mote title]: // 留 言 标 题 | 
Snote_content = $v[mote content]: // 留 言 内 容 | 
Snote_user = $v['note_user]: // 留 言 人 
Snote_time = $v['note_time']; // 留 言 时 间 
S$note_ user pic=$v[mote user_ pic]: // 留 言 人 头像 


! 
?> | 
<table width="778px" align="center" cellpadding="0" cellspacing="0" bgcolor="" style="border:0:margin:10: align: | 
Center > 
<tr height='32pX' class='toptitlel' bgcolor=#ccddee> 
<td width='11' bgcolor="#D9EBB9"></td> 
<td height="27" colspan="2" bgcolor="#D9EBB9"><!-- 回 复 相 对 留言 的 缩 进 距离 --> 
<strong><font color="#559380"><?php echo $note user; ?></font></strong>&nbsp:&nbsp:<span class= 
"stylel STYLE14"> 给 版 主 的 悄悄 话 </span> </td> 
<td width="23" bgcolor="#D9EBB9">&nbsp:</td> 
</> 
<tr height='26px'> 
<!-- 标 题 行 --> 
<td bgcolor="#F9F8EF"></td> 
<td colspan="2" bgcolor="#F9F8EF"><span class="stylel"><?php echo $note title:?></span> </td> | 
<td bgcolor="#F9F8EF"><span class="style2"> <a href="note_answer.php?note_id=<?php echo $id:?>"></a> | 
</span> </td> 
</tr> 
<tr height=' 26pX> 
<!-- 内 容 行 -> 
<td bgcolor="#F9F8EF"></td> 
<td width="683" valign="top" bgcolor="#F9F8EF"><?php echo $note_content: ?> </td> 
<td width="59" bgcolor="#F9F8EF" style="padding-bottom:10px"><img src="../images/face/pic/<?php echo 
$note_user_pic:?>"><br> 
<td> 
<td bgcolor="#F9F8EF">&nbsp:</td> 
</t> 
<tr class="bg_author"> 
<!-- 留 言 人 信息 --> 
<td></td> 
<td colspan="2" align="right"> 留 言 时 间 : &nbsp:<?php echo $note_time: ?></td> 
<td align="right">&nbsp:</td> 
</t> 
</table> 


<2php }2> 


sfe 
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综合 案例 : 设计 在 线 论坛 


( 号 视频 讲解 ; 106 分 钟 ) 


随 着 互联 网 的 发 展 ， 网 络 信 息 不 断 丰 富 ， 以 动态 性 和 交互 性 为 将 征 的 论坛 是 当中 最 丰富 、 
最 开放 和 最 自由 的 网 络 信息 资源 ， 也 是 最 受 欢迎 的 一 种 信息 交流 方式 。 

论坛 是 一 种 比较 普遍 的 网 上 交流 手段 ， 其 表现 形式 多 种 多 样 ， 有 个 人 论坛 、 平 台 论坛 、 技 
术 论坛 和 轿子 论坛 等 ， 虽 说 名 目 众多 ， 但 都 在 围绕 着 一 个 “ 论 ” 字 在 进行 ， 其 原理 是 相同 的 
对 某 个 事物 、 事 情 或 者 人 物 发 表 自 己 的 意见 和 和 看法。 本章 将 详细 讲解 论坛 的 开发 流程 和 关键 
技术 。 


【 学 习 重 点 】 

MH ”能够 开 发 一 个 功能 完善 的 在 线 论坛 
增添 主题 导航 

设计 帖子 置顶 、 引 用 、 收 藏 

设计 回帖 屏 敬 、 无 刷新 交流 


至 吾 至 


第 23 章 综合 娄 例 :设计 在 线 论 坛 CA 】 
< | 


23.1 设计 思路 


网 络 论坛 和 互联 网 上 的 其 他 信息 一 样 ， 具 有 范围 广 ， 内 容 庞杂 ， 动 态 变化 性 强 等 特点 ， 但 是 两 个 
最 重要 的 特点 是 交互 性 和 时 效 性 。 交互 性 是 指 论坛 用 户 能 够 参加 到 论坛 信息 的 交流 过 程 中 来 , 可 以 在 
论坛 中 发 布 自己 的 信息 并 且 可 以 得 到 其 他 用 户 的 反馈 ,这 是 网 络 论坛 信息 最 基本 和 最 重要 的 特征 。 一 
位 用 户 发 布 信息 ， 往 往 有 很 多 人 回应 ， 可 以 开展 多 人 讨论 ， 这 是 一 个 多 向 交流 信息 的 过 程 ， 它 使 人 们 
能 够 便捷 地 进行 交流 。 由 于 互联 网 信息 传播 的 快捷 与 方便 以 及 网 络 论坛 的 交互 性 , 使 得 人 们 能 够 及 时 
地 从 论坛 中 获取 某 一 技术 和 行业 的 发 展 动态 与 最 新 的 进展 ,专业 技术 论坛 中 信息 的 时 效 性 更 强 , 往往 
一 些 最 新 的 技术 信息 都 可 以 从 论坛 中 获取 。 


23.1.1 设计 流程 


论坛 是 一 个 发 布 帖子 和 回复 帖子 的 过 程 ， 为 了 使 其 更 加 合理 、 完 美 ， 本 模块 增加 了 帖子 置顶、 帖 
子 引用 、 帖 子 收 藏 和 屏蔽 帖子 等 特殊 功能 ， 以 及 一 些 辅助 的 功能 ， 包 括 我 的 信息 、 我 的 好 友和 我 参与 | 
的 帖子 等 。 为 了 便于 对 论坛 进行 管理 ， 增 加 了 管理 员 管理 论坛 的 功能 ， 包 括 发 布 帖子 、 回 复 帖子 、 帖 | 
子 类 别 和 置顶 帖子 以 及 数据 的 备份 和 恢复 等 内 容 。 根据 上 述 的 功能 描述 ， 整理 出 论坛 模块 的 功能 结构 | 
图 ， 如 图 23.1 所 示 。 








图 23.1 论坛 模块 的 功能 结构 图 
然后 根据 功能 结构 图 中 描述 的 功能 ， 设 计 一 个 完整 的 论坛 模块 的 开发 流程 ， 如 图 23.2 所 示 。 
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图 23.2 网 站 设计 流程 
23.1.2 ”数据 结构 设计 


论坛 的 功能 完善 与 否 ， 数 据 库 的 运用 是 一 个 决定 性 的 因素 。 只 有 拥有 一 个 强大 的 数据 库 的 支持 ， 
论坛 的 功能 才能 够 展现 ， 否 则 它 将 和 留言 簿 没什么 区 别 。 

本 论坛 中 使 用 的 是 一 个 名 称 为 db_forum 的 数据 库 ， 在 该 数据 库 中 有 9 个 数据 表 。 有 关 数 据 表 名 
称 及 表 功 能 的 介绍 如 图 23.3 所 示 。 


ET Ey 











ji 络 构 辐 SQL 又 搜索 直射 司 L 同 SA 仿生 人 = 多 限 瞻 恕 记 人 事件 有 币 发 加 中 设计 器 
表 各 作 乒 数 个 关 型 排序 规 刚 大 小 。 多 全 

口 电 forum affiche 。 让 同济 8 了 4 结构 总 搜索 臣 十 入 伺 才 宇 刚 了 1 MyISAM gb2312_chinese d 2.1 FD 60 字 节 

口 由 forum big ype 富 门 浏览 其 车 的 专 瓜 素 收 填 入 乌有 主 加 出 除 & MyISAM gb2312 chinese a 2.1 

口 由 Jorum restore 请 园 浏 和 56 千 构 二 搜索 苇 本 入 晤 才 二 四 出 了 2 MyISAM gb2312 cinesed 4 

口 电 forum_send 请 回 浏 和 区 结构 名 执 守 苇 板 入 嫩 寺 加 出 和。 31 MyISAM gb2312_chinese_d 了. 

口中 fomm_smalliype 贪 四 浏 和 36 尖 构 全 检索 甘 丘 入 纪 考 全 如 列队 6 MyISAM Ob2312_chinese_ci = 2.2 

站 由 onm_wser 售 司 浏 8 沪 结 构 二 扫地 匡 括 X 钥 寺 全 加 出 际 5 MyISAM gb7312_chinese_G 

口 由 maiLhox 语 目 引 5 产 革 和 起 拉 幸 屠 丘 入 锯 才 人 @ 轴 际 12 MyISAM 0b2312_chinese di 2.6 

口 由 my_colection 人 请 司 河 5 拓 所 的 包 执 过 芋 后 入山 才 全 加 出 导 7 MISAM gb7312_chinese_si 

口 my friend 请 目 浏 所 匠 苇 和 全 搜索 芋 括 和 由 二 @ 列队 7 MyISAM 9b2312 chinese G2.2 
9 张 胡 a 计 oa gb2312_chinese ci 29.4 mm。 1.6 Re 





图 23.3 设计 数据 库 结构 
下 面 对 数 据 库 中 几 个 相对 比较 复杂 的 数据 表 的 功能 和 结构 进行 介绍 。 
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tb_forum user 数据 表 ， 用 于 存储 用 户 的 注册 信息 。 其 中 包括 13 个 字段 ， 字 段 属性 的 说 明 如 
图 23.4 所 示 。 
tb_forum send 数据 表 ， 用 于 存储 论坛 中 发 布 帖子 的 数据 。 其 中 包括 11 个 字段 ， 字 段 属性 的 | 


















习 浏览 济 范 构 局 SOL 忆 拓 友基 全 同 SL 车 入 入 限 户 生 让 济 欧 ”3 引 所 用 局 SQL 拆 案 了 其 A 局 Ss 局 SA 器 和 少 二 
# 名 字 天 型 排序 规则 必 性 痉 点 认 本 外 午 名 序 卖 型 排序 规则 属性 训 默认 铬 外 | 
om AUTOINCREMENT | fibsen nl AUTO-NCREMENT | 
ER aasaa Gh212 ai 本 局 sond aaapa vaafsal qb2312 anal 
癌 tolorum pase varehadS0) ob2312 chneae di 3 emd eontent medirien Eee 
站 ianm gpe achag) gh2312 dhinese 上 1 由 Vacdhar50) gb2312 cinese d 而 无 
口 5 也 4orum_omail Yarcharf50) gb2312 chinese_ci 站 5 th sond dato datotmo 亚 无 
DS th forwm tuepass .vacha(s0) gh2312 chinese ci 一 “6 由 send_pictwe varhar70) gb2312 chinese d 天 二 
Oo 7 th_forum_date datetime 亚 口 7 th _send type varchar(50) gb2312 chinese di 
tb forun picture varchas(80) gb2312 chinese dl 。 再 去 tsend ypes varcharlS0) gb2312 chinese 9 
让 9 blonm_amde varchar(50j gb2312_chinese ci 。 否 去 9 由 eead small_ gpe varchar(50) gb2312 cdhinese dl 
口 19 由 forum_pass_problom varchar(50) gb2312 chinese_ ci 车 去 [a| 10 tbh_send_type_ histillate varchar(50) gb2312_chinese_o 是 NULL 
Dt torm Pessoa vacha(G0) ce temel_ pe okopok varchar(0) he 
口 2 tbtorum_qq Yarcharf50) gb2312_chinese_ci 普天 口 人 2 中 eead acceesorios varcha80) 9b2312 chinoce ol 是 NULL 
口 全 由 om_spechllg ea gb2312 chinese d 再 无 3 rd 10) 是 0 
图 23.4 tb_forum_user 数据 表 图 23.5 tb_forum_send 数据 表 


tb_forum restore 数据 表 ， 用 于 存储 论坛 中 回复 帖子 的 数据 。 其 中 包括 7 个 字段 ， 参 数 说 明 
如 图 23.6 所 示 。 

回 tb_my_collection 数据 表 ， 用 于 存储 用 户 收藏 的 帖子 。 其 中 包括 7 个 字段 ， 各 个 字段 属性 的 
说 明 如 图 23.7 所 示 。 










,+ sn ad tk, ] 的 司 SaL 尺 扫 过 采 志 A 局 5 于 SA ol 可 限 办 
LE Ry 排斥 虹 刚 
Dr 了 [一 六 EE 属性 空 时 认 格 外 
reatore | "0 
口 Teoecton 三 mn 五 示 AUTO_INCREMENT 
D2 thoutor_ sobloct 。 wbalEo) W2312.chioen. i 到 五 
| 3 由 water contont medumied gpz12 choese ci 。 天王 口 2 也 colection sublect varhef50) gb2312.chinesed 。 否 无 
enim ser eh) p12 chee 天 至 D3 tb-collection_address varchar(150) 0b2312 chmese dg 二 堪 
En ee 对 门 4 thcolection label vardha(50) uk2312 cinese ad 吾 雹 
rr es D5 bcollection summary mediumiex ob2312 chinese 0 到 区 
D7 thfonm eonts™ OCR WO dE 0 
折 6 th_collection user varchar(50) gb2312 chinese © 否 无 
癌 eto,_seeecaoriee vachao0) Dot2_shameos 三 WULL 
PE ee ee 口 7 由 colection date datetme 亚 天 
23.6 tb_forum_restore 数据 表 23.7 tb_my_collection 数据 表 


在 本 模块 中 包括 9 个 数据 表 ， 由 于 篇 幅 所 限 ， 这 里 只 介绍 了 其 中 4 个 相对 比较 复杂 的 数据 表 , 有 | 
关 其 他 数据 表 的 内 容 和 属性 可 以 参考 本 书 源 代码 。 


23.2 案例 预览 


在 具体 学 习 之 前 , 用户 有 必要 先 借助 本 书 完成 源 代码 体验 网 站 运行 的 整体 效果 ,为 具体 实践 黄 定 | 
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砚 计 设计 与 网 站 建设 从 入 门 到 精通 





| 扎实 的 感性 基础 。 


! 
| 元 注 意 ， 林 这 案例 水 及 PHP 文件 过 80 多 个 ， 用 户 在 代码 阅读 和 上 机 号 习 时 主要 以 光盘 浙 代 友 为 准 
| 本 章 内 容 仅 简单 介绍 网 站 设计 的 精 体 ,以 及 部 分 技术 要 点 , 所 显示 的 代码 仅 是 局 部 文件 和 


EA 上 


I Mm 


| 第 1 步 ， 附 加 MySQL 数据 库 。 在 本 书 源 代码 目录 中 ， 将 本 章 实例 子 目录 下 database 文件 夹 中 的 
| 由 forum 文件 夹 复 制 到 MySQL 配置 文件 myini 中 定义 的 数据 库存 储 目录 中 ， 具 体位 置 应 根据 读者 
在 安装 MySQL 的 设置 而 定 ， 默 认 路 径 如 下 : 

#Path to the database root 

datadir="C:/ProgramData/MySQL/MySQL Server 5.7/Data/" 

第 2 步 , 将 程序 发 布 到 PHP 服务 器 站 点 根 目录 下 。 具 体位 置 应 根据 读者 在 安装 Apache 的 设置 而 
定 ， 即 在 httpd 配置 文件 中 定义 的 站 点 文档 位 置 。 

# 

# DocumentRoot: The directory out of which you will serve your 

# documents. By default, all requests are taken from this directory, but 

# symbolic links and aliases may be used to point to other locations. 

# 

DocumentRoot "D:/www" 


# 
# This should be changed to whatever you set DocumentRoot to. 
# 
| <Directory "D:/www"> 
| AllowOverride None 
| Order allow.deny 
Allow from all 

</Directory> 
| 第 3 步 , 打开 正 浏 览 器 , 在 地 址 栏 中 输入 “http://127.0.0.1/index.php” 或 者 “http://localhost/index.php”， 
| 即 可 预览 本 站 效果 。 后 台 管 理 需要 访问 http://127.0.0.1/admin/index.php。 
| 


忘 提示 : 在 地 址 栏 中 输入 的 127.0.0.1 的 默认 端口 号 为 80， 在 安装 Apache 服务 器 时 如 果 端 口号 采 
用 不 是 默认 设置 ， 而 是 用 户 自 定义 的 (如 8080) ， 那 么 需要 在 地 址 栏 中 输入 “127.0.0.1: 
8080”， 即 可 正确 运行 程序 。 


本 程序 提供 了 两 个 系统 模块 ， 一 个 为 前 台 会 员 交 流 模块 ， 另 一 个 是 后 台 管理 员 管 理 模块 。 
前 台 主 界面 如 图 23.8 所 示 。 首 先 单 击 【 注 册 】 按 钮 ， 注 册 用 户 名 和 密码 ， 然 后 进行 登录 ， 
即 可 发 表 帖子 、 回 复 帖子 、 加 好 友 、 给 好 友 发 送 短信 等 操作 。 

所 有 注册 的 用 户 都 是 会 员 , 会 员 可 以 发 表 及 回复 帖子 ， 并 可 修改 及 删除 自己 的 帖子 。 本 论坛 只 有 
一 个 版 主 ( 用 户 名 admin， 密 码 atmin)， 版 主 可 以 对 论坛 中 所 有 的 帖子 进行 删除 。 一 个 管理 员 (用 户 
名 admin， 密 码 atmin)， 管 理 员 具有 所 有 权限 。 读 者 可 以 在 后 台 修改 用 户 权限 。 

回 ”版 主 登录 处 和 会 员 登 录 一 样 。 管 理 员 登 录 需 要 在 前 台 首页 地 址 后 加 admin (http://127.0.0.1/ 
| admin/) ， 即 可 进入 后 台 登 录 页 面 ， 如 图 23.9 所 示 。 输 入 管理 员 用 户 名 、 密 码 及 验证 码 ， 

| 单 击 【登录 】 按 钮 ， 进 入 后 台 主页 面 。 
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23.9 ”后 台 主 页 面 


23.3 难点 详解 


在 论坛 模块 的 开发 过 程 中 ， 用户 应 该 掌握 关键 技术 ， 只 有 这 样 才能 够 完成 本 论坛 的 开发 。 下 面 就 
对 论坛 中 用 到 的 关键 技术 进行 详细 介绍 。 


"Tae 





ee 


| 23.3.1 主题 导航 
| 
| 通过 树 状 导航 菜单 能 够 对 网 站 中 的 内 容 进行 合理 的 分 类 处 理 , 进而 使 网 站 的 布局 更 加 合理 。 这 里 
| 将 树 状 导航 菜单 的 技术 应 用 到 论坛 中 帖子 类 别 的 处 理 中, 改变 了 以 往 那 种 以 整 页 篇 幅 输出 帖子 类 别 的 


ed 设计 思路 ， 使 论坛 中 帖子 类 别 的 输出 更 加 合理 、 规 范 。 运 行 结 果 如 图 23.10 所 示 。 





| € ET :ace -上 
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卉 罕 5| 党 


【加 而 】 在 FE 中， 如何 深 制 上 传 文 半 9S 大 小 了 
【置顶 Pe 分页 方法 9 
村 于 6 地 
@ mesrrs 有 HH 不 同 之 未? 2010-08-19 20:91:31 
EL 2010-08-08 08:35:33 
EY 0106-08-08 09:35:20 
S01-08-08 00:35:09 


16-00-08 的 :让 本 

016-08-08 09-34:43 

80-0 09:34:31 

2016-08-03 08232:00 

ole-es-ol 19:45: 和 9 

力主 rr 中 , 如同 控制 上 传 文件 的 大 小 2010-09-01 18:49:28 
册子 坟 让: 订 条 Hi: 12 


本 A 访客 16019 入 。 
HS Der-Toas@2011-2016 


23.10” 树 形 结构 显示 帖子 类 别 


| 树 状 导航 菜单 的 设计 原理 :首先 ， 从 数据 库 中 读 取 论坛 中 所 属 专区 的 数据 进行 输出 。 然 后 ， 通 过 
| JavaScript 脚本 语句 控制 单元 格 中 内 容 的 隐藏 和 显示 。 最 后 ， 根 据 所 属 的 专区 读 取 对 应 帖子 类 别 的 数 
| 据 。 其 关键 就 是 单元 格 属性 的 设置 和 JavaScript 脚本 语句 的 应 用 。 
| 【操作 步骤 】 
第 1 步 ， 从 数据 库 的 专区 表 中 读 取 论坛 中 所 属 专区 的 数据 。 代 码 如 下 (left.php): 
<?php 
$query=mysql_query("select * from tb_forum big_type"): 
while($Smyrow=mysql fetch array(Squery){ 
sy Sn Re ee * from tb forum small type where tb_big type_content='$myrow[tb big 


第 2 步 ， 创 建 表格 ， 输 出 所 属 专区 的 数据 ， 应 用 onClick 事件 调用 JavaScript 语句 open_closeO 控 制 
| 单元 格 中 内 容 的 隐藏 和 显示 ， 其 中 还 为 单元 格 中 的 内 容 设置 了 超 链 接 ， 链 接 到 指定 的 文件 。 代 码 如 下 : 


| <td width="84%" height="24" background="images/index_5.jpg" onClick="javascript:open_close(id_a<?php echo 
| Smyrow['tb_big type id]:?>)”>&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:<a href="content.php?content=<?php echo $myrow 
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学 
['tb_big type_content]:?>&&content 1=<?php echo $myrows['tb small type_content]:?>" target="contentFrame"> 
<?php echo $myrow['tb_big_type_content"]:?></a></td> 


第 3 步 ， 创 建 表格 ， 设 置 表格 人 D 的 值 和 style 的 值 。 以 帖子 的 所 属 专区 为 查询 条 件 ， 从 类 别 数据 | 
表 中 读 取 符合 条 件 的 数据 ,将 读 取 到 的 数据 循环 输出 到 单元 格 中 。 同 样 也 为 单元 格 中 的 内 容 设置 了 超 | 





链接 ， 链 接 到 指定 的 文件 。 代 码 如 下 : 


<table width="170" border="0" cellpadding="0" cellspacing="0" bgcolor="#8394BF" id="id_a<?php echo $myrow ， 


[tb_big type id]:?>" style="display:none"> 
<?php 
$query_1=mysql query("select * from tb forum small type where tb big type_content='$myrow[tb_ 
big_type_content]' "); 


while(S$myrow_l=mysql fetch array($query 1)){ 
> 
<tr> 

<td align="right">&nbsp:</td> 

<td height="23">&nbsp:&nbsp: 

<a href="content.php?content=<?php echo $myrow['tb big type content]:?>&&content 1=<?php 
echo $myrow 1['tb small type content']:?>" target="contentFrame"> 
<?php echo $myrow 1['tb small type content']:?></a></td> 

</t> 


<?php }2> 
<tr><td height="2" colspan="2" align="right"></td></tr> 
</table> 
其 中 调用 JavaScript 脚本 的 代码 如 下 : 
‘<script language="javascript"> 
function open close(x){ 
iftx.style.display—""){ 
x.style.display="none": 
}else 这 x.style.display 一 "none"){ 
x.style.display=""; 
} 
} 
</script> 
主要 功能 是 实现 单元 格 的 隐藏 和 显示 。 即 当 单元 格 处 于 显示 状态 时 ， 单 击 单元 格 则 执行 隐藏 的 操 
作 。 当 单元 格 处 于 隐藏 状态 时 ， 单 击 单元 格 则 执行 显示 的 操作 。 
在 第 2 步 的 程序 代码 中 ，content.php 为 指定 链接 的 文件 ， 其 中 栏目 标识 content 为 帖子 的 所 属 专 
区 , 而 标识 content_1 则 是 帖子 的 类 别 , 通过 超 链接 的 target 属性 指定 链接 文件 的 名 称 为 contentFrame。 
到 此 树 状 导航 菜单 技术 介绍 完毕 。 有 关 树 状 导航 菜单 的 具体 应 用 可 以 参考 leftphp 文件 。 


23.3.2 置顶 帖子 


帖子 置顶 就 是 将 指定 的 帖子 在 网 页 的 最 上 方 显示 , 用 于 突出 帖子 的 特殊 性 。 只 有 管理 员 拥 有 帖子 
置顶 的 权限 ， 其 他 任何 人 都 不 具备 这 个 权限 。 帖 子 置顶 操作 过 程 如 图 23.11 所 示 。 

帖子 置顶 的 操作 原理 :根据 帖子 的 ID 设置 一 个 超 链 接 ， 在 链接 的 permute_send.php 文件 中 实现 
帖子 置顶 的 操作 。 
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pupacalhos per mute send phpTpermute d=03 
图 23.11 置顶 帖子 
【操作 步骤 】 

第 1 步 ， 在 send_forum_ contentphp 文件 中 ， 创 建 一 个 【置顶 】 超 链接 ， 链 接 的 标识 为 对 应 帖子 
的 ID， 链接 到 文件 permute send.php 中 ， 在 该 文件 中 实现 帖子 置 项 的 操作 (send_forum_ content php )。 

<a href="permute_send.php?permute id=<?php echo $myrow_3[tb_send id]:?>"> 置 顶 </a> 
| 第 2 步 ， 创 建 permute_send.php 文件 ， 实 现 帖子 置顶 的 操作 。 首 先 ， 判 断 当 前 的 用 户 是 否 是 管理 
， 员 ， 这 里 用 户 权限 的 设置 是 通过 用 户 信息 表 (tb_forum_user) 中 tb_forum_type 字段 的 值 来 控制 的 ， 
| 如果 也 _forum_type 的 值 是 1， 则 代表 注册 的 会 员 ， 如 果 值 是 2 则 代表 是 管理 员 。 
| 如 果 当 前 用 户 是 管理 员 ， 将 指定 帖子 的 tb_send_type 字段 的 值 更 新 为 1。 否则 不 执行 更 新 数据 的 
| 操作， 并 且 弹 出 提示 信息 “您 不 具备 该 权限 !1”， 返 回 到 上 一 页 。 代 码 如 下 (permute_send .php): 
| <?php session start0: include("conn/conn.php"): 


| $query=mysql query("select * from tb forum user where tb forum user-'$ SESSION[tb forum user]' and tb 
| forum type=' 2 ): 
! 这 mysql num rows($query)>0){ 

$query=mysql query("update tb_forum send set tb_send_type='1 where tb_send id-'$_ GET[permnute id]"): 

这 $query 一 tmue){ 

echo "<script> alert( 帖 子 置 顶 成 功 !): history.back0:</script>": 

Jelse{ 

echo "<script> alert( 帖 子 置顶 失败 0): history.back0:</script>": 


} 
Jelse{ 
echo "<script> alert(' 您 不 具备 该 权限 !"): history.back0:</script>": 
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| 
帖子 置顶 技术 讲解 完毕 ， 有 关 该 技术 的 完整 应 用 可 以 参考 论坛 模块 中 的 程序 。 | 
| 
23.3.3 引用 帖子 


帖子 引用 是 指 在 浏览 帖子 时 ， 针 对 某 个 回复 的 帖子 或 者 自己 的 看 法 与 楼 上 的 看 法 相同 ， 此 时 就 可 | 
以 单 击 引用 超 链 接 ， 直 接 将 楼 上 回复 的 帖子 进行 引用 ， 作 为 自己 的 回复 帖子 进行 提交 。 帖 子 引 用 的 操 
作 流 程 如 图 23.12 所 示 。 
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当前 论坛 上 总 共有 25314 人 在 线 , 其 中 注册 用 户 9337 人 ， 访 容 16019 人 。 
Cntr 情人 


all rights reserved 








23.12 ”引用 帖子 


帖子 引用 的 实现 原理 : 首先 , 在 帖子 浏览 的 页 面 中 针对 每 个 回复 的 帖子 设置 一 个 【引用 】 超 链接 ， 
这 里 将 其 链接 到 本 页 send_forum_content.php 文件 中 ， 设 置 链接 标识 cite 为 回复 帖子 的 ID， 添 加 锚 点 
bottom。 然 后 ， 在 指定 输出 回帖 内 容 的 表格 中 添加 一 个 命名 锚 记 ， 实 现 同一 页 面 的 引用 跳 转 ， 最 后 ， 
在 输出 引用 内 容 的 文本 域 中 ， 根 据 超 链 接 中 传递 的 栏目 标识 ， 从 数据 库 中 读 取 到 指定 的 回帖 数据 ,将 | 
引用 的 内 容 进行 输出 。 

【操作 步骤 】 

第 1 步 , 创建 引用 的 超 链接 , 并 且 设置 链接 的 栏目 标识 cite 和 锚 点 bottom。 代码 如 下 (Csend_ form_ | 
content.php ): | 

<a href="send forum contentphp?send big type=<?php echo $ GET[send big type]:?>&&send small type= | 
<2php echo $ GET[send small type]:?>&&send id=<?php echo $ GET[send id]:?>&&cite=<?php echo $myrow | 
4[tb_restore_id]:?>#bottom"> 引 用 </a> | 

第 2 步 ， 在 指定 的 位 置 设 置 一 个 命名 锚 记 。 实 现 同 一 页 面 的 跳 转 。 代 码 如 下 : 

<a name="bottom" id=" bottom"></a> 

第 3 步 ， 在 要 输出 引用 内 容 的 文本 域 中 进行 编辑 ， 根 据 超 链接 栏目 标识 cite 的 值 ， 从 数据 库 中 读 
取 到 对 应 的 回复 帖子 的 标题 和 内 容 ， 并 且 将 读 取 的 数据 输出 到 文本 域 中 。 代 码 如 下 : 
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<?php 
这 $_GETI[cite] 一 true){ 
$query=mysql query("select* from tb forum restore where tb_restore id='$ GET[cite]"); 
g | $result=mysql fetch array($query); 
全 站 | echo "摘自 〈".$result[tb_restore_user]."): ".$result[tb_restore_subject]: 
SA | } 


?> 
Note | <textarea name="file” cols="70" rows="10" id="file” onKeyDown="countstrbyte(this.form.file,this.form.total, 
| this.form.used,this.form.remain):" 
‘onKeyUp="countstrbyte(this.form file,this.form .total.this.form.used,this.form.remain):"><?php 
if($_GET[cite]=—true){ 
Squery=mysql_query("select * from tb_forum restore where tb_restore id='$ GET[cite]"): 


| 到 此 帖子 引用 技术 讲解 完毕 ， 接 着 就 可 以 将 引用 的 内 容 直 接 进行 提交 ， 作 为 自己 的 回复 帖子 ， 有 
| 关 该 技术 的 完整 应 用 可 以 参考 本 模块 中 的 send_forum _content.php 文件 。 


23.3.4 “收藏 帖子 


帖子 收藏 就 是 将 当前 帖子 的 地 址 完整 地 保存 到 指定 位 置 ,为 以 后 访问 该 帖子 提供 方便 。 帖子 收藏 
的 操作 如 图 23.13 所 示 。 
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| 23.13 ”收藏 帖子 
| 帖子 收藏 实现 的 关键 是 如 何 获取 当前 页 面 的 完整 地 址 。 获取 当前 页 面 的 完整 地 址 主要 应 用 的 是 服 
| 务 器 变量 $ -SERVER。 关 键 代码 如 下 (send_forum contentphp ): 
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第 23 章 综合 娄 例 :设计 在 线 论 坛 





好 


<?php session start(): include("conn/conn.php"): include("function.php"): 


Sself-$ SERVER[HTTP REFERER']: /获取 链接 到 当前 页 面 的 前 一 页 面 的 URL 地 址 

S$u=$_ SERVER['HTTP HOST]: /获取 当前 请 求 的 Host 头 信息 的 内 容 

Sr=$_ SERVER[PHP SELF]: /获取 当前 正在 执行 脚本 的 文件 名 | 2 
SF$_SERVER[QUERY STRING'];， /获取 查询 〈query) 的 字符 串 〈URL 中 第 一 个 问号 ? 之 后 的 内 容 ) | 全 
Surl="http://"."$u"."$r"."9"."$l"; // 将 获取 的 变量 组 成 一 个 字符 串 ， 即 完整 的 路 径 | 一 一 
> 





在 获取 到 完整 的 地 址 之 后 ， 接 下 来 将 帖子 的 标题 、 当 前 页 面 的 完整 路 径 和 当前 用 户 数据 提交 到 | 
my_couection.php 页 中 ， 生 成 一 个 表单 ， 最 后 将 数据 提交 到 my_coflection_ok.php 文件 中 ， 完 成 帖子 | 
的 收藏 。 提 交 帖 子 完整 地 址 和 帖子 标题 的 程序 代码 如 下 : | 

Iphp i SESSIONID form GUO 人 冯 | 
<form name="form!1" method="post" action="my collection.php?forum subject=<?php echo | 
Smyrow_3[tb_send subject]:?>&é&collection user=<?php echo $_SESSION[tb forum user]:?>"> 

<td width="173" height="22" align="center" valign="bottom"> 

<input type="hidden" name="my_collection" value="<?php echo $url:?>"> | 

<input type="submit" name="Submit" value=" 添 加 到 我 的 收藏 夹 "> | 

<td> 
</form> 
<?php } 2> 

创建 my_collection.php 文件 ， 生 成 一 个 表单 ， 为 收藏 的 帖子 添加 标签 和 说 明 ， 最 后 将 数据 提交 到 
my_colleetion_ok.php 文件 中 ， 将 帖子 收藏 的 数据 添加 到 指定 的 数据 表 中 。 到 此 帖子 收藏 技术 讲解 完 
毕 ， 相 关 的 程序 代码 请 参考 本 书 源 代码 中 的 内 容 ， 这 里 不 再 效 述 。 


23.3.5 屏蔽 回帖 


屏蔽 回帖 是 管理 员 的 权限 ， 在 论坛 的 后 台 管理 中 进行 操作 。 回复 是 否 被 屏蔽 是 根据 回复 帖子 数据 
表 中 tb_restore_tag 字段 的 值 来 判断 的 ， 如 果 帖 子 tb_restore tag 字段 的 值 为 1， 则 说 明 该 帖子 被 屏蔽 ; 
否则 帖子 没有 被 屏蔽 。 因 此 屏蔽 回帖 就 是 将 指定 帖子 的 tb_restore_tag 字段 的 值 更 新 为 1。 
屏蔽 回帖 主要 通过 两 个 文件 来 完成 ， 一 个 是 message_restore.php， 输 出 回复 帖子 的 内 容 ， 创 建 执 
行 屏蔽 帖子 的 form 表单 。 另 一 个 是 message_store.php， 根 据 提交 的 数据 ， 实 现 屏蔽 帖子 的 操作 。 关 
键 代码 如 下 (admin/message_restore_ok.php): 
<?php session_startO: include("conn/conn.php"): 
这 SSubmit 一 "屏蔽 "7){ 
while(list($name.$value)=each($_ POST)){ 
Sresult=mysql_query("update tb forum restore set tb_restore_tag="1' where tb_restore id=".$name."™"); 
if($result—tme){ 
echo "<script>alert( 屏 蔽 成 功 !): windowlocation href='index.php?title= 回 帖 管理 :</script>":}} 





} 
if$Submit2 一 "取消 "){ 
while(list($name. $value)=each($ POST)){ 
$result=mysql query("update tb forum restore set tb restore tag='0' where tb restore id= 


"$name.™"); 
if($result—tre){ 
echo "<script>alert( 取 消 屏蔽 0: windowlocation href-'index php?title= 回 帖 管理 :</script>":}} 


号 
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23.3.6 ”短信 提醒 
短信 提醒 的 无 刷新 输出 主要 应 用 的 是 Ajax 技术 。 通过 Ajax 技术 调用 指定 的 文件 查询 是 否 存 在 新 


| 的 消息 ， 并 且 将 结果 返回 ， 通 过 span 输出 Ajax 中 返回 的 查询 结果 。 运 行 结果 如 图 23.14 所 示 。 





《4 下 
(itatr 


—newsmth.ner 
用 户 昵称 ; ad=in 个 人 信息 今天 是 : 2016-09-12 我 参与 的 帖子 ”我 69 咎 子 ”我 89kk 茂 ”我 的 好 友 到 只 返回 首页 退出 后 各 管理 


美工 设计 
FLASHi 计 最 新 帖子 | [精华 区 | 。 [热点 区 」 。 | 等 回复 
Ei [公告 逢 开 
【; ] test 
】 testl 


2016-08-12 10:51:51 
2016-08-11 21:54:58 
2016-07-14 11:49:31 
2016-07-14 11:45:15 


2016-07-14 11:33:04 


图 23.14 短信 提醒 


<script DE src="js/xmlHttpRequest.js"></script> 
‘<script language="j: 
function et 
url='show_counts.php?sender='"+sender: 
xmlHttp.open("get",url, true); 
xmlHttp. = functionO{ 


Var show counts = document.getElementById("show counts"):; 
if(tet>0){ show counts.innerHTML=tet: show counts.style.display="inline":} 
else{show counts.innerHTML="":show counts.style.display="none":} 


"javascript"> 
setInterval("show_counts(’<?php echo $_SESSION["tb_forum user"]:?>")".1000): 
</script> 


使 用 <div> 标 签 显示 最 新 的 消息 。 
<span id="show_counts"></span> 
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23.4 页 面 开 发 


本 章 案例 网 站 比较 复杂 ， 涉 及 的 文件 众多 ， 受 篇 幅 所 限 ， 不 能 逐一 讲解 每 一 个 文件 的 设计 过 程 ， | 
下 面 就 几 个 主要 页 面 的 开发 过 程 进 行 分 析 。 


23.4.1 发 布 帖子 


发 布 帖子 是 为 登录 的 会 员 提供 一 个 发 布 帖子 的 操作 平台 。 在 该 平台 中 可 以 选择 发 布 帖子 的 类 别 ， 
自 定义 帖子 的 主题 ， 选 择 表情 图 ， 选择 上 传 附件 以 及 通过 文本 编辑 器 对 发 布 帖子 的 内 容 进 行 编辑 。 发 
布 帖子 的 运行 结果 如 图 23.15 所 示 。 
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23.15 发布 帖 子 


发 布 帖 子 主要 由 两 个 文件 构成 ， 一 个 是 发 布 帖 子 内 容 的 填写 文件 send_forum.php; 另 一 个 是 提交 
数据 的 处 理 文件 send_forum_ok.php。 

在 send_forum php 文件 中 , 可 以 将 该 文件 中 的 内 容 分 成 3 个 部 分 : 第 1 部 分 初始 化 Session 变量 ，| 
连接 数据 库 以 及 调用 js 文件 。 第 2 部 分 输出 当前 登录 会 员 的 个 人 信息 。 第 3 部 分 构建 fom 表单 ， 实 | 
现 发 布 帖子 数据 的 提交 。 

【操作 步骤 】 

第 1 部 分 ， 初 始 化 Session 变量 ， 连 接 数据 库 以 及 调用 指定 的 包含 文件 ， 并 且 判 断 当前 用 户 是 否 

是 会 员 ， 如 果 不 是 将 不 能 进行 帖子 发 布 操作 (send_forum.php)。 
<?php session startO: include("conn/conn.php"): 
if($_SESSION[tb formm user]—tme){ 
> 
‘<script type="text/javascript" src="js/editor.js"></script> 


“805 


第 2 部 分 ， 从 数据 库 中 读 取 出 当前 会 员 的 个 人 信息 ， 并 且 进 行 输出 。 代 码 如 下 : 


| 
| <?php $query_ l=mysql query("select * from tb forum user where tb forum user='$ SESSION[tb forum 
| user]",$conn); 

| Smyrow_l=mysql_fetch array($query_1): 

echo "<img src='$myrow_1[tb_forum picture]>"; 

echo "当前 用 户 :"; 

echo $myrow_1[tb_forum user]; 

| echo "注册 时 间 :"; 

echo $myrow_1[tb_ forum date]; 

echo "积分 :"; 

echo $myrow_1[tb forum grade]; 

?> 
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第 3 部 分 ， 创 建 form 表单 ， 提 交 发 布 帖子 的 数据 ， 包 括 帖子 的 类 别 、 主 题 、 表 情 图 、 文 本 内 容 
和 发 布 人 。 在 对 帖子 内 容 进 行 填写 时 ， 应 用 的 是 一 个 文本 编辑 器 ， 通 过 文本 编辑 器 可 以 对 提交 的 内 容 
进行 编辑 。 关 键 代码 如 下 : 
<td align="right" class="STYLE11"> 帖 子 主题 ，</td> 
<td><input name="send subject" type="text" id="send subject" size="60"></td> 


</t> 

<tr> 
| <td align="right" class="STYLE11"> 表 情 图 : </td> 
| <td><table> 
| <tr> 
| <td height="80" colspan="2"><div align="center"> 
| <table height="30" border="0" align="center" cellpadding="0" cellspacing="0"> 
| <t> 
| <?php 
| for($i=1:$i<=24;$i++){ /根据 文件 夹 中 表情 图 的 个 数 创建 循环 语句 
| if($i%6—0){ // 判 断 变量 的 值 是 否 等 于 0 
! > 

<td width="40" height="30"><div align="center"> 

| <!-- 输 出 表情 图 -> 
| <img src=<?php echo("images/inchoative/face".($i-1).".gif"'):?> width="20" height= 
| "20"></div></td> 
| <td width="40" height="30"><div align="center"> 
| <!-- 创 建 单 选 按钮 --> 
| <input type="radio" name="face" value="<?php echo("images/inchoative/face".($i-1). 
| gp 
| </div></td> 
| </t> 
| <Iphp Jelse{ ?> 
| <td width="40" height="30"><div align="center"> 
| <img src=<?php echo("images/inchoative/face".($i-1).".gif'"):?> width="20" height= 
| "20"></div></td> 


<td width="40" height="30"><div align="center"> 
<input type="radio" name="face" value="<?php echo("images/inchoative/face".($i-1). 
".gif"):?>" <?php 这 $i 一 1) { echo "checked":}?>> 
| Adiv></td> 
| php 1 
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</table> 
</div></td> 
</t> 
</table></td> 
<tr> 
<td width="107" align="right" class="STYLE11"> 文 章 内 容 : </td> 
<td width="569"> 
<textarea name="menu" cols="1" TOWs="1" id="menu" style="position:absolute:left:0:visibility:hidden:"></textarea> 
<script type="text/javascript"> 
var editor = new FtEditor("editor"): 
editorhiddenName = "menu"; 
editor.editorWidth = "100%"; 
editor.editorHeight = "300px"; 
editor.showO; 
</script> 
<input type="hidden" name="tb_forum_ user" value="<?php echo $_SESSION[tb forum_ user]:?>"></td></tr> 
有 关 send_forum.php 文件 的 讲解 到 此 结束 , 完整 代码 请 参考 本 书 源 代码 中 的 内 容 。 下 面 介绍 表单 
处 理 页 send_forum_ok.php 文件 。 在 该 文件 中 将 表单 中 提交 的 数据 存储 到 数据 库 中 ， 完 成 发 布 帖子 信 | 
息 的 存储 。 程 序 代码 如 下 (send_forum ok.php): 
<?php session_start|: include_once("conn/conn .php"): 





S$tb_send_type=0; // 设 置 帖子 是 否 置顶 
S$tb_send_types=0; // 判 断 帖子 是 否 有 回复 
S$tb_send_small type=$_ POST[send sort]: // 获 取 表 单 中 提交 的 数据 
S$tb_send_subject=$_POST[send_subject]: // 获 取 表 单 中 提交 的 数据 
Stb_send_picture=$ POST[face]: // 获 取 表 单 中 提交 的 数据 


S$tb_send_content=trim($_POST["menu"]); /获取 表单 中 提交 的 数据 

S$tb send user=$ POST[tb forum user]: 

S$tb send date=date("Y-m-j H:i:s"); 

if($_FILES[send accessories][size]=—0){ // 判 断 是 否 有 附件 上 传 

Sresult=mysql query("insert into tb forum send(tb send subject.tb send content.tb send usertb send datetb | 
send picture.tb send type.tb send types.tb send small type) values (".$tb send subject.™,".$tb send content.™,".$tb | 
Send user.",".$tb send date.",".$tb send picture.",".$tb send type.",".$tb send types.",".$tb send small type.")” | 


:$conn): | 
echo mysql errorO; | 
if($result) { | 
Inysql_query("update tb forum user set tb forum grade=tb forum grade+5".$conn): | 
echo "<script>alert( 新 帖 发 表 成 功 !"):history:backO:</script>"; | 
mysql_close($conn): | 
Jelse{ | 
echo "<script>alert( 新 帖 发 表 失败 !"):history.back0:</script>" | 

mysql_close($conn): 

} 


这 $_FILES[send_accessories][size] > 20000000){ 。“// 判 断 上 传 附件 是 否 超过 指定 的 大 小 
echo "<script>alert( 上 传 文件 超过 指定 大 小 ! "):history.go(-1):</script>"; 


$path ="./file/'.time().$_FILES['send_accessories']['name']: // 定 义 上 传 文件 的 路 径 和 名 称 
if (move_uploaded file($ FILES['send_accessories'][tmp_name'].$path)) { /将 附件 存储 到 服务 器 
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| iftmysql_query("insert into tb forum send(tb send subject.tb send content.tb send usertb send datetb 
| send picture.tb_send type.tb_send types,tb_send small type.tb_send _ accessories) Values (".$tb_send_ subject.™,".$tb_ 
| send_content.™,".$tb_send user.".".$tb_send date.™,".$tb_send picture.™.".$tb_send type.™.".$tb_send types.",".$tb_ 
,| send small type.",”".$path.")",Sconn){ 

| Imysql_ query("update tb forum user set tb forum grade=tb forum grade+5".$conn): 
= 一 echo "<script>alert( 新 帖 发 表 成 功 !):history backO:</script>": 


0 


| echo "<script>alert( 新 帖 发 表 失败 !"):history.back0:</script>"; 
| Inysql close($conn): 


| 
| 国 鸭 
! ca 


至 此 帖子 发 布 功能 的 实现 过 程 介绍 完毕 ， 完 整 代码 可 以 参考 本 书 源 代码 中 的 内 容 。 
23.4.2 浏览 帖子 


| 浏览 帖子 包括 帖子 类 别 和 帖子 内 容 的 浏览 。 首 先 可 以 浏览 到 根据 不 同类 别 进行 划分 的 帖子 主题 ， 
| 然后 可 以 在 相应 的 帖子 主题 中 浏览 到 具体 帖子 的 内 容 。 帖 子 主题 和 帖子 内 容 浏 览 的 运行 结果 如 图 23.16 
所 示 。 
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浏览 内 容 
图 23.16 浏览 帖子 ( 续 ) 


浏览 帖子 是 从 帖子 类 别 的 输出 开始 的 , 首先 在 网 站 的 左 侧 框 架 中 应 用 树 状 导航 菜单 输出 帖子 的 类 
别 ， 根 据 树 状 导航 菜单 中 输出 帖子 的 类 别 ， 设 置 超 链接 ， 将 指定 类 别 的 帖子 在 右 侧 的 框架 中 输出 ， 即 
在 content.php 文件 中 输出 帖子 的 内 容 。 关 键 代码 如 下 (left.php): 

<td width="84%" height="24" background="images/index_5.jpe" onClick="javascript:open_close(id_a<?php echo 
Smyrow['tb_big_type id']:?>)" >&nbsp:é&nbsp:&nbsp:é&nbsp:&nbsp:<a href="content.php?content=<?php echo Smyrow 
[tb_ big type_content]:?>&&content_1=<?php echo $myrows['tb_small type_content]:?>" target="contentFrame"> 
<?php echo $myrow['tb_big_type_content]:?></a></td> 

这 里 的 content.php 文件 是 在 右 侧 的 框架 中 输出 的 内 容 , 超 链接 中 的 target 属性 获取 的 是 右 侧 框架 
中 的 链接 文件 的 名 称 ,设置 栏目 标识 变量 content， 代 表 帖 子 的 所 属 专区 ，content_1 代表 帖子 的 类 别 。 

<tdheight="23">&nbsp:&nbsp: 

<a href="content.php?content=<?php echo $myrow['tb big type content]:?>&&content 1=<?php echo 

$myrow 1['tb small type content]:?>" target="contentFrame"> 

<2php echo $myrow_1['tb_small_ type_content]:?></a></td> 

然后 ， 在 contentphp 文件 中 输出 对 应 类 别 帖子 的 内 容 。 其 中 应 用 switch 语句 ， 根 据 获取 的 栏目 
标识 变量 gclass 的 不 同 值 ， 分 别 调用 不 同 的 文件 ， 输 出 不 同类 别 中 帖子 的 内 容 。contentphp 文件 的 关 
键 代码 如 下 : 

【操作 步骤 】 

第 1 步 ， 判 断 论坛 的 所 属 专区 和 类 别 是 否 为 空 ， 如 果 为 空 则 输出 默认 的 内 容 ， 否 则 将 输出 对 应 专 

区 和 类 别 中 帖子 的 内 容 〈contentphp )。 
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a 


<?php 这 $ GET[contentj—"" and$ GET[content 1|—""){ ?> 
<table> 
<t> 
<td height="10">&nbsp:;</td> 
</t> 


| 
| 
| <t> 
Note | <td><?php include_once("bccd php"):?></td> 
| 
| 
| 
| 
| 
| 
| 
| 
| 
上 
上 
上 
上 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 





</tr> 
</table> 


<?php }else{?> 
第 2 步 ， 创 建 一 个 搜索 引擎 的 表单 ， 为 不 同 的 类 别 和 专区 设置 超 链接 ， 设 置 超 链接 的 栏目 标识 变 
| 量 。 关 键 代码 如 下 : 


| <form name="formm1l” method="post” action="content.php?class= 搜 索 引擎 &&content=<?php echo $_ GET 
| [content]:?>>&&content 1=<?php echo $ GET[content 1]:?>" onSubmit="retum check_submitO:"> 
| <t> 
| <td width="10%" height="40"” rowspan="2”valign="middle"><a hre 全 "contentphp?class= 最 新 帖子 
| &&content=<?php echo $ GET[content]:?>&é&content 1=<?php echo $ GET[content 1];?>"><img src="images/ 
| index_ 7 (1).jpg" width="65" height="23" border="0"></a></td> 
| <td width="10%" rowspan="2" valign="middle"><a href="content.php?class= 精 华 区 &&content=<?php 
| echo $ GET[content]:?>&é&content 1=<?php echo $ GET[content 1]:?>"><img src="images/index 7 (2)jpg" width= 
| "55" height="23" border="0"></a></td> 
| <td width="10%" rowspan="2"” valign="middle"><a href="content.php?class= 热 点 区 &&content=<?php 
| echo $_ GET[content];?>&&content 1=<?php echo $ GET[content 1]:?>"><img src="images/index_7 (3).jpg” width= 
| "52" height="23" border="0"></a></td> 
| <td width="10%" rowspan="2" valign="middle"><a href="content.php?class= 待 回复 &&content=<?php 
| echo $_GET[content]:?>&&content 1=<?php echo $ GET[content 1]:?>"><img src="images/index 7 (4)jpg" width= 
| "55" height="23" border="0"></a></td> 
| <td width="25%" height="38" align="right” valign="bottom"><input name="tb send subject content" 
| type="text" size="20" /> 
| &nbsp:&nbsp:</td> 

<td width="25%" rowspan="2"><input type="image" name="imageField" src="images/index 71.jpe" /> 

</td> 
</t> 
</form> 


第 3 步 ， 编 写 switch 语句 ， 根 据 栏目 标识 变量 $class 的 不 同 值 ， 调 用 不 同 的 文件 。 代 码 如 下 : 


<?php 
Switch($_ GET['class]){ 
case "最 新 帖子 ": 
include("new_forum.php"): 
break: 
case "精华 区 ": 
include("distillate.php"): 
break: 
case "热点 区 ": 
include("hotspot.php"): 
break: 
case " 待 回 复 ": 
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Case "” 
include("new_forum.php"); 
break: 
Bb 


?> 


根据 $class 变量 的 不 同 值 调用 不 同 的 文件 ， 在 被 调用 的 这 些 文件 中 ， 读 取 数 据 库 中 数据 的 方法 都 
是 相同 的 ， 都 是 根据 所 属 的 类 别 从 数据 库 中 读 取 出 符合 条 件 的 数据 ， 进 行 分 页 显示 。 





这 里 以 “最 新 帖子 ”中 调用 的 new_forum .php 文件 为 例 ， 对 被 调用 文件 的 创建 方法 进行 讲解 。 在 | 
new_forum.php 文件 中 , 主要 就 是 以 超 链接 栏目 标识 中 传递 的 变量 $_ GET[content] 和 $_GET[content_1] | 


为 条 件 ， 从 数据 库 中 读 取出 符合 条 件 的 数据 。 
【操作 步骤】 


第 1 步 ， 首 先 输出 的 是 所 属 专区 中 公告 和 置顶 帖子 的 标题 信息 ， 并 且 设 置 超 链接 ， 链 接 到 send_ | 
affiche.php 和 send_forum contentphp 文件 ， 在 对 应 的 文件 中 输出 公告 和 置顶 帖子 的 详细 内 容 。 关 键 | 


代码 如 下 (new_forum.php): 


<2php 
$query 1=mysql query("select * from tb forum send Where tb send type='1 and tb send small type=".$ GET 
[content 1].""): 
While($myrow l=mysql fetch array($query 1){ 
?> 
<tr> 
<td width="10%" align="center"><span class="STYLE4">【 置 项 】</span></td> 
<td colspan="4" width="90%"><a href="send forum content.php?send big type=<?php echo $ GET 
[content]:?>&&send small type=<?php echo $myrow 1[tb send small type]:?>&&send id=<?php echo $myrow 
1[tb send id];?>" target=" blank"><?php echo $myrow 1[tb send subject]:?></a></td> 
</> 
<2php }7> 


第 2 步 , 根据 栏目 标识 传递 的 变量 ， 从 数据 库 中 读 取出 对 应 的 专区 和 类 别 中 帖子 的 数据 ， 并 且 定 | 


义 变 量 ， 实 现 数据 的 分 页 显示 ; 在 输出 帖子 的 标题 时 ， 设 置 超 链接 ， 链 接 到 send_fonun_content.php， 
在 该 文件 中 输出 帖子 的 详细 信息 。 关 键 代码 如 下 : 


<2php 

这 $ GET[page]){ 

Spage_size=10; // 定 义 每 页 输出 10 条 数据 

// 按 照 指定 的 类 别 从 数据 库 中 读 取 帖 子 的 数据 

$query="select count(*) as total from tb forum send where tb send small type=".$ GET[content 1]."": 
Sresult=mysql query($query): 

$message count=mysql result($result.0."total"): 

S$page count=ceil($message count/$page size): 

Soffset=($_GET[page]-D)*Spage size: 

/从 数据 库 中 读 取 帖 子 的 数据 ， 按 照 帖子 发 布 的 ID 值 进行 降 宕 排列 输出 
$query_2=mysql_query("select * from tb forum send where tb send small type=".$ GET[content 1]." 

order by tb_send id desc limit $offset $page_ size"): 


“Oe 


| 2 网 ; 设计 与 网 站 建设 从 入 门 到 精通 


站 
te 


while($myrow_2=mysql fetch array($query 2)){ 


ee 


Be width="5%" align="center" bgcolor="#FFFFFF"><img src="<?php echo $myrow_2[tb_send picture]:?>" 


| 必要 


<td width="35%" align="center" bgcolor="#FFFFFF"><a href="send forum content.php?send big type= 
<?php echo $_GET[content]:?>&&send small type=<?php echo $myrow_2[tb_send small type]:?>&&send id=<?php 
echo $myrow_2[tb_send id];?>" target="_blank"><?php echo $myrow_2[tb_send subject]:?></a></td> 
<td width="25%" align="center" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send date]:?></td> 
<td width="25%" align="center" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send user]:?> </td> 
<td width="10%" align="center" bgcolor="#FFFFFF"> 
<?php $query_s=mysql query("select * from tb forum restore where tb_send id='$myrow 2[tb_send id]"): 
echo mysql num rows($query s); 
2><td> 
<t> 
<?php }}> 
上 述 讲解 的 是 帖子 主题 浏览 的 实现 方法 ， 下 面 介绍 帖子 内 容 浏 览 功能 的 实现 。 
帖子 内 容 的 输出 是 通过 上 面 提 到 的 send_forum contentphp 文件 来 完成 的 。 在 该 文件 中 输出 帖子 
的 详细 内 容 、 发 帖 人 的 信息 、 回 复 帖子 的 内 容 和 回复 人 的 信息 ， 并 且 还 对 登录 用 户 进行 了 权限 设置 。 


| 普通 用 户 只 能 浏览 帖子 的 详细 信息 ， 不 能 进行 其 他 任何 操作 。 


会 员 登 录 ， 不 但 可 以 浏览 帖子 的 详细 信息 ， 而 且 可 以 对 帖子 进行 回复 和 引用 ， 收 藏 帖子 、 发 送 短 
信和 以及 加 对 方 为 好 友 ; 如 果 浏 览 的 是 当前 会 员 自己 发 布 或 者 回复 的 帖子 ， 还 可 以 对 帖子 进行 修改 、 删 
除 和 结 帖 的 操作 。 

管理 员 登 录 ， 可 以 执行 上 述 会 员 具 有 的 所 有 操作 ， 并 且 还 可 以 对 帖子 进行 置顶 的 操作 ， 这 是 会 员 
所 不 具备 的 。 

下 面 对 send_forum_content php 文件 进行 分 步 讲解 ， 看 看 各 个 部 分 的 功能 都 是 如 何 实现 的 。 

【操作 步 又】 

第 1 步 ， 初 始 化 Session 变量 ， 连 接 数 据 库 ， 通 过 include 语句 调用 包含 文件 ， 通 过 $_SERVER 预 
定义 变量 获取 当前 页 面 的 完整 连接 地 址 , 用 于 实现 帖子 收藏 的 功能 ， 有关 帖子 收藏 技术 的 讲解 请 参考 
23.3.4 节 中 的 内 容 。 

第 2 步 ， 输 出 发 帖 人 的 信息 和 发 布 的 帖子 信息 ， 并 且 为 发 送 短信 、 加 为 好 友 、 结 帖 、 置 项、 修改 、 
删除 和 回复 的 操作 设置 超 链 接 。 

主要 代码 如 下 (send_forum _content.php): 


<!-- 从 数据 库 中 读 取出 指定 帖子 的 发 布 人 的 信息 --> 

<?php 

$query_1=mysql query("select* from tb _ forum send where tb_send id=-'$ GET[send id]",$conn): 
Smyrow_l=mysql fetch array($query_1); 

$query_2=mysql_query("select * from tb_forum user Where tb forum user='$myrow_1[tb_send_ user]",$conn):; 
Smyrow_2=mysql fetch array($query_2); 

echo "<img src='$myrow_2[tb_forum picture]>"."<br>"; 

echo "发 帖 人 :"; 

echo $myrow 2[tb forum user]."<br>": 

echo "注册 时 间 :"."<br>"; 

echo $myrow 2[tb forum date]."<br>": 

echo "积分 :"; 

echo $myrow_2[tb_forum grade]."<br>": 


-> 
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这 $ SESSION[tb forum user]—true){ 

echo "<a hre 人 send_ mail php?receiving person=$myrow 2[tb forum userl&&sender-$ SESSION[tb forum user] 
target=' blank><img src='images/index_8.jpg’ width="76' height="24' border="0></a>"."<br>"; | 

echo "<a href='my friend.php?friend=$myrow_2[tb form user]&&my=$ SESSION[tb forum user]' target blank> | 
<img src=images/index 8 (])jpg width="82' height="24' border="0></a>"; ! 

} 

?></span></td> 

<td width="780" height="20%" bgcolor="#FFFFFF"><?php echo $myrow_3[tb_send_date]; ?> 楼 主 

<?php 

if($myrow_1[tb_ forum end]!=1){ 

eg 





| 
<a href="end forum .php?send id=<?php echo $ GET[send id]:?>&send user=<?php echo $myrow 3[tb send | 
user]:?>"> 结 贴 </a> ! 


<td height="60%" bgcolor="#FFFFFF"><?php 

echo $myrow 3[tb send content]: 

?> 

<td height="20%" align="right" bgcolor="#FFFFFF"><?php 这 $myrow_3[tb_send accessories] 一 true){echo " 

<a href='download.php?accessories=$myrow_3[tb_send_accessories]> 附 件 </a>":}?>&nbsp:&nbsp:&nbsp:&nbsp; ， 

<a href="permute_send.php?permute_id=<?php echo $myrow_3[tb_send id]:?>"> 置 顶 </a>、 

<a href="recompose_send.php?recompose id=<?php echo $myrow 3[tb_send id];?>&&recompose_ user=<?php 
echo $myrow_3[tb_send_user]:?>"> 修 改 </a>、 

<a href="delete_send.php?delete id=<?php echo $myrow 3[tb_send id]:?>&&delete_send forum=<?php echo 
$myrow_3[tb_send_user]:?>"> 删 除 </a>、 

<a href="send forum content.php?send big type=<?php echo $ GET[send big type];?>&&send small type= 
<?php echo $ GET[send small type]:?>&&send id=<?php echo $ GET[send id]:?>#bottom"> 回 复 </a></td> 


第 3 步 ， 输 出 与 该 帖子 相关 的 回复 帖子 的 信息 ， 以 及 回复 人 的 信息 ， 同 样 也 为 发 送 短信 、 加 为 好 
友 、 引 用 、 修 改 和 删除 操作 设置 了 超 链接 。 其 中 在 输出 回复 帖子 的 内 容 时 ， 还 对 回帖 内 容 进行 | 
判断 该 帖子 是 否 被 管理 员 屏蔽 。 实 现 的 方法 与 第 2 步 相 同 ， 这 里 不 再 歼 述 ， 完 整 代码 请 参考 本 书 源 代 | 
码 中 的 内 容 。 

第 4 步 ， 积 分 排行 ， 该 功能 的 实现 主要 就 是 从 会 员 信息 表 中 读 取 会 员 的 积分 数据 ， 并 且 按 照 降 早 
排列 ， 输 出 积分 最 高 的 前 10 名 用 户 。 程 序 代码 如 下 : 

<?php 

$sql=mysql_query("select tb_forum usertb forum grade from tb forum user order by tb forum grade desc limit 10"); 

ee fetch array($sqD){ 












<tr> 
<td width="45%" height="19" align="right"> 
<a href="person data.php?person id=<?php echo $myrow[tb forum user]:?>"><?php echo $myrow[tb forum 
User]:?></a> 
&nbsp:</td> 
<td width="55%" align="left">——<?php echo $myrow[tb forum grade]:?></td> 
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第 5 步 ，send_forum_ contentphp 文件 的 第 5 部 分 是 一 个 form 表单 ， 用 于 提交 回复 帖子 的 信息 。 
“23.4.3 回复 帖子 
Note 回复 帖子 实现 对 指定 的 帖子 进行 回复 的 操作 ， 回 复 帖子 的 运行 结果 如 图 23.17 所 示 。 
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图 23.17 回复 帖子 


回复 帖子 中 提交 的 form 表单 存储 在 23.4.2 节 中 介绍 的 send_forum_contentphp 文件 中 。 在 这 个 
form 表单 中 , 将 回复 主题 、 附 件 、 回复 内 容 、 发 布 帖 子 ID 和 回复 人 信息 都 提交 到 send_forum content_ 
ok.php 文件 中 进行 处 理 ， 完 成 帖子 的 回复 。 

在 对 回复 内 容 进行 编辑 时 还 应 用 了 UBB 技术 ， 实 现 对 回复 的 内 容 进 行 编辑 ， 并 且 还 对 回复 内 容 
的 字 节 数 进行 了 控制 。 

UBB 技术 的 实现 是 通过 UBBCodejs 文件 来 完成 的 , 该 文件 存储 于 根 目录 下 的 js 文件 夹 中 。 限制 
| 和 统计 回复 内 容 字 节 数 的 方法 是 通过 textjs 文 件 来 完成 的 ,该 文件 同样 存储 于 根 目 录 下 的 js 文件 夹 中 。 
| form 表单 的 关键 代码 如 下 (send_forum content.php ): 
<fom action="send_forum content_ok.php" method="post" enctype="multipart/form-data” name= "myform'"> 
<tr><a name="bottom" id="bottom"></a><!-- 定 义 命名 锚 记 --> 
<td width="103" height="30" align="right"> 回 复 主题 ，</td> 
<td width="617"><input name="restore_subject" type="text" id="restore_subject" size="60" value=" 














<?php 
| if($ GET[cite] 一 tme){ 
! $query=mysql query("select * from tb_forum restore where tb_restore id='$ GETI[cite]"): 
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$result-mysql fetch array($query); 
echo "摘自 ("$result[tb_restore_user]."): ".S$result[tb_restore_subject]: 
} 
> 


"><input type= hidden" name="tag" value="<?php echo $myrow_1[tb forum end]:?>" ></td></tr> 











<t> 
<td height="30" align="right"> 附 件 : </td> Note 
<td><input name="restore_accessories" type="file" size="45"></td> 

</> 

<t> 


<td height="30" align="right"> 文 字 编 程 区 : </td> 
<td width="617"><img src="images/UBB/B.gif' width="21" height="20" onClick="bold0">&nbsp: 
<img src="images/UBB/L.gif’ width="21" height="20" onClick="italicize|O">&nbsp:<img src="images/UBB/U.gif’ 
width="21" height="20" onClick="underline|">&nbsp;<img src="images/UBB/img.gif” width="21" height="2 
onClick="img0"> 字体 | 
<select name="font" class="wenbenkuang" id="font" onChange="showfont(this.options[this.selectedIndex]. | 
value)"> | 
<option value=" 宋 体 " selected> 宋 体 </option> | 
<option value=" 黑 体 "> 黑 体 </option> 
<option value=" 隶 书 "> 隶书 </option> 
<option value=" 楷 体 "> 楷 体 </option> 
</select> 
字号 <span class="pt9"> 
<select 
name=size class="wenbenkuang" onChange="showsize(this.options[this.selectedIndex].value)"> 
‘<option value=1>1</option> 
<option value=2>2</option> 
<option 
value=3 selected>3</option> 
<option value=4>4</option> 
<option value="5">5</option> 
‘<option value="6">6</option> 
<option value="7">7</option> 
</select> 
颜色 
‘<select onChange="showcolor(this.options[this.selectedIndex].value)” name="color"” size="1" 
class="wenbenkuang" id="select"> 
<option selected> 默 认 颜 色 </option> 
<option style="color 考 F0000" value="#FF0000"> 红 色 热 情 </option> 
<option style="color:#0000FF" value="#0000fP'> 蓝 色 开 朗 </option> 
<option style="colorf#ft00ff' value="#ft00ff'> 桃 色 浪漫 </option> 
<option style="color:#009900" value="#009900"> 绿 色 青 春 </option> 
<option style="color:#009999" value="#009999"> 青 色 清爽 </option> 
</select> 
</span></td> 
</tr> 
<t> 
<td align="right"> 文 章 内 容 : </td> 
<td width="617"> 
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| <textarea name="file" cols="70" rows="10" id="file" onKeyDown="countstrbyte(this.form .file.this.form.total.this. 
| form.used.this.form remain):" 
| onKeyUp="countstrbyte(this.form file.this.form totalthis.form used.this .form_ remain):"><?php 
|! if($_GET[cite]—true){ 
全 站 | $query=mysql query("select * from tb forum restore where tb_restore id='$ GET[cite]"); 
| Sresult=mysql fetch array($query): 


Note | echo Sresult[tb_restore_content]: 
} 


?></textarea> 
<input type="hidden" name="tb send id" value="<?php echo $ GET[send id]:?>"> 
<input type="hidden" name="tb_restore_user" value="<?php echo $_ SESSION[tb forum user]:?>"></td> 
</t> 
<tr> 
<td height="25" colspan="2">&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
<input name="submit" type="submit" id="submit" value=" 提 交 " onClick="return checkO:"> 
&nbsp:&nbsp:; 最 大 字 节 数 : 
<input type="text" name="total" disabled="disabled" class="textbox" id="total" value="500" size="5"> 
&nbsp:&nbsp: 输 入 : 
<input type="text" name="used" disabled="disabled" class="textbox" id="used" value="0" size="5"> 
字 节 &nbsp:&nbsp: 剩 余 : 
| <input type="text" name="remain" disabled="disabled" class="textbox" id="remain" value="500" size="5"> 字 节 
| &nbsp:&nbsp: 





上 
| <input name="reset" type="reset" id="reset" value=" 重 写 "></td> 
| </t> 

<tr> 

<td height="35" colspan="2">&nbsp: &nbsp:</td> 

| </tr> 
| </form> 
| 到 此 回复 帖子 的 提交 文件 的 内 容 讲解 完毕 ， 接 下 来 介绍 回复 帖子 的 处 理 页 send_forum content_ 
| okphp 文件 。 


在 该 文件 中 实现 对 回复 帖子 中 提交 的 数据 进行 存储 ,并 且 更 新 帖子 的 回复 次 数 ， 以 及 将 发 布 帖子 
数据 表 中 的 tb_send_types 字段 更 新 为 1， 表 明 该 帖子 已 经 有 回帖 。 

在 send_forum_ content_ok.php 文件 中 ， 首 先 获取 到 form 表单 中 提交 的 数据 ， 然 后 判断 回复 的 内 
容 中 是 否 包 含 附件 ， 如 果 不 存在 附件 ， 则 直接 将 获取 的 数据 添加 到 指定 的 数据 表 中 ， 并 且 更 新 帖子 的 
回复 次 数 和 发 布 帖子 数据 表 中 tb_send_types 字段 的 值 为 1。 

如 果 存 在 附件 ， 而 附件 的 大 小 超过 上 传 文件 大 小 的 限制 ， 则 将 给 出 提示 信息 “上 传 文件 超过 指定 
大 小 1”。 

如 果 存 在 附件 ， 并 且 在 指定 的 范围 之 内 ， 则 先 将 该 附件 存储 到 服务 器 中 指定 的 文件 夹 下 ， 然 后 再 
将 附件 在 服务 器 中 的 存储 路 径 和 其 他 数据 一 起 存储 到 指定 的 数据 表 中 , 同样 也 更 新 帖子 的 回复 次 数 和 
发 布 帖子 数据 表 中 tb_send_types 字段 的 值 为 1。 程 序 代码 如 下 〈send_forum_ content_ ok.php ): 


<?php session start0: include once("conn/conn.php"): 

















| ift$_SESSION[tb forum user]—true){ // 判 断 是 否 是 正确 登录 
| S$tb_restore_subject=$_POST[restore_subject]: // 获 取 回复 帖子 的 主题 
| S$tb_restore_content=$_POSTI[file]: // 获 取 上 传 的 附件 

| S$tb_restore_user=$_ POST[tb_restore_user]: /获取 回复 人 

| S$tb_send id=$ POST[tb send id]: // 获 取 要 回复 帖子 的 IJD 
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志 放 


S$tb_restore_date=date("Y-m-d H:i:s"):; // 定 义 回 复 时 间 
这 $_FILES[restore_accessories][size] 一 0){ // 判 断 是 否 有 附件 上 传 
这 mysql query("insert into tb forum restore(tb restore subject,tb_restore_ content.tb restore Usertb send id.tb_ | 


date.")",$conn)){ 
mysql query("update tb forum restore set tb forum counts=tb forum countst+1",$conn): 
mysql_query("update tb forum send set tb_send types=] where tb_send id='$tb_send id",$conn); 
echo "<script>alert(' 回 复 成 功 !"):history.back(:</script>":; 
mysql_close($conn): 
jelse{ 
echo "<script>alert( 回 复 失败 !"):history.back0:</script>"; | 
Inysql_close($conn): | 





入 
if($_FILES[restore_accessories][size] > 20000000){ /判断 上 传 的 附件 是 否 超过 规定 文件 的 大 小 
echo "<script>alert( 上 传 文件 超过 指定 大 小 ! "):history.go(-1);</script>"; 
exitO: | 
Jelse{ | 
$path = '/file/time0.$ FILES[Yestore_accessories][mame']: /定义 上 传 文件 的 名 称 和 存储 的 路 径 | 
if (move uploaded file($_FILES[Yestore_accessories'][tmp_name'].$pathb)) {// 将 附件 存储 到 服务 器 指定 的 文件 | 
天 Ih | 
这 mysql_query("insert into tb forum restore(tb_restore_subject,tb_restore_content.tb_restore_user,tb_send id.tb_ | 
Testore date.tb restore accessories) values (".$tb restore subject.",".$tb restore content.",".$tb restore user.™,".$tb | 
send id.",".$tb_restore_date.",".$path.")",$conn)){ | 
mysql_query("update tb_forum restore set tb_ fomm counts=tb forum counts+1",$conn); 
mysql_query("update tb_forum send set tb_send types=1l where tb_send id='$tb_send id",$conn); 
echo "<script>alert( 回 复 成 功 !):history backO:</script>": 
mysqL_close(Sconn): 
jelse{ 
echo "<script>alert(' 回 复 失败 !):history .backO:</script>": 
mysql close($conn): 
} 
六 
jelsef 
echo "<script>alert( 对 不 起 ， 您 不 可 以 回复 帖子 ， 请 先 登 录 到 本 站 ， 谢 谢 !):history'backO:</script>": 
} 
?> 


至 此 帖子 回复 功能 讲解 完毕 ， 详 细 的 程序 代码 可 以 参看 本 书 源 代 码 中 的 内 容 。 
23.4.4 结 帖 


结 帖 功能 是 对 会 员 自 己 发 布 的 帖子 进行 操作 ， 当 获取 到 满意 的 答案 之 后 ， 就 可 以 对 帖子 进行 结 帖 
操作 ， 一 旦 结 帖 之 后 就 不 可 以 再 对 该 帖 进行 回复 。 其 运行 结果 如 图 23.18 所 示 。 

结 帖 功能 避免 了 在 论坛 中 对 一 个 帖子 无 休止 的 回复 ， 浪 费 系统 资源 ， 同 时 也 确保 了 论坛 中 帖子 的 
规范 性 。 

论坛 的 管理 员 也 具备 这 个 权限 ， 可 以 根据 帖子 的 回复 情况 ， 在 确定 已 经 有 满意 答案 的 情况 下 ， 而 
帖子 发 布 人 又 没有 进行 结 帖 操作 的 ， 可 以 由 管理 员 来 执行 这 项 操作 。 管理 员 的 结 帖 操作 是 在 论坛 后 台 
管理 的 帖子 管理 中 完成 的 。 
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图 23.18 ” 结 帖 激活 


| 
| 帖子 是 否 已 经 结 帖 是 根据 帖子 在 数据 表 中 tb_forum_end 字段 的 值 来 判断 的 , 如 果 字 段 的 值 为 1， 
| 则 说 明 帖 子 已 经 结 帖 ， 否 则 没有 结 帖 。 所 以 结 帖 操 作 就 是 将 指定 帖子 在 数据 表 中 的 tb_forum_end 字 
| 段 的 值 更 新 为 1 。 

在 论坛 模块 中 ， 结 帖 操作 是 通过 在 send_forum fcontent.php 文件 中 设置 的 一 个 “ 结 帖 ”的 超 链接 
来 执行 的 。 通过“ 结 帖 ”这 个 超 链接 ， 链 接 到 send_forum.php 文件 ， 在 这 个 文件 中 根据 传递 的 ID 值 ， 
执行 更 新 指定 帖子 tb_forum_end 字段 值 的 操作 。 
| 在 send_forum_content.php 文件 中 设置 “ 结 帖 ”的 超 链接 ， 其 中 根据 tb_forum_end 字段 的 值 来 判 
| 断 输 出 的 内 容 。 代 码 如 下 (send_forum contentphp ): 





| <aplp 
| 这 $myrow_1[tb_ forum end]!=1){ 
| ?> 

| <a href="end forum.php?send id=<?php echo $_ GET[send id]:?>&send user=<?php echo $myrow_3[tb_send_ 
| user]:?>"> 结 帖 </a> 

<?php 

jelse{ 

echo "已 结 帖 "; 

} 

2 


在 end_forum.php 文件 中 , 执行 结 帖 的 操作 ， 以 $send_id 变量 传递 的 帖子 ID 值 为 依据 , 程序 代码 
如 下 (end_ forum.php): 
<?php session start0: include("conn/conn.php"): 
if($_GET[send id] 一 tme and $_GET[send user]—$_SESSION[tb forum user){ 
$result=mysql_query("update tb_forum send set tb forum end=1 where tb_send id=".$ GET[send id].™"); 
if($result—tre){ 
echo "<script>alert( 结 帖 激活 !"); history backO:</script>": 


} 
}else{ 
echo "<script>alert( 您 不 具备 该 权限 !"): history backO:</script>": 
| } 
| 0 
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23.4.5 ”搜索 帖子 


站 内 搜索 是 指 在 站 内 按照 指定 的 关键 字 , 从 论坛 发 布 的 帖子 和 回复 的 帖子 中 查询 出 符合 条 件 的 数 | 
据 。 站 内 搜索 主要 应 用 的 是 where 条 件 语句 中 的 like 运算 符 ， 通 过 该 运算 符 实现 模糊 查询 的 功能 。 ”| 

在 论坛 模块 中 ， 站 内 搜索 从 content.php 文件 中 设置 的 站 内 搜索 文本 框 开 始 ， 将 要 搜索 的 关键 字 
提交 到 search.php 文件 中 ， 在 该 文件 中 执行 模糊 查询 ， 并 将 查询 的 结果 输出 ， 如 图 23.19 所 示 。 
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23.19 ”搜索 帖子 


在 content.php 文件 中 , 创建 一 个 form 表单 ， 提 交 站 内 搜索 的 关键 字 ; 将 关键 字 提 交 到 search.php 
文件 中 。 程 序 代码 如 下 《content.php): 
<form name="forml” method="post”action="content.php?class= 搜 索引 擎 &&content=<?php echo $_GET ， 
[content]:?>&&content_ 1=<?php echo $ GET[content 1]:?>" onSubmit="retum check submitO:"> 
<tr> 
<td width="25%" rowspan="2"><input type="image" name="imageField" src="images/index 71.jpg" /> 


<td> 
</t> 
</form> 


search.php 文件 ， 根 据 表单 中 提交 的 关键 字 ， 分 别 在 发 布 帖子 和 回复 帖子 中 执行 模糊 查询 ， 将 查 
询 的 结果 以 分 页 的 形式 输出 到 页 面 中 。 模 糊 查询 的 关键 代码 如 下 (search.php): 





<?php session_start|: include("conn/conn.php"): /初始 化 session 变量 ， 连 接 数据 库 
这 $_GET[page] 一 ""){$_GET[page]=-1: } // 淹 断 变量 的 值 是 否 为 空 ， 用 于 分 页 显示 
这 $_GET[pages] 一 ""){$_GET[pages]=1:} // 济 断 变量 的 值 是 否 为 空 ， 用 于 分 页 显示 


这 $_ GET[link type]—""){ $_GET[link type]=0: } 
这 $_ GET[link types—""){ $_GET['link types]=0:} 
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| S$content=$_GET[content]: // 获 取 帖 子 的 类 型 
| Scontent 1=$ GET[content 1]; // 获 取 帖子 的 类 别 
| // 从 发 布 的 帖子 中 查询 


| $query_6=mysql_query("select * from tb forum send where tb_send subject like '%".$ POST['tb_send subject_ 
人 | | content]."% ortb send content like '%".$ POST[tb send_subject content]."%6"); 
二 // 从 回复 的 帖子 中 搜索 
Note | $query_7=mysql query("select * from tb forum restore where tb restore subject like '%".$ POST['tb send_ 
1 subject_content]."%b' or tb_restore_content like '%".$_ POST['tb_send_subject_content]."%"); 
| /统计 查询 的 结果 
| if(mysql num rows($query 6)>0 or mysql num rows($query 7)>0){ 
这 $_ GET[page]){ // 定 义 分 页 的 变量 
| Spage size=10; // 定 义 每 页 显示 的 数量 
| $query="select count(*) as total from tb forum send where tb_send subject like '%".$ POST['tb_send_ 
| subject content]."%' or tb send content like '%".$ POST['tb send subject content]."9%6": 
| Sresult=mysql_query($query); 
$message_count=mysql_result($result.0."total"): 
| Spage_count=ceil($message_count/$page_size); 
| Soffset=($ GET[page]-1)*$page size; 
| $query_2=mysql_query("select * from tb_forum send where tb send subjectlike '%".$_ POST[Yb send_ 
Subject_content]."%' or tb_send_content like '%".$ POST['tb send_subject_content]."%' limit $offset, Spage_size 
?> 


至 此 ， 站 内 搜索 功能 讲解 完毕 ， 有 关 查 询 结果 的 分 页 输出 ， 这 里 不 做 介绍 ， 完 整 代码 可 以 参考 本 
书 源 代 码 中 的 内 容 。 
| 23.4.6 ”帖子 分 类 


在 论坛 中 ,根据 帖子 的 发 布 时 间 、 帖 子 内 容 的 特殊 性 以 及 受 关注 的 程度 ， 还 有 帖子 是 否 有 人 回复 
| 等 ， 对 帖子 进行 了 分 类 处 理 ， 分 为 最 新 帖子 、 精 华 区 、 热 点 区 和 待 回复 等 几 个 类 别 。 其 运行 结果 如 
图 23.20 所 示 。 


€3 总 hr/ocalhowtirdex php SE EY™ 


otttk 


用 放电 称 ! dia 个 人 入 向 “今天 是 :2018-03-13 我 参与 的 个 于 “向 子 和 yj 营 ”和 3 泊 友和 的 信守 9 返回 首页 姑 出 后 管理 


， 美工 设 计 


E23 


| 论坛 上 入村 ps344 人 存续 其 中 注册 月 户 9337 人 ， 访 窜 16019 人 -~ 
| - perered by Rean62DN 2016 oS Her TesstiOl L200. 
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< | 


回 ”最 新 帖子 ， 根据 帖子 的 ID， 按 照 ID 值 降序 排列 ， 输 出 最 新 的 10 条 帖子 信息 。 关 键 代 码 如 
下 (new forum.php) : 


<?php 
这 $_ GET[page]){ 
$page_size=10: /定义 每 页 输出 10 条 数据 
/按照 指定 的 类 别 从 数据 库 中 读 取 帖子 的 数据 
$query="select count(*) as total from tb forum send where tb send small type=".$ GET[content 1]."": 
Sresult=mysql_query($query); 
$message_count=mysql_result($result.0."total"): 
S$page_count=ceil($message count/$page size); | 
S$offset=($ GET['page]-1)*$page size: ! 
/从 数据 库 中 读 取 帖子 的 数据 ， 按 照 帖 子 发 布 的 ID 值 进行 降 蜂 排列 输出 | 
$query 2=mysql query("select * from tb forum send where tb send small type=".$ GET[content 1].” ; 
order by tb_send id desc limit $offset, $page_size"): | 
while($myrow 2=mysql fetch array($query 2)){ | 
?> ! 
| 
回 ”精华 区 、 热 点 区 和 待 回复 : 这 3 个 类 别 的 实现 方法 相同 ， 都 是 根据 数据 库 中 帖子 指定 的 字 | 
段 值 进行 判断 ， 精 华 区 根据 字段 tb_send_type_distillate 的 值 判断 。 热 点 区 根据 字段 tb_send_ | 
type_hotspot 的 值 判断 ， 而 待 回复 则 根据 字段 tb_send_types 的 值 判断 。 这 里 以 精华 区 帖子 的 | 
输出 为 例 ， 其 关键 代码 如 下 (distillate php) : | 
| 


























<?php 
if($_GET['page"]){ /实现 精华 区 帖子 的 分 页 输出 
$page_size=10; /每 页 显示 10 条 记录 
// 执 行 查询 语句 ， 以 tb_send type_distillate 字段 的 值 是 否 为 1 为 条 件 ， 如 果 为 1 则 是 精华 帖子 ， 否 则 不 是 
$query="select count(*) as total from tb forum send Where tb_send small type='$_ GET[content 1]' and 
tb_send type_distillate=1"; 
Sresult=mysql_query($query): 
$message count=mysql result($result.0."total"): 
S$page_count=ceil($message_count/$page_size): 
S$offset=($_GET['page']-1)*$page_size: 
$query_2=mysql_query("select * from tb_ forum send where tb_send_ small type='$content 1 and tb_send_ 
type distillate='1' limit $offset, $page size"): 
while($Smyrow_2=mysql fetch array($query 2)){ 
<tr> 
<td width="5%" align="center" bgcolor="#FFFFFF"><img src="<?php echo $myrow 2[tb send picture]:?>"> 


</td> 
<td bgcolor="#FFFFFF"><a href="send forum content.php?send big type=<?php echo $_ GET[content]:?> 
人 &&send small type=<?php echo $myrow 2[tb_send small type]:?>&&send id=<?php echo $myrow 2[tb_ send_ 
id]:?>" target=" blank"><?php echo $myrow 2[tb send subject]:?></a></td> 
<td width="25%" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send date]:?></td> 
<td width="25%" bgcolor="#FFFFFF"><?php echo $myrow_2[tb_send user]:?></td> | 
<td width="10%" bgcolor="#FFFFFF"><?php $query_s=mysql query("select * from tb forum restore | 
where tb send id='$myrow 2[tb send id]"): 
echo mysql num rows($query_s): 
?></td> 


= 


[之 [ 岗 计 设计 与 网 站 壬 设 从 入 门 到 精通 
| </t> 
<2php }}> 
| 上 述 介绍 的 是 如 何 从 数据 库 中 获取 到 指定 类 别 的 帖子 ， 下 面 讲解 这 些 帖 子 的 类 别 是 如 何 设置 的 。 
全 六 | 最 新 帖子 不 需要 任何 设置 ， 只 要 是 帖子 发 布 之 后 ， 自 动 会 生成 一 个 ID 值 , 根据 ID 值 自动 可 以 读 
”| 取 到 最 新 的 帖子 。 
而 精华 区 、 热 点 区 和 待 回复 则 都 需要 设置 。 其 中 设置 精华 区 和 热点 区 帖子 的 方法 相同 ， 都 是 在 论 
| 坛 的 后 台 管理 中 进行 操作 ， 通 过 form 表单 ， 创 建 复 选 框 ， 将 指定 帖子 的 tb_send type_distillate 或 者 
| tb_send_type_hotspot 字段 的 值 设置 为 1， 运行 结果 如 图 23.21 所 示 。 





SBE -|® rapyvecahorsdminnindsxphp>ile- 了 al 


会 员 管 里 公告 管理 帖子 类 别管 理 由 了 管理 ” 回 机 管理 人 顶 44 窟 旨 和 从 可 恢 槛 吉 区 管理 返回 前 台 首 页 当前 管理 员 ， admin 


所 属 专区 - 美工 设 计 [| 
所 展 具 别 - 1 
提交 ] [ 重要 
所 属 专 区 


tt tat 2010-08-12 
损 作 系统 am 2010-08-1: 
美工 役 计 
毅 工 设计 
商工 设计 
软件 开发 
软件 开发 
美工 设计 


页 次 : 1 / : 页 记录 : 3 条 





图 23.21 帖子 分 类 管理 


帖子 类 别 的 设置 操作 通过 两 个 文件 完成 ， 一 个 是 update_ forum.php， 用 于 提交 要 设置 类 别 帖子 的 
ID; 另 一 个 是 update_forum ok.php， 根 据 提交 的 ID 值 执行 设置 帖子 类 别 的 操作 。 

在 update_forum.php 文件 中 ， 首 先 创建 一 个 form 表单 ， 从 数据 库 中 读 取 帖 子 的 数据 ， 并 且 为 每 
个 帖子 设置 一 个 复 选 框 ， 复 选 框 的 值 是 帖子 的 ID。 再 分 别 创建 精华 帖子 和 热点 帖子 的 【提交 ]】 按 钮 ， 
同时 也 创建 取消 帖子 类 别 的 按钮 。 最 后 将 数据 提交 到 update_forum_ok.php 文件 中 。 关 键 代码 如 下 
(Cadmin/update_forum.php ): 


<form name="forml" method="post" action="update_forum_ ok.php"> 

<tr> 
<td width="72" height="35" align="center"><span class="STYLE3"> 选 项 </span></td> 
<td width="271" align="center"><span class="STYLE3"> 帖 子 主题 </span></td> 
<td width="214" align="center"><span class="STYLE3"> 发 布 人 </span></td> 
<td width="192" align="center"><span class="STYLE3"> 发 布 时 间 </span></td> 
<td width="100" align="center"><span class="STYLE3"> 精 华 区 </span></td> 
<td width="77" align="center"><span class="STYLE3"> 热 点 区 </span></td> 
<td width="77" align="center"><span class="STYLE3"> 是 否 结 帖 </span></td> 

</> 


<Iphp 
| is_GETIpageJ){ 
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< 
Spage_size=10; // 每 页 显示 两 条 记录 
$query="select count(*) as total from tb_ forum send where tb_send id";  // 从 数据 库 中 读 取 数据 
Sresult=mysql query($query): 
$message count=mysql result($result.0."total"): /获取 总 的 记录 数 
Spage_count=ceil($message_count/$page size); // 获 取 总 的 页 数 


$offset=($_GET[page]-1)*$page_size: 
$query=mysql query("select * from tb forum send where tb send id order by tb send id desc limit $offset, 
S$page_size"); | 
while($myrow=mysql fetch array(Squery){ | 
> | 
< 
<td height="25" align="center” class="STYLE1"><input name="<?php echo $myrow[tb_ send id]:?>" | 
type="checkbox" value="<?php echo $myrow[tb send id]:?>"></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send _subject]:?></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send_user]:?></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send_date]:?></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb_send type_distillate]:?></td> 
<td align="center" class="STYLE1"><?php echo $myrow[tb send type hotspot]:?></td> | 
<td align="center" class="STYLE1"><?php 这 $myrow[tb forum endj=—1){echo "已 结 贴 ":}else{echo "未 结 | 
贴 ";}?></td> 
</tr> 
<?php })2> 
<t> 
<td height="25" align="center">&nbsp:</td> | 
<td align="center"><input name="button" type=button class="buttoncss" onClick="checkAll(form!l,status)"” ,| 
value=" 全 选 "> 
<input type=button value=" 反 选 " class="buttoncss" onClick="switchAll(forml.status)"> 
<input type=button value=" 不 选 " class="buttoncss" onClick="uncheckAll(forml,status)"></td> 
<td align="center"><input type="submit" name="Submit" value=" 精 华 帖 "> 
<input type="submit" name="Submit3" value=" 取 消 "></td> 
<td align="center"><input type="submit" name="Submit2" value=" 热 门 帖 "> 
<input type="submit" name="Submit4" value=" 取 消 "></td> 
<td colspan="3" align="center"><input type="submit" name="Submit5" value=" 结 帖 "> 
<input type="submit" name="Submit6" value=" 取 消 "></td> 
</t> 
</form> 


在 update_forum_ok.php 文件 中 ， 根 据 表单 中 提交 的 帖子 的 ID 值 ， 通 过 while 语句 和 list0 函 数 ， 
循环 读 取 表单 中 提交 的 帖子 的 ID 值 ， 执 行 设置 帖子 类 别 和 取消 帖子 类 别 的 操作 ， 关 键 代 码 如 下 | 
(admin/update_ forum ok.php ): 


<?php session start0: include("conn/conn.php"): 
这 $Submit 一 "精华 帖 ){ 
while(list($name.$value)=each($_POST){ 
Sresult=mysql_query("update tb_forum send set tb_send type_distillate='1' where tb_send id=".$name.™"); 
if($result—true){ 
echo "<script>alert( 精 华 帖 激活 成 功 !"): window.location .href="index.php?title= 帖 子 管理 ';</script>";}} 


} 
这 $Submit3 一 "取消 "){ 
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whiledist(Sname.Svaluc)=each($_ POST)){ 
Sresult=mysql query("update tb forum send set tb send type distillate='0' where tb send id=".$name." 


if($result—true){ 
|! echo "<script>alert( 精 华 帖 取消 !"); window.location.hre 人 "index.php?title= 帖 子 管理 ':</script>";}} 
| ?> 
Note | 在 设置 帖子 类 别 的 过 程 中 ， 使 用 的 是 批量 更 新 技术 ， 其 主要 通过 while 循环 语句 和 list0、eachO 
| 函数 来 完成 。 


each0 函 数 

each0 函 数 返回 数组 中 当前 指针 位 置 的 键 名 和 对 应 的 值 ， 并 向 前 移动 数组 指针 。 键 值 对 被 返回 为 
4 个 单元 的 数组 ， 键 名 为 0、1、key 和 value。 单 元 0 和 key 包含 数组 单元 的 键 名 ，1 和 value 包含 数 
据 ， 如 果 内 部 指针 越过 了 数组 的 末端 ， 则 函数 返回 false。 基 本 语法 如 下 : 

array each( array &$array ) 

参数 array 为 输入 的 数组 。 

list0 函 数 

list0 函 数 把 数组 中 的 值 赋 给 一 些 变量 。 与 array0 函 数 类 似 , 不 是 真正 的 函数 , 而 是 语言 结构 。list0 
函数 仅 能 用 于 数字 索引 的 数组 ， 并 且 数 字 索 引 从 0 开始 。 基 本 语法 如 下 : 

void list( mixed $vamame , mixed $... ) 

参数 mixed 为 被 赋值 的 变量 名 称 。 

而 待 回 复 则 是 在 回复 帖子 的 操作 中 完成 的 , 当 回 复 帖 子 提交 成 功 后 , 执行 更 新 回复 帖子 中 字段 tb_ 
send_types 的 值 为 1， 表明 该 帖子 已 经 有 回复 ， 有关 程序 代码 可 以 参考 前 面 小 节 的 内 容 ， 这 里 不 再 装 述 。 


23.4.7 ”置顶 管理 


| 顶 帖 管理 是 针对 管理 员 的 帖子 置顶 权限 而 设置 的 ， 因 为 不 可 能 将 某 个 帖子 永远 置 项， 所 以 创建 了 
| 顶 帖 管理 这 个 功能 。 该 功能 存在 于 论坛 的 后 台 管理 中 ， 实 现 帖子 置 项 和 取消 置顶 的 操作 。 运 行 结果 如 
图 23.22 所 示 。 





会 员 管理 公告 管理 ”帖子 类 别管 理 帖子 管理 回帖 管理 项 帖 管理 备份 和 恢 揽 专区 管理 返回 前 台 首 页 当前 管理 员 : aduin 


帖 了 主题 发 布 人 发 布 时 间 所 属 类 型 
teat 站 2016-08-11 21:54:58 置顶 








PE 分 页 方法 人 2010-08-06 09:35:09 置 页 








在 PSP 申 ， 如 何 控制 上 传 文件 的 大 小 人 2016-08-01 19:49:28 置 页 


























dfadfdsfadfa 2016-04-11 11:17:59 置顶 
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项 帖 管理 功能 的 实现 应 用 了 两 个 文件 ， 一 个 是 permute_admin php， 用 于 从 数据 库 中 读 取 出 置 项 | 
帖子 的 数据 ， 进 行 分 页 输出 ， 并 且 创建 form 表单 ， 为 每 个 帖子 设置 一 个 下 拉 列 表 框 ， 实 现 帖子 置顶 | 
和 取消 置顶 的 操作 ， 关 键 代码 如 下 《permute_admin php): | 





php | 名 
if(s GET[pageD | 
Spage size=5; /每 页 显示 两 条 记录 





$query="select count(*) as total from tb_forum send where tb send type=1": // 从 数据 库 中 读 取 数据 

Sresult=mysql_query(Squery): 

Smessage_count=mysql_result($result.0,"total"): 1/ 获取 总 的 记录 数 

$page_count=ceil($message_count/$page_size): 1/ 获取 总 的 页 数 

Soffset=($_GET['page']-1)*$page_size; 

$query=mysql_query("select * from tb forum send where 也 send type=1 order by tb_send id desc limit ,| 
Soffset, $page_size"): | 

while($myrow=mysql fetch array(Squery){ 


| 
?> ! 
! 
! 


<t> | 
<td height="25" align="left">&nbsp:&nbsp:<span class="STYLE1"><?php echo $myrow[tb send subject]:?> | 
</span></td> | 
<td align="center"><span class="STYLE1"><?php echo $myrow[tb_send_user]:?></span></td> 
<td align="center"><span class="STYLE1"><?php echo $myrow[tb send date]:?></span></td> 
<td align="center"><span class="STYLE1"><?php echo $myrow[tb_send type]:?></span></td> 
<td align="center"> 
<form action="update_permute.php?update_ id=<?php echo $myrowltb_send id]:?>" method="post" name="forml" | 
class="STYLE1"> 
<select name="tb_send type" id="tb_send type"> 
<option value="1"> 置 顶 </option> 
<option value="0"> 取 消 </option> 
</select> 
<input type="submit" name="Submit" value=" 执 行 "> 
</form></td> 
</tr> 
<2php 2> 


在 update_permute.php 文件 中 ， 根 据 表单 中 提交 的 值 和 帖子 ID 的 值 ， 执 行 帖子 置 项 和 取消 置顶 
的 操作 。 关 键 代码 如 下 (update_permute.php): 


<?php include("../conn/conn.php"): 
Supdate_id=$_GET[update id]: /获取 帖子 的 ID 值 
// 执 行 帖子 置顶 或 者 取消 置顶 的 操作 
$query=mysql query("update tb forum send set tb send type='$ POST[tb send type] where tb send id= 
'$update id"): 

if($query—true){ 

echo "<script>alert( 更 新 成 功 !):historybackO:</script>": 
jelse{ 

echo "<script>alert( 更 新 失败 !):history backO:</script>": 
} 
?> 
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2348 管理 信息 
| 
! 


Pee 用 户 信息 包括 个 人 信息 和 短信 息 , 在 前 台 导 航 条 中 可 以 进入 .个 人 信息 在 rework.php 文件 中 设计 ， 
| 短信 息 模块 在 send_mailphp 文件 中 进行 管理 ， 在 该 文件 中 完成 我 的 信息 模块 的 操作 。 其 运行 结果 如 


ed ee 


! © tocahost/sond mail php7sorder=edmin 


用 记 思 称 : edeia 个 人 信息 今天 是 : 2016-99-19 我 多 与 的 帖子 我 的 帖子 “我 8 茂生 的 好友 筷 的 信 祖 @。 近 加 首页 刀 出 后台 管理 








X 我 的 邮箱 


adein 你 好: 您 现在 有 ! 条 未 读 信 息 ! 


收 补 箱 写 信 


注意 ; 收 件 人 的 注册 用 户 名 




















23.23 ”短信 息 管理 


短信 息 模块 中 主要 包括 写 信 、 收 件 箱 和 发 件 箱 3 个 功能 。 这 3 个 功能 都 在 send_mail.php 文件 中 
成 。 

在 send mailphp 文件 中 ， 应 用 switch 语句 ， 根 据 栏目 标识 的 变量 值 ， 实 现 不 同 功能 之 间 的 切换 
输出 。 关 键 代码 如 下 (send_mail.php): 

<table class="w950 table3 padding6" align="center"> 
<tr><td><?php echo $_GET['sender]:?> 您 好 : 您 现在 有 <?php 

| $sender =$_ GET[sender]: 
| $query=mysql query("select * from tb mail box where tb_receiving person='$ GET[sender]' and 
| 


进 


| tb mail type=0"): 
Smyrow=mysql_num rows($query): 


echo $myrow: 
?> 条 未 读 信息 ! </td> 
<t> 
‘</table> 
<table class="w950 table" align="center"> 
<t> 


| <td width="263" height="39" align="center">&nbsp:é&nbsp:&nbsp:&nbsp:<a href="send mailphp?sender= 
| <?php echo $ GET[sender]:?>&&mails= 收 件 箱 "> 收 件 箱 </a></td> 
! <td width="244" align="center"><a href="send mail. php?sender=<?php echo $ GET[sender]:?>&&mails= 
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发 件 箱 "> 发 件 箱 </a></td> 
<td width="425" align="center"><a href="send mail php?sender=<?php echo $ GET[sender]:?>&&mails= 
写 信 "> 写 信 </a></td> 
A> 


人 
名 
© 
万 
) 六 


<2php | 
这 isset($ GET[mails])){ 
Ss 
yalse{ 
Smails ="" 





} | 
switch(Smails){ | 
Case ™: | 
include("write mail.pbp"); break: 
case " 写 信 ": | 
include("write mail.php"): break: | 
case " 收 件 箱 ": | 
include("browse mail.php"): break: ! 
case "发 件 箱 ": 
include("browse send mail.php"): break: 

} 

ke 

写 信和 通过 write_mail.php 和 write_mail okphp 文件 完成 。 通 过 write_mail.php 文件 来 创建 form 表 
单 ， 提 交 发 送信 息 的 内 容 。 通 过 write_mail_ok.php 文件 来 对 表单 中 提交 的 内 容 进 行 处 理 ， 并 且 将 发 送 | 
信息 存储 到 指定 的 数据 表 中 作为 发 送 记录 。 

收 信 通过 browse_mail.php、browse_mail contentphp 和 delete_ mailphp 3 个 文件 来 完成 。 通 过 
browse_mail.php 文件 从 数据 库 中 读 取 出 收 到 信息 的 内 容 ， 将 信息 内 容 进行 分 页 输出 ， 并 且 设 置 超 链 
接 ， 链 接 到 browse mail contentphp 文件 。 在 browse_mail_content.php 文件 中 查看 信息 的 详细 内 容 。 
通过 delete_mail.php 文件 ， 实 现 对 收 信箱 中 的 信息 进行 管理 ， 删 除 指定 的 信息 。 

发 信 通 过 browse_send_mail.php 和 browse_send_mail_ contentphp 两 个 文件 来 完成 。 通 过 browse_ 
send_mailphp 文件 输出 数据 库 中 存储 的 发 送 记录 ， 并 且 根 据 信息 的 标题 进行 分 页 输出 ， 设 置 超 链接 ， 
链接 到 browse_send_mail contentphp 文件 ， 在 该 文件 中 输出 发 送信 息 的 详细 内 容 。 

由 于 篇 幅 所 限 ， 上 述 3 个 功能 的 代码 这 里 没有 给 出 ， 完 整 代码 请 参看 本 书 源 代 码 中 的 内 容 。 


23.4.9 管理 好 友 


我 的 好 友 功能 也 是 从 send_forum_ contentphp 文件 中 设置 的 超 链接 开始 。 我 的 好 友 链 接 的 是 my_ | 
人 friend.php 文件 。 在 该 文件 中 完成 添加 好 友 的 操作 ， 并 且 向 好 友 发 送 一 条 信息 。 其 运行 结果 如 图 23.24 | 
所 示 。 

在 my_friend.php 文件 中 ， 创 建 form 表单 ， 实 现 好 友 的 提交 ， 将 数据 提交 到 my_friend_ok.php 文 
件 中 ， 在 该 文件 中 完成 好 友 的 添加 ， 并 且 向 好 友 发 送 一 条 短信 。my_friend_ok.php 文件 的 程序 代码 
如 下 : 

<?php include("conn/conn.php"): 
这 lisset($_ SESSION["tb forum user"] ){ 
echo "<script> alert(' 请 先 登 录 后 再 操作 !"): history.backO:</script>":} 


“Ee 


my 砚 贡 设 计 与 网 站 建设 从 入 门 到 精通 


$tb 


E 
中 


2 date=date("Y-m-d"): 
iving person=$ POST['receiving person']; 
全 站 | 电 mail subject=$ POST[mail subject]: 
Stb_mail content=$ POST[mail content]: 
Note | S$tb_mail sender=$ POST[mail sender]: 
| Stb mail date=date("Y-m-d"); 
| $querys=mysql_query("select * from tb forum user Where tb fomm User- ytb receiving person'); 
| 这 mysql_ num rows(Squerys)>0){ 
$querys=mysql query("insert into tb my friend(tb_ mytb friendtb date)values(Stb my'Stb_ friend','$tb_date)"); 
! $query=mysql query("insert into tb_mail box(tb receiving person.tb mail subject,tb mail content,tb mail_ 
| Sendertb mail date)values('$tb receiving person'Stb mail subject','$tb mail content,Stb mail sender','$tb mail date)"); 
| 这 $query 一 tmue){ 
echo "<script>alert( 完 成 好 友 添加 ， 并 向 Ta 发 送 一 封 短 息 !):history back0: </script>"; 
} 
jelse{ 
echo "<script>alert( 对 不 起 ， 不 存在 该 用 户 !"):history.backO:</script>"; 


} 
?> 


CE +)- |B httpy/ocalhosy my friend php?friend=laamy=admin > BO| 人 iocahos 


QHg 


-一 newsmth-net 


用 户 昵称 : adain 个 人 信息 今天 是 : 2016-08-12 我 参与 的 帖子 我 9M 子 我 9 收藏 我 的 好 友 3 和 返回 首页 退出 后 台 管 理 


我 要 加 : 为 好 友 ! 
收 件 人 : [1 注意 : 收 件 人 的 注册 用 户 名 


主题 :| 加 个 好 友 吧 
我 是 管理 员 adsin， 咱 们 加 个 好 友 吧 ? | 





发 送 | | 取消 

















@ 当前 论坛 上 总 共有 25314 人 在 线 ， 其 中 注册 用 户 9337 人 ， 访 窜 16019 人 。 
Powered by BYR-Teas@2009-2016. KBS Dev-Teas@2011-2016. 
外 本末 村 区 | 袜 ar 





23.24 ”添加 好 友 


在 完成 好 友 的 添加 之 后 ， 在 会 员 登 录 成 功 的 页 面 中 有 一 个 “我 的 好 友 ” 的 超 链 接 ， 单 击 该 链接 进 
入 browse_friend.php 文件 中 ， 在 该 文件 中 可 以 查看 到 所 有 的 好 友 。 当 单 击 好 友 的 名 称 时 将 链接 到 
| person_data.php 文件 ， 通 过 该 文件 可 以 查看 到 好 友 的 详细 信息 。 在 browse_friend.php 文件 中 ， 还 创建 
| 了 一 个 form 表单 ， 将 数据 提交 到 delete_friend.php 文件 中 ， 实 现 对 指定 好 友 进行 删除 的 操作 。 其 运行 
| 结果 如 图 23.25 所 示 。 
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€S 看 httpi//localhost/browse_friend.php?my=admin -cl 


Rita 


-一 newsmtp-net 


用 户 昵 称 ; adein 个 人 信息 “今天 是 ; 2016-08-12 我 参与 的 帖子 ”我 的 帖子 ”我 的 收藏 我 的 好 友 Ed 返回 首页 退出 后 各 管理 


我 的 好 友 

















图 23.25 好 友 管 理 
23.4.10 数据 备份 和 恢复 | 


论坛 中 数据 的 备份 和 恢复 主要 应 用 的 是 exec0 函 数 ， 通 过 该 函数 执行 服务 器 中 的 外 部 程序 ， 实 现 | 
备份 数据 和 恢复 数据 的 操作 。 数 据 备份 和 恢复 的 运行 结果 如 图 23.26 所 示 。 


ithte 


会 员 管理 公告 管理 帖子 类 别管 理 ”帖子 管理 回帖 管理 栅 帖 管理 备份 和 恢复 专区 管理 返回 前 台 首页 当前 管理 员 ; saein 


清空 备份 文件 夫 : 有 | 日 备 份 





数据 备份 ; 20160812145252. sql | 














数据 恢 夏 ;: 20160812145237. sql 回 











图 23.26 备份 和 恢复 数据 
exec0 函 数 执行 服务 器 中 的 外 部 程序 。 基 本 语法 如 下 : 
String exec( string $command [. array &$output [. int &Sretum var ]] ) 
参数 说 明 如 下 。 
command: 必 选 参数 。 字 符 串 命令 。 
output: 可 选 参 数 。 数 组 输出 。 
return_var: 可 选 参数 。 执 行 命令 返回 来 的 状态 变量 。 | 
在 执行 数据 的 备份 和 恢复 操作 之 前 ， 首 先 要 确立 与 数据 库 的 连接 ， 并 且 要 定义 服务 器 的 目录 , 以 | 

及 mysql 命令 执行 文件 的 路 径 。 程 序 代 码 如 下 (admin/config php ): 


<2php 
define('PATH'.$_ SERVER['DOCUMENT ROOT]): // 服 务 器 目录 


“de 


a OO 
&% 


| define(ROOT',/): // 论 坛 根 目录 
| define( ADMIN''admin/’): /后 台 目 录 
| define(BAK','sqlbak/): // 备 份 目 录 

| define(MYSQLPATH''D:\www\\): //mysql 执行 文件 路 径 
仿生 | define(MYSQLDATA'db forum'): /lmysql 数据 库 
| define(‘MYSQLHOST','localhost): /lmysql 服务 器 他 

Note | define(MYSQLUSER'root): /mysql 账号 
define(MYSQLPWD',11111111"): //mysql 密码 


在 确定 了 与 MySQL 数据 库 的 连接 和 执行 文件 的 路 径 之 后 ， 就 可 以 进行 备份 和 恢复 数据 的 操作 。 
备份 数据 库 主要 应 用 的 是 MySQL 中 的 mysgldump 命令 ， 输 入 MySQL 数据 库 的 用 户 名 (root)、 
服务 器 〈localhost) 和 密码 (11111111)， 指 定 要 备份 的 数据 库 〈db_forum)， 确 定数 据 库 备 份 文件 的 名 
| 称 和 存储 的 位 置 (sglbak/)， 最 后 通过 exec0 函 数 来 执行 这 个 命令 。 程序 代 码 如 下 (admin/bak_chk.php): 


<2php 
| Session start(); // 初 始 化 session 变量 
| include "config.php": // 连 接 数据 库 
| // 编 写 备份 数据 库 的 命令 


$mysqlstr = MYSQLPATH mysqldump -uMYSQLUSER. -h. MYSQLHOST, -pMYSQLPWD. ' --opt -B 
| "MYSQLDATA.'>'.PATH.ROOT.ADMIN.BAK.$ POST[b_name']: 

exec($mysqlstr): // 执 行 备份 数据 库 的 命令 

echo "<script>alert(' 备 份 成 功 '):location='index.php?title= 备 份 和 恢复 '</script>"; 
?> 


恢复 数据 的 操作 使 用 的 是 MySQL 命令 , 输入 MySQL 数据 库 的 用 户 名 (root)、 服 务 器 (localhost) 


和 密码 (11111111)， 指 定 要 恢复 的 数据 库 (db_forum )， 确 定数 据 库 备份 文件 的 名 称 和 存储 的 位 置 
(sqlbak/)， 通 过 exec0 函 数 来 执行 命令 。 程 序 代 码 如 下 《admin/rebak_chk.php): 


<?php 
session start(); // 初 始 化 SESSION 变量 
include "config.php"; // 连 接 数据 库 ， 指 定数 据 库 文 件 存储 的 位 置 
/编写 恢复 数据 库 的 命令 


Smysqlstr = MYSQLPATH mysql -u.MYSQLUSER.' -h. MYSQLHOST' -p.MYSQLPWD. ‘MYSQLDATA.' < 
‘PATH.ROOT.ADMIN.BAK.$ POST['r name']: 
exec($mysqlstr): // 执 行 恢复 数据 库 操作 的 命令 
echo "<script>alert( 恢 复 成 功 "):location='index.php?title= 备 份 和 恢复 '</script>"; 
?> 


"830 。 


